摘要：屬性方法事件整理大全。有嚴(yán)格安全限制。值描述將設(shè)為空字符串與設(shè)置為相同，是默認(rèn)類型實(shí)際上是。默認(rèn)值為空字符串只有當(dāng)為時(shí)，對(duì)象上才有此屬性，此時(shí)才能調(diào)用，否則拋錯(cuò)。以下種情況下值都為空字符串請(qǐng)求未完成請(qǐng)求失敗。

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

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

用于創(chuàng)建 HTTP 請(qǐng)求，但請(qǐng)求并未發(fā)送。

method, 請(qǐng)求類型，如 GET 、POST 等，大小寫不敏感。

url, URL 地址

async, 是否異步，默認(rèn) true。
若為同步請(qǐng)求時(shí)

xhr.timeout值必須為 0。

xhr.withCredentials值必須為 false。

xhr.responseType值必須為"",(text 也不允許)。

username, 用戶名，一般不用。

password, 密碼，一般不用。

send(body?:Object=null)

定義 HTTP 請(qǐng)求的數(shù)據(jù)（ body ），當(dāng) method 為 GET、HEAD 時(shí)，該參數(shù)忽略。body 可為 ArrayBuffer、Blob、Document(類似 XML 格式數(shù)據(jù))、DOMString（字符串）、FormData（表單）。
ArrayBuffer、Blob、Document、DOMString、Formdata 詳細(xì)參考。
注意：body 參數(shù)會(huì)影響請(qǐng)求頭部的 content-type 默認(rèn)值。

如果 data 是 Document 類型，同時(shí)也是 HTML Document 類型，則 content-type 默認(rèn)值為 text/html;charset=UTF-8 ;否則為 application/xml;charset=UTF-8；

如果 data 是 DOMString 類型，content-type 默認(rèn)值為 text/plain;charset=UTF-8 ；

如果 data 是 FormData 類型，content-type 默認(rèn)值為 multipart/form-data; boundary=[xxx]

如果 data 是其他類型，則不會(huì)設(shè)置 content-type 的默認(rèn)值

如果用 xhr.setRequestHeader()手動(dòng)設(shè)置了中 content-type 的值，以上默認(rèn)值就會(huì)被覆蓋。
若在斷網(wǎng)狀態(tài)下調(diào)用 xhr.send(data)方法，則會(huì)拋錯(cuò)：Uncaught NetworkError: Failed to execute "send" on "XMLHttpRequest"。一旦程序拋出錯(cuò)誤，如果不 catch 就無(wú)法繼續(xù)執(zhí)行后面的代碼，所以調(diào)用 xhr.send(data)方法時(shí)，應(yīng)該用 try-catch 捕捉錯(cuò)誤。

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

abort()

若請(qǐng)求已發(fā)出，則會(huì)終止請(qǐng)求，并將 readyState 置為 0.

調(diào)用后，應(yīng)將 xhr 對(duì)象置為 null 以促進(jìn)垃圾回收。由于內(nèi)存原因，不建議重用 xhr 對(duì)象。
擴(kuò)展閱讀：和瀏覽器異步請(qǐng)求取消相關(guān)的那些事

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

setRequestHeader(header:string, value:string)

設(shè)置請(qǐng)求 HTTP 請(qǐng)求頭信息。如content-type、cookie、accept-xxx等。

header 參數(shù)大小寫不敏感。

必須在open()方法后，send()方法前調(diào)用，否則會(huì)拋錯(cuò)。

可調(diào)用多次，最終值不會(huì)覆蓋，而是采用追加append方式。

禁止設(shè)置以下請(qǐng)求頭，否則會(huì)拋錯(cuò)。

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)

獲取某個(gè)指定 header 字段的值。

header 字段不區(qū)分大小寫。

有嚴(yán)格安全限制，詳見getAllResponseHeaders方法。

getAllResponseHeaders()

獲取 response 中所有 header 字段。

有嚴(yán)格安全限制。如下：

無(wú)論跨域或同域請(qǐng)求，無(wú)法獲取Set-Cookie、Set-Cookie2字段值。

跨域請(qǐng)求，只可獲取simple response header和Access-Control-Expose-Headers（名詞解釋見下方），否則會(huì)報(bào)錯(cuò)：Refused to get unsafe header。故若想訪問(wèn)其他字段，需后端添加到 Access-Control-Expose-Headers 中。

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

> `Access-Control-Expose-Headers`：跨域請(qǐng)求獨(dú)有，同域請(qǐng)求無(wú)。該字段中列舉的 `header` 字段為服務(wù)器允許暴露給客戶端訪問(wèn)的字段。
> 句法：```Access-Control-Expose-Headers: , , ...```

readyState
[只讀屬性]用于追蹤 xhr 當(dāng)前的狀態(tài)，共有 5 種可能的值，分別對(duì)應(yīng) xhr不同的階段。
每次 readyState 值變化時(shí)，都會(huì)觸發(fā) xhr.onreadystatechange 事件。

status 和 statusText
status 屬性表示 HTTP 響應(yīng)狀態(tài)碼，如 200、302、400等。
statusText 屬性表示 HTTP響應(yīng)狀態(tài)的描述文本，如 OK、Not Found等。
注意，在 xhr.onload 事件中，不能簡(jiǎn)單的判斷 xhr.status === 200，因?yàn)?20x、304等 HTTP 狀態(tài)碼也被認(rèn)為是請(qǐng)求成功。
參考以下代碼：

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

responseType 和 response
可在 xhr.send() 前設(shè)置 responseType ，用于指定返回的響應(yīng)數(shù)據(jù)類型。和 xhr.overrideMimeType() 方法效果相同，推薦使用 responseType。

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

部分瀏覽器不支持 xhr.responseType 為 blob。

responseText

默認(rèn)值為空字符串 ""

只有當(dāng) responseType 為 text、""時(shí)，xhr 對(duì)象上才有此屬性，此時(shí)才能調(diào)用 xhr.responseText ，否則拋錯(cuò)。

只有當(dāng)請(qǐng)求成功時(shí)，才能拿到正確值。以下 2 種情況下值都為空字符串 ""：請(qǐng)求未完成、請(qǐng)求失敗。

responseXML

默認(rèn)值為 null

只有當(dāng) responseType 為 text、""、document時(shí)，xhr 對(duì)象上才有此屬性，此時(shí)才能調(diào)用 xhr.responseXML，否則拋錯(cuò)。

只有當(dāng)請(qǐng)求成功且返回?cái)?shù)據(jù)被正確解析時(shí)，才能拿到正確值。以下 3 種情況下值都為 null ：請(qǐng)求未完成、請(qǐng)求失敗、請(qǐng)求成功但返回?cái)?shù)據(jù)無(wú)法被正確解析時(shí)。

upload

是一個(gè)XMLHttpRequestUpload對(duì)象，用于收集傳輸信息。支持事件：

onloadstart

onprogress

onabort

ontimeout

onerror

onload

onloadend
具體觸發(fā)順序及條件，參考事件章節(jié)。
其中，xhr.upload.onprogress在上傳階段(即xhr.send()之后，xhr.readystate=2之前)觸發(fā)，每 50ms 觸發(fā)一次?？色@得上傳信息、進(jìn)度等。
上述事件回調(diào)的參數(shù)為 XMLHttpRequestEventTarget 對(duì)象，詳見 事件補(bǔ)充。

timeout

單位毫秒，默認(rèn)值 0 ，即不設(shè)置超時(shí)。

計(jì)時(shí)從onloadstart 事件觸發(fā)開始（即xhr.send()開始）,以onloadend 事件觸發(fā)為結(jié)束。

在 IE 中，只能在調(diào)用open()方法后send()方法前設(shè)置。其他瀏覽器無(wú)此限制，但仍然從xhr.send()方法調(diào)用計(jì)時(shí)。

不能為同步請(qǐng)求設(shè)置 timeout ,否則會(huì)報(bào)錯(cuò)。

早期較多瀏覽器不支持，可通過(guò) setTImeOut 實(shí)現(xiàn)。

withCredentials
boolean 類型，默認(rèn)值 false， 用于跨域請(qǐng)求時(shí)將 cookie 加入到 request header。

xhr.withCredentials 與 CORS 什么關(guān)系
我們都知道，在發(fā)同域請(qǐng)求時(shí)，瀏覽器會(huì)將 cookie 自動(dòng)加在 request header 中。但在發(fā)送跨域請(qǐng)求時(shí)， cookie 并不會(huì)自動(dòng)加在 request header 中。
造成這個(gè)問(wèn)題的原因：在 CORS 標(biāo)準(zhǔn)有如下規(guī)定，默認(rèn)情況下，瀏覽器在發(fā)送跨域請(qǐng)求時(shí)，不能發(fā)送任何認(rèn)證信息（credentials）如 cookies 和 HTTP authentication schemes 。除非 xhr.withCredentials 為 true。
cookies 也是一種認(rèn)證信息，在跨域請(qǐng)求中， client 端必須手動(dòng)設(shè)置 xhr.withCredentials=true ，且 server 端也必須允許 request 能攜帶認(rèn)證信息（即 response header 中包含 Access-Control-Allow-Credentials:true），這樣瀏覽器才會(huì)自動(dòng)將 cookie 加在 request header 中。
注意，一旦跨域 request 能夠攜帶認(rèn)證信息， server 端一定不能將 Access-Control-Allow-Origin 設(shè)置為*，而必須設(shè)置為請(qǐng)求頁(yè)面的域名。

xhr 共有 8 個(gè)事件，分別如下：

onloadstart

onprogress

onabort

ontimeout

onerror

onload

onloadend

onreadystatechange

事件觸發(fā)條件

引用自 你真的會(huì)使用 XMLHttpRequest 嗎？

請(qǐng)求正常時(shí)，事件觸發(fā)順序

觸發(fā) xhr.onreadystatechange (之后每次 readyState 變化時(shí)，都會(huì)觸發(fā)一次)

觸發(fā) xhr.onloadstart //上傳階段開始：

觸發(fā) xhr.upload.onloadstart

觸發(fā) xhr.upload.onprogress

觸發(fā) xhr.upload.onload

觸發(fā) xhr.upload.onloadend //上傳結(jié)束，下載階段開始：

觸發(fā) xhr.onprogress

觸發(fā) xhr.onload

觸發(fā) xhr.onloadend

發(fā)生 abort / timeout / error 時(shí)事件觸發(fā)順序

觸發(fā) xhr.onreadystatechange 事件，此時(shí) readystate 為 4

如果上傳階段還沒有結(jié)束，則依次觸發(fā)以下事件：

xhr.upload.onprogress

xhr.upload.[onabort或ontimeout或onerror]

xhr.upload.onloadend

觸發(fā) xhr.onprogress 事件

觸發(fā) xhr.[onabort或ontimeout或onerror] 事件

觸發(fā) xhr.onloadend 事件

事件補(bǔ)充

xhr.upload.onprogress 和 xhr.onprogress 的回調(diào)參數(shù)為 XMLHttpRequestEventTarget 對(duì)象。屬性如下：

lengthComputable
【只讀】，為 boolean值，表示資源是否有可計(jì)算的長(zhǎng)度。

loaded
已接收或已上傳的字節(jié)數(shù)。

total
文件總字節(jié)數(shù)。

xhr.upload.onprogress 事件觸發(fā)于上傳階段，可用于獲取上傳進(jìn)度。

xhr.onprogress 事件觸發(fā)于下載階段，可用于獲取下載進(jìn)度。

fetchAPI 整理。

jQuery.ajax 的實(shí)現(xiàn)詳解。

axios 的實(shí)現(xiàn)詳解。

DOMString、Document、FormData、Blob、File、ArrayBuffer 數(shù)據(jù)類型介紹

你真的會(huì)使用 XMLHttpRequest 嗎？

XMLHttpRequest Level 2 使用指南