XMLHTTPRequest
请求过程：
- 创建 xhr 对象
- 调用 open(method,url,async?)
- 调用 send()，get 请求不用加参数
- onreadystate()监听请求结果 0->未初始化 1->未发送请求 2->已发送请求 3->已收到 正在处理请求 4->已处理完毕 状态： 200——正确、404——未找到页面、500——错误
var xhr = new XMLHttpRequest();
xhr.open("GET", "example.php");
xhr.send();
// 监听状态
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
alert(xhr.responseText);
} else {
alert(xhr.statusText);
}
};
优点： 不重新加载页面的情况下更新网页 在页面已加载后从服务器请求/接收数据 在后台向服务器发送数据。
缺点： 使用起来也比较繁琐，需要设置很多值。 早期的 IE 浏览器有自己的实现，这样需要写兼容代码。
Ajax
1.建立 XMLHttpRequest 对象; 2.设置回调函数;（onreadystate 触发时调用的函数） 3.配置请求信息，(如 open,get 方法)，使用 open 方法与服务器建立链接; 4.向服务器发送数据; 5.在回调函数中针对不同的响应状态进行处理;
优点： 对原生 XHR 的封装，做了兼容处理，简化了使用。 增加了对 JSONP 的支持，可以简单处理部分跨域。
缺点： 如果有多个请求，并且有依赖关系的话，容易形成回调地狱。 ajax 是 jQuery 中的一个方法。如果只是要使用 ajax 却要引入整个 jQuery 非常的不合理。
fetch
优点：基于 promise 实现，解决回调地狱，更加语义化
问题： 只对网络请求报错，也就是说只有网络错误这些导致请求不能完成时他才会调用 reject，而对 400，500 这种错误它并不会 reject 默认不会带 cookie，需要添加配置项：fetch(url,{credentials:‘include’}) 不支持 abort，不支持超时控制，使用 setTimeout 及 promise.reject 的实现的超时控制不能阻止请求过程继续在后台运行，会造成流量的浪费 fetch 没办法原生检测请求的进度，XHR 可以
axios
支持请求／响应拦截器
- axios.interceptors.request.use(): 添加请求拦截器
- axios.interceptors.response.use(): 添加响应拦截器 支持请求取消
- axios.Cancel(): 用于创建取消请求的错误对象
优点：
- 可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON 类型的数据
- 批量发送多个请求
- 安全性更高，客户端支持防御 XSRF，就是让你的每个请求都带一个从 cookie 中拿到的 key, 根据浏览器同源策略，假冒的网站是拿不到cookie 中的 key 的，这样，后台就可以轻松辨别出这个请求是否是用户在假冒网站上的误导输入，从而采取正确的策略。
