JavaScript学习笔记028-ajax0get0post0
2018-10-06 本文已影响0人
Mr柳上原
Author：Mr.柳上原
- 付出不亚于任何的努力
- 愿我们所有的努力，都不会被生活辜负
- 不忘初心，方得始终
面试的时候问了点简单的es6知识
然后跟我说公司开发用的是react
回家啃了几天的react
正式上班的时候
用的是react-native
对于只学了vue和小程序框架的我来说
这种大起大落的感觉真是超级刺激
不知道自己能不能够在公司站稳脚跟
函数式编程和面向对象编程
不同的两个模式
挑战一下自己吧
<!DOCTYPE html> <!-- 文档类型：标准html文档 -->
<html lang='en'> <!-- html根标签 翻译文字：英文 -->
<head> <!-- 网页头部 -->
<meat charset='UTF-8'/> <!-- 网页字符编码 -->
<meat name='Keywords' content='关键词1,关键词2'/>
<meat name='Description' content='网站说明'/>
<meat name='Author' content='作者'/>
<title>前端59期学员作业</title> <!-- 网页标题 -->
<link rel='stylesheet' type='text/css' href='css/css1.css'/> <!-- 外链样式表 -->
<style type='text/css'> /*内部样式表*/
</style>
</head>
<body> <!-- 网页主干：可视化区域 -->
<script>
/*
ajax：
与后台进行数据交互
异步的JavaScript 和 XML
ajax通过http协议请求数据
无刷新页面进行数据加载
http1.0三种请求方法：
GET
POST
HEAD
http1.1:
DELETE
PUT
与后台交互时，约定俗成的请求规范
增 POST
删 DELETE
改 PUT
查 GET
xhr.readyState状态码：
0 请求未初始化
1 连接到服务器
2 请求以被接收到
3 正在处理请求
4 请求处理完成，并响应
xhr.status（服务器）http状态码：
100~ 消息
200~ 成功
300~ 重定向
400~ 请求错误
500~ 服务器错误
*/
// 生成ajax对象
const xhr = new XMLHttpRequest();
// 通过open方法，设置跟后台交互的一些行为
xhr.open("GET", "http://www.xxx.cn", true); // 第一个参数为请求方式，第二个参数是url地址，第三个参数是布尔值，设置是否使用异步请求
// 按照上面设置好的方式发送数据
xhr.send();
// 监听数据发送，结束行为
xhr.onload = () => {
// 判断自身状态码，4代表成功
if (xhr.readyState === 4){ // xhr.readyState是xhr自身的状态码
// 判断http状态码，2开头的和304代表成功
if (200 <= xhr.status && xhr.status < 300 || xhr.status === 304) {
// 请求成功，拿到后台发来的数据
xhr.responseText;
}
}
}
// 两种方法类似，onload监听数据发送，onreadystatechange监听数据发送状态发生变化的过程
// xhr.onreadystatechange = () => {}
/*
get：
get方式的数据发送
查询字符串以键值对的方式，在get请求中的url地址中发送
以？开头，键与值之间=连接，不同键值对之间&连接
输入url地址后，浏览器默认get方式发送请求
*/
// 中文会被转换成URI编码
encodeURI("风屿"); // 中文转URI
decodeURI(""); // URI转中文
// get发送数据
user: "fengyu",
password: 123
xhr.open("GET", "http://www.xxx.cn?user=fengyu&password=123", true);
/*
post：
post方式的数据发送
post发送数据必须设置请求头信息，数据作为send的参数发送
*/
// post发送数据
xhr.open("POST", "http://www.xxx.cn?user=fengyu&password=123", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); // post请求头
xhr.send("user=fengyu&password=123");
/*
跨域：
默认不能进行跨域请求
请求会被浏览器阻止
域：
环境
不同的url地址是不同的域
相同地址下不同的端口是不同的域
实现跨域：
JSONP 通过script的src
CORS 在后台程序里设置对应的域进行访问
代理 通过信任的服务器进行代理请求
*/
</script>
</body>
</html>
