XMLHttpRequest

1. 创建 XMLHttpRequest 实例
2. 发出 Http 请求
3. 接收服务器传回的数据
4. 更新网页数据

• readyState：返回一个整数，表示实例对象的当前状态
  • 0，表示 XMLHttpRequest 实例已经生成，但实例的 open() 方法还没有被调用
  • 1，表示 open() 方法已经调用，但是实例的 send() 方法还没有调用，仍然可以使用实例的 setRequestHeader() 方法，设定 HTTP 请求的头信息
  • 2，表示实例的 send() 方法已经调用，并且服务器返回的头信息和状态码已经收到
  • 3，表示正在接收服务器传来的数据体（body 部分）。这时，如果实例的 responseType 属性等于 text 或者空字符串，responseText 就会包含已经接收到的部分
  • 4，表示服务器返回的信息已经完全接收，或者本次请求已经失败
• onreadystatechange：指向一个监听函数，readystatechange 事件发生时，就会执行这个属性。如果使用 abort 方法，终止 XMLHttpRequest 请求，也会造成 readyState 属性变化，下面是一个例子：

const  xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com', true);
xhr.onreadystatechange = function () {
  if (xhr.readystate !== 4 || xhr.status !== 200) {
      return;
  }
  console.log(xhr.responseText)
}
xhr.send()

• response 服务器返回的数据体
• responseType 服务器返回数据的类型
• responseText 从服务器接收的字符串
• responseXML 从服务器接收的 XML 或 HTML 文档
• responseURL 发送数据的服务器网址
• status HTTP 响应状态码
• statusText HTTP 响应状态码文字描述
• timeout 请求时间限制
• ontimeout timeout 的监听事件

• onloadstart （HTTP 请求发出）的监听函数
• onprogress （正在发送和加载数据）的监听函数
• onabort 请求中止，比如用户调用了 abort () 方法）的监听函数
• onerror （请求失败）的监听函数
• onload （请求成功完成）的监听函数
• ontimeout （用户指定的时限超过了，请求还未完成）的监听函数
• onloadend（请求完成，不管成功或失败）的监听函数

这是一个布尔值，表示跨域请求时，用户信息（如 Cookie 和认证的 HTTP 头信息）是否会包含在请求之中，默认为 false

如果需要跨域 AJAX 请求发送 Cookie， 需要设置 withCredentials 为 true，同源请求不需要。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com', true);
xhr.withCredentials = true;
xhr.send(null);

为了让这个属性生效，服务器必须显式返回 Access-Control-Allow-Credentials 这个头信息

可以获得一个监听上传文件的对象，主要方法就是监听这个对象的各种事件：loadstart、loadend、load、abort、error、progress、timeout

用于指定 HTTP 请求的参数

• method HTTP 动词方法，如 GET，POST，PUT，DELETE，HEAD
• url：表示请求发送目标 URL
• async：布尔值，表示请求是否异步

用于实际发出 HTTP 请求

用于设置浏览器发送的 HTTP 请求的头信息

指定 MIME 类型，覆盖服务器返回的真正的 MIME 类型，从而让浏览器有不一样的处理。

返回 HTTP 头信息指定字段的值

表示服务器发来的所有 HTTP 头信息

终止已经发出的 HTTP 请求