xhr.readyState 状态码

• 0 (UNSENT) 代理被创建，当尚未调用 open() 方法

• 1 (OPENED) open() 方法已经被调用

• 2 (HEADERS_RECEIVED) send() 方法已经被调用，并且响应头和状态已经可获得。

• 3 (LOADING) 响应体部分正在被接收，如果 responseType 属性是“text”或空字符串，responseText 将会 在载入的过程中拥有部分响应数据。

• 4 (DONE) 请求操作已经完成。这意味着数据传输已经彻底完成或失败。

XMLHttpRequest 自身上的一些属性

• xhr.readyState

• xhr.respone

• xhr.responseText

• xhr.responseType

• xhr.responseURL

• xhr.responseXML

• xhr.status

• xhr.statusText

• xhr.timeout

• xhr.upload

• xhr.withCredentials

XMLHttpRequest 自身上的方法

• xhr.open() 初始化请求

• xhr.send() 发送请求

• xhr.abort() 取消请求

• xhr.setRequestHeader(header, value) 设置请求头，必须在 open() 方法和 send() 之间调用。

• xhr.getAllResponseHeaders() 获取所有响应头

• xhr.getResponseHeader(name) 获取指定的响应头

• xhr.overrideMimeType() 指定 mime 类型代替服务器指定的类型，使服务端响应信息中传输的 数据按照该指定 MIME 类型处理。必须在 send() 之前调用。

XMLHttpRequest 自身上的事件

• abort 当一个请求终止时 abort 事件被触发，比如程序执行 XMLHttpRequest.abort()。

  xhr.addEventListener('abort', handler)

• error 当请求遇到错误时，将触发error 事件。

• load 当一个XMLHttpRequest请求完成的时候会触发load 事件。

• loadend 总是在一个资源的加载进度停止之后被触发 (例如，在已经触发 “error”，“abort” 或 “load” 事件之后)。

• loadstart 当程序开始加载时，事件将被触发。

• progress 事件会在请求接收到数据的时候被周期性触发。

• readystatechange 只要 readyState 属性发生变化，就会调用相应的回调。

• timeout 当进度由于预定时间到期而终止时，会触发 timeout 事件。

const xhr = new XMLHttpRequest() // 0

xhr.timeout = 2000 // 设置超时时间

xhr.ontimeout = function () {
  // ...
}

xhr.open('GET', 'foo', true) // 1

// 设置请求头，不能出现中文，否则报错，可以编码处理中文。
xhr.setRequestHeader('Foo', encodeURIComponent('一段中文')) 

xhr.onreadystatechange = function () {

  // 2、3、4

  const { status, readyState, response } = xhr

  if (!/^(2|3)\d{2}$/.test(status)) {
    return
  }

  if (readyState === 2) {

    // 响应头
    xhr.getAllResponseHeaders()
  }

  if (xhr.readyState === 4) {

    // 响应体
    response
  }
}

xhr.send(null)