XMLHTTPRequest属性、方法、事件大全&详解。

摘要：属性方法事件整理大全。有严格安全限制。值描述将设为空字符串与设置为相同，是默认类型实际上是。默认值为空字符串只有当为时，对象上才有此属性，此时才能调用，否则抛错。以下种情况下值都为空字符串请求未完成请求失败。

XMLHTTPRequest属性、方法、事件整理大全。

open(method:string, url:string, async?:boolean=true, username?:string, password: string)

用于创建 HTTP 请求，但请求并未发送。

method, 请求类型，如 GET 、POST 等，大小写不敏感。

url, URL 地址

async, 是否异步，默认 true。
若为同步请求时

xhr.timeout值必须为 0。

xhr.withCredentials值必须为 false。

xhr.responseType值必须为"",(text 也不允许)。

username, 用户名，一般不用。

password, 密码，一般不用。

send(body?:Object=null)

定义 HTTP 请求的数据（ body ），当 method 为 GET、HEAD 时，该参数忽略。body 可为 ArrayBuffer、Blob、Document(类似 XML 格式数据)、DOMString（字符串）、FormData（表单）。
ArrayBuffer、Blob、Document、DOMString、Formdata 详细参考。
注意：body 参数会影响请求头部的 content-type 默认值。

如果 data 是 Document 类型，同时也是 HTML Document 类型，则 content-type 默认值为 text/html;charset=UTF-8 ;否则为 application/xml;charset=UTF-8；

如果 data 是 DOMString 类型，content-type 默认值为 text/plain;charset=UTF-8 ；

如果 data 是 FormData 类型，content-type 默认值为 multipart/form-data; boundary=[xxx]

如果 data 是其他类型，则不会设置 content-type 的默认值

如果用 xhr.setRequestHeader()手动设置了中 content-type 的值，以上默认值就会被覆盖。
若在断网状态下调用 xhr.send(data)方法，则会抛错：Uncaught NetworkError: Failed to execute "send" on "XMLHttpRequest"。一旦程序抛出错误，如果不 catch 就无法继续执行后面的代码，所以调用 xhr.send(data)方法时，应该用 try-catch 捕捉错误。

try{
    xhr.send(data)
}catch(e) {
    //doSomething...
};

abort()

若请求已发出，则会终止请求，并将 readyState 置为 0.

调用后，应将 xhr 对象置为 null 以促进垃圾回收。由于内存原因，不建议重用 xhr 对象。
扩展阅读：和浏览器异步请求取消相关的那些事

overrideMimeType(type:string)
重写 response 的 content-type。功能如同 xhr.responseType,已可以摒弃。

setRequestHeader(header:string, value:string)

设置请求 HTTP 请求头信息。如content-type、cookie、accept-xxx等。

header 参数大小写不敏感。

必须在open()方法后，send()方法前调用，否则会抛错。

可调用多次，最终值不会覆盖，而是采用追加append方式。

禁止设置以下请求头，否则会抛错。

Accept-Charset

Accept-Encoding

Access-Control-Request-Headers

Access-Control-Request-Method

Connection

Content-Length

Cookie

Cookie2

Date

DNT

Expect

Host

Keep-Alive

Origin

Referer

TE

Trailer

Transfer-Encoding

Upgrade

User-Agent

Via

getResponseHeader(header:string)

获取某个指定 header 字段的值。

header 字段不区分大小写。

有严格安全限制，详见getAllResponseHeaders方法。

getAllResponseHeaders()

获取 response 中所有 header 字段。

有严格安全限制。如下：

无论跨域或同域请求，无法获取Set-Cookie、Set-Cookie2字段值。

跨域请求，只可获取simple response header和Access-Control-Expose-Headers（名词解释见下方），否则会报错：Refused to get unsafe header。故若想访问其他字段，需后端添加到 Access-Control-Expose-Headers 中。

simple response header 包括的 header 字段有：Cache-Control,Content-Language,Content-Type,Expires,Last-Modified,Pragma。

> `Access-Control-Expose-Headers`：跨域请求独有，同域请求无。该字段中列举的 `header` 字段为服务器允许暴露给客户端访问的字段。
> 句法：```Access-Control-Expose-Headers: , , ...```

readyState
[只读属性]用于追踪 xhr 当前的状态，共有 5 种可能的值，分别对应 xhr不同的阶段。
每次 readyState 值变化时，都会触发 xhr.onreadystatechange 事件。

status 和 statusText
status 属性表示 HTTP 响应状态码，如 200、302、400等。
statusText 属性表示 HTTP响应状态的描述文本，如 OK、Not Found等。
注意，在 xhr.onload 事件中，不能简单的判断 xhr.status === 200，因为 20x、304等 HTTP 状态码也被认为是请求成功。
参考以下代码：

  xhr.onload = function () {
  //如果请求成功
  if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
    //do successCallback
  }
}

responseType 和 response
可在 xhr.send() 前设置 responseType ，用于指定返回的响应数据类型。和 xhr.overrideMimeType() 方法效果相同，推荐使用 responseType。

IE10/IE11 不支持 xhr.responseType 为 json。

部分浏览器不支持 xhr.responseType 为 blob。

responseText

默认值为空字符串 ""

只有当 responseType 为 text、""时，xhr 对象上才有此属性，此时才能调用 xhr.responseText ，否则抛错。

只有当请求成功时，才能拿到正确值。以下 2 种情况下值都为空字符串 ""：请求未完成、请求失败。

responseXML

默认值为 null

只有当 responseType 为 text、""、document时，xhr 对象上才有此属性，此时才能调用 xhr.responseXML，否则抛错。

只有当请求成功且返回数据被正确解析时，才能拿到正确值。以下 3 种情况下值都为 null ：请求未完成、请求失败、请求成功但返回数据无法被正确解析时。

upload

是一个XMLHttpRequestUpload对象，用于收集传输信息。支持事件：

onloadstart

onprogress

onabort

ontimeout

onerror

onload

onloadend
具体触发顺序及条件，参考事件章节。
其中，xhr.upload.onprogress在上传阶段(即xhr.send()之后，xhr.readystate=2之前)触发，每 50ms 触发一次。可获得上传信息、进度等。
上述事件回调的参数为 XMLHttpRequestEventTarget 对象，详见 事件补充。

timeout

单位毫秒，默认值 0 ，即不设置超时。

计时从onloadstart 事件触发开始（即xhr.send()开始）,以onloadend 事件触发为结束。

在 IE 中，只能在调用open()方法后send()方法前设置。其他浏览器无此限制，但仍然从xhr.send()方法调用计时。

不能为同步请求设置 timeout ,否则会报错。

早期较多浏览器不支持，可通过 setTImeOut 实现。

withCredentials
boolean 类型，默认值 false， 用于跨域请求时将 cookie 加入到 request header。

xhr.withCredentials 与 CORS 什么关系
我们都知道，在发同域请求时，浏览器会将 cookie 自动加在 request header 中。但在发送跨域请求时， cookie 并不会自动加在 request header 中。
造成这个问题的原因：在 CORS 标准有如下规定，默认情况下，浏览器在发送跨域请求时，不能发送任何认证信息（credentials）如 cookies 和 HTTP authentication schemes 。除非 xhr.withCredentials 为 true。
cookies 也是一种认证信息，在跨域请求中， client 端必须手动设置 xhr.withCredentials=true ，且 server 端也必须允许 request 能携带认证信息（即 response header 中包含 Access-Control-Allow-Credentials:true），这样浏览器才会自动将 cookie 加在 request header 中。
注意，一旦跨域 request 能够携带认证信息， server 端一定不能将 Access-Control-Allow-Origin 设置为*，而必须设置为请求页面的域名。

xhr 共有 8 个事件，分别如下：

onloadstart

onprogress

onabort

ontimeout

onerror

onload

onloadend

onreadystatechange

事件触发条件

引用自 你真的会使用 XMLHttpRequest 吗？

请求正常时，事件触发顺序

触发 xhr.onreadystatechange (之后每次 readyState 变化时，都会触发一次)

触发 xhr.onloadstart //上传阶段开始：

触发 xhr.upload.onloadstart

触发 xhr.upload.onprogress

触发 xhr.upload.onload

触发 xhr.upload.onloadend //上传结束，下载阶段开始：

触发 xhr.onprogress

触发 xhr.onload

触发 xhr.onloadend

发生 abort / timeout / error 时事件触发顺序

触发 xhr.onreadystatechange 事件，此时 readystate 为 4

如果上传阶段还没有结束，则依次触发以下事件：

xhr.upload.onprogress

xhr.upload.[onabort或ontimeout或onerror]

xhr.upload.onloadend

触发 xhr.onprogress 事件

触发 xhr.[onabort或ontimeout或onerror] 事件

触发 xhr.onloadend 事件

事件补充

xhr.upload.onprogress 和 xhr.onprogress 的回调参数为 XMLHttpRequestEventTarget 对象。属性如下：

lengthComputable
【只读】，为 boolean值，表示资源是否有可计算的长度。

loaded
已接收或已上传的字节数。

total
文件总字节数。

xhr.upload.onprogress 事件触发于上传阶段，可用于获取上传进度。

xhr.onprogress 事件触发于下载阶段，可用于获取下载进度。

fetchAPI 整理。

jQuery.ajax 的实现详解。

axios 的实现详解。

DOMString、Document、FormData、Blob、File、ArrayBuffer 数据类型介绍

你真的会使用 XMLHttpRequest 吗？

XMLHttpRequest Level 2 使用指南