目的
了解 Ajax 的基本使用和 Promise 的基本使用
XMLHttpRequest 的使用
总体来说可以分为配置，发送和监测响应三个部分。
1.配置一个请求
我们通过 open 方法来配置一个请求。 open 这个词很奇怪，但事实就是这样。
配置一个请求就是配置我们的 Http 方法，具体的 URL
xhr.open('GET', '/article/xmlhttprequest/example/load');
2.发送一个请求
直接调用xhr.send方法即可发送一个请求
一些请求方法，像 GET 没有 request body。还有一些请求方法，像 POST 使用 body 将数据发送到服务器
3.监测一个响应
- xhr 提供了一些属性和方法来告知我们响应的相关信息和一些 hook。 这部分后面我们再说
换个角度来看，xhr对象存在着一些过程信息和我们控制内容
1.xhr 告诉我们的过程信息
-
statusHTTP 状态码（一个数字）：200，404，403等，如果出现非 HTTP 错误，则为0。 -
statusTextHTTP 状态消息（一个字符串）：状态码为200对应于OK，404对应于Not Found，403对应于Forbidden。 -
response服务器 response body。
2.我们决定 xhr 的
-
xhr.responseType属性，决定这个请求的响应格式(服务端可以收到并回复对应的信息) timeout属性，决定请求的超时时间load方法 —— 决定当请求完成（即使 HTTP 状态为 400 或 500 等），并且响应已完全下载时该做什么error方法 —— 当无法发出请求，例如网络中断或者无效的 URL该做什么。progress方法 —— 在下载响应期该做些什么setRequestHeader(name, value)方法 设置头abort方法，用来取消请求
一些历史-关于 readyState 和readystatechange
你可能在非常老的代码中找到 readystatechange 这样的事件监听器，它的存在是有历史原因的，因为曾经有很长一段时间都没有 load 以及其他事件。如今，它已被 load/error/progress 事件处理程序所替代。
一些实例
-
简单的Post方法
-
可以使用内建的 FormData 对象。以
multipart/form-data编码发送表单。 -
也可以可以使用
JSON.stringify并以字符串形式发送。设置 headerContent-Type: application/json
-
-
监听 Post 方法
如果我们 POST 一些内容，XMLHttpRequest 首先上传我们的数据（request body），然后下载响应。
progress 事件仅在下载阶段触发。xhr.upload 对象会帮助我们监听我们的上传数据（or 发送的数据）
xhr.upload.onprogress = function(event) {
alert(`Uploaded ${event.loaded} of ${event.total} bytes`);
};
- 跨源请求
默认情况下不会将 cookie 和 HTTP 授权发送到其他域。要启用它们，将xhr.withCredentials 设置为 true
翻译成 Promise
简单来说就是正常使用 ajax，然后有结果时 resolve 即可。
const xhr = new XMLHttpRequest()
return new Promise((resolve,reject) => {
xhr.onload = function(...args){
console.log(args)
resolve(xhr.response)
}
xhr.onerror = function(...args){
console.log(args)
reject(new Error('请求失败'))
}
xhr.open(options.method,url)
xhr.send(options.body)
})
