XMLHttpRequest（XHR）对象用于与服务器交互。通过 XMLHttpRequest 可以在不刷新页面的情况下请求特定 URL，获取数据。这允许网页在不影响用户操作的情况下，更新页面的局部内容。XMLHttpRequest 在 AJAX 编程中被大量使用。
尽管名称如此，XMLHttpRequest 可以用于获取任何类型的数据，而不仅仅是 XML。它甚至支持 HTTP以外的协议（包括 file:// 和 FTP），尽管可能受到更多出于安全等原因的限制。

const xhr = new XMLHttpRequest()

发送请求

open / send

• open() ：初始化一个请求
  • 参数1：method
  • 参数2：url
  • 参数3：默认true，为异步
• setRequestHeader()：设置 HTTP 请求头的值。必须在open()之后、send() 之前调用该方法。

• send()：发送请求。如果请求是异步的（默认），那么该方法将在请求发送后立即返回。

  readyState属性和onreadystatechange事件

  readyState属性表示请求/响应过程的当前活动阶段。这个属性的值如下：

• 0（UNSENT）未初始化。尚未调用open()方法。

• 1（OPENED）启动。已经调用open()方法，但没有调用send()方法。
• 2（HEADERS_RECEIVED）发送。已经调用send()方法，但尚未接收到响应。
• 3（LOADING）接收。已经接收到部分响应数据。
• 4（DONE）完成。已经接收到全部响应数据。

只要readyState属性的值发生变化，都会触发一次onreadystatechange事件。利用这个事件来检测每次状态变化后readyState的值。一般情况下只对readyState值为4的阶段做处理，这时所有数据都已经就绪。

xhr.onreadystatechange = function () {
  if(xhr.readyState !== 4) {
    return  
  }
  if(xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.responseText)
  }
}

timeout属性和ontimeout事件

timeout属性表示请求在等待响应多少毫秒之后就终止。如果在规定的时间内浏览器还没有接收到响应，就会触发ontimeout事件处理程序。

//将超时设置为3秒钟
xhr.timeout = 3000 
// 请求超时后请求自动终止，会调用 ontimeout 事件处理程序
xhr.ontimeout = function(){
    console.log('请求超时了')
}

overrideMimeType()方法

overrideMimeType()方法能够重写服务器返回的MIME类型，从而让浏览器进行不一样的处理

xhr.overrideMimeType('text/plain')

responseType属性

responseType属性是一个字符串，表示服务器返回数据的类型。使用xhr.response属性来接收。

这个属性是可写的，可以在调用open()方法之后，send()方法之前设置这个属性的值，告诉服务器返回指定类型的数据。如果responseType设为空字符串，等同于默认值text。

responseType属性可以设置的格式类型如下：

当将responseType设置为一个特定的类型时，你需要确保服务器所返回的类型和你所设置的返回值类型是兼容的。那么如果两者类型不兼容，服务器返回的数据就会变成null，即使服务器返回了数据。

withCredentials属性

withCredentials 属性是一个布尔值，表示跨域请求时是否协带凭据信息（cookie、HTTP认证及客户端SSL证明等）。默认为false。

const xhr = new XMLHttpRequest()
xhr.open('get', '/server', true)
xhr.withCredentials = true
xhr.send(null)

当配置了 withCredentials 为 true 时，必须在后端增加 response头 信息 Access-Control-Allow-Origin ，且必须指定域名，而不能指定为*。还要添加 Access-Control-Allow-Credentials 这个头信息为 true。

response.addHeader("Access-Control-Allow-Origin", "http://example.com")
response.addHeader("Access-Control-Allow-Credentials", "true")

GET 参数的编码方式

const xhr = new XMLHttpRequest()
// 使用encodeURIComponent()进行编码
const tempParam = encodeURIComponent('age')
const tempValue = encodeURIComponent('20')
xhr.open('get', '/server?tempParam=tempValue&money=100', true)

接收响应

响应头相关

getResponseHeader
getAllResponseHeaders

• Content-Type：服务器告诉客户端响应内容的类型和采用字符编码。比如：Content-Type: text/html; charset=utf-8。
• Content-Length：服务器告诉客户端响应实体的大小。比如：Content-Length: 8368。
• Content-Encoding：服务器告诉客户端返回的的压缩编码格式。比如：Content-Encoding: gzip, deflate, br。
• status：状态码
• statusText：状态说明

response属性

response属性表示服务器返回的数据。它可以是任何数据类型，比如字符串、对象、二进制对象等等，具体的类型由XMLHttpRequest.responseType属性决定。该属性只读。