Ajax
Ajax
Ajax 是 Asynchronous JavaScript and XML（异步 JavaScript 和 XML）的简写
Ajax 中的异步：可以异步地向服务器发送请求，在等待响应的过程中，不会阻塞当前页面，浏览器可以做自己的事情。直到成功获取响应后，浏览器才开始处理响应数据
Ajax 想要实现浏览器与服务器之间的异步通信，需要依靠 XMLHttpRequest，它是一个构造函数
Ajax 的使用步骤
创建 xhr 对象
const xhr = new XMLHttpRequest();
监听事件，处理响应，当获取到响应后，会触发 xhr 对象的 readystatechange 事件，可以在该事件中对响应进行处理
xhr.onreadystatechange = () => {
if (xhr.readyState !== 4) return;
// HTTP CODE
// 获取到响应后，响应的内容会自动填充 xhr 对象的属性
// xhr.status：HTTP 200 404
// xhr.statusText：HTTP 状态说明 OK Not Found
if ((xhr.status >= 200) & (xhr.status < 300) || xhr.status === 304) {
// console.log('正常使用响应数据');
console.log(xhr.responseText);
}
};
readystatechange 事件也可以配合 addEventListener 使用，不过要注意，IE6~8 不支持 addEventListener。为了兼容性，readystatechange 中不使用 this，而是直接使用 xhr。由于兼容性的原因，最好放在 open 之前
xhr.addEventListener('readystatechange', () => {}, fasle);
readystatechange 事件监听 readyState 这个状态的变化
它的值从 0 ~ 4，一共 5 个状态
- 0：未初始化。尚未调用 open()
- 1：启动。已经调用 open()，但尚未调用 send()
- 2：发送。已经调用 send()，但尚未接收到响应
- 3：接收。已经接收到部分响应数据
- 4：完成。已经接收到全部响应数据，而且已经可以在浏览器中使用了
准备发送请求，调用 open 并不会真正发送请求，而只是做好发送请求前的准备工作
xhr.open(
'HTTP 方法 GET、POST、PUT、DELETE',
'地址 URL',
true
);
调用 send() 正式发送请求，参数是通过请求体携带的数据
xhr.send(null);
JSON
- JSON.parse()
- JSON.stringify()
跨域
向一个域发送请求，如果要请求的域和当前域是不同域，就叫跨域，不同域之间的请求，就是跨域请求。 阻止跨域请求，其实是浏览器本身的一种安全策略--同源策略
协议、域名、端口号，任何一个不一样，就是不同域，与路径无关
https（协议）😕/www.imooc.com（域名）:443（端口号）/course/list（路径）
CORS 跨域资源共享
响应体请求头中，指定允许跨域资源共享
Access-Control-Allow-Origin: *
表明允许所有的域名来跨域请求它，* 是通配符，没有任何限制
IE10 及以上版本的浏览器可以正常使用 CORS
JSONP
JSONP 主要就是利用 script 标签，加载跨域文件。script 标签跨域不会被浏览器阻止
XHR
responseType 和 response 属性
接受响应内容可以通过responseType指定
responseText 只能在没有设置 responseType 或者 responseType = '' 或 'text' 的时候才能使用
设置xhr.responseType = 'json'; 可以在xhr.response属性接收json对象，而非字符串
IE6~9 不支持，IE10 开始支持
timeout 属性
设置请求的超时时间（单位 ms）
IE6~7 不支持，IE8 开始支持
withCredentials 属性
指定使用 Ajax 发送请求时是否携带 Cookie
使用 Ajax 发送请求，默认情况下，同域时，会携带 Cookie；跨域时，不会
最终能否成功跨域携带 Cookie，还要看服务器同不同意
IE6~9 不支持，IE10 开始支持
abort()
终止当前请求，一般配合 abort 事件一起使用
setRequestHeader()
可以设置请求头信息
xhr.setRequestHeader(头部字段的名称, 头部字段的值);
请求头中的 Content-Type 字段用来告诉服务器，浏览器发送的数据是什么格式的
xhr.setRequestHeader('Content-Type', 'application/json');
load 事件
响应数据可用时触发
IE6~8 不支持 load 事件
error 事件
请求发生错误时触发
IE10 开始支持
abort 事件
调用 abort() 终止请求时触发
timeout 事件
请求超时后触发
IE8 开始支持
FormData
使用 Ajax 提交表单，可以使用FormData
FormData 的基本用法
通过 HTML 表单元素创建 FormData 对象
const fd = new FormData(表单元素);
xhr.send(fd);
通过 append() 方法添加数据
const fd = new FormData();
fd.append('age', 18);
xhr.send(fd);
IE10 及以上可以支持
扩展
axios 是一个基于 Promise 的 HTTP 库，可以用在浏览器和 node.js 中（http://www.axios-js.com/zh-cn/docs/）
Fetch 也是前后端通信的一种方式
Fetch 是 Ajax（XMLHttpRequest）的一种替代方案，它是基于 Promise 的
Ajax 的兼容性比 Fetch 好