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

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

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

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

method, 請求類型，如 GET 、POST 等，大小寫不敏感。

url, URL 地址

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

xhr.timeout值必須為 0。

xhr.withCredentials值必須為 false。

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

username, 用戶名，一般不用。

password, 密碼，一般不用。

send(body?:Object=null)

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

如果 data 是 Document 類型，同時也是 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 是其他類型，則不會設(shè)置 content-type 的默認(rèn)值

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

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

abort()

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

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

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

setRequestHeader(header:string, value:string)

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

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

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

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

禁止設(shè)置以下請求頭，否則會拋錯。

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 字段不區(qū)分大小寫。

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

getAllResponseHeaders()

獲取 response 中所有 header 字段。

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

無論跨域或同域請求，無法獲取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` 字段為服務(wù)器允許暴露給客戶端訪問的字段。
> 句法：```Access-Control-Expose-Headers: , , ...```

readyState
[只讀屬性]用于追蹤 xhr 當(dāng)前的狀態(tài)，共有 5 種可能的值，分別對應(yīng) xhr不同的階段。
每次 readyState 值變化時，都會觸發(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 事件中，不能簡單的判斷 xhr.status === 200，因為 20x、304等 HTTP 狀態(tài)碼也被認(rèn)為是請求成功。
參考以下代碼：

  xhr.onload = function () {
  //如果請求成功
  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、""時，xhr 對象上才有此屬性，此時才能調(diào)用 xhr.responseText ，否則拋錯。

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

responseXML

默認(rèn)值為 null

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

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

upload

是一個XMLHttpRequestUpload對象，用于收集傳輸信息。支持事件：

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 對象，詳見 事件補充。

timeout

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

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

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

不能為同步請求設(shè)置 timeout ,否則會報錯。

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

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

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

xhr 共有 8 個事件，分別如下：

onloadstart

onprogress

onabort

ontimeout

onerror

onload

onloadend

onreadystatechange

事件觸發(fā)條件

引用自 你真的會使用 XMLHttpRequest 嗎？

請求正常時，事件觸發(fā)順序

觸發(fā) xhr.onreadystatechange (之后每次 readyState 變化時，都會觸發(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 時事件觸發(fā)順序

觸發(fā) xhr.onreadystatechange 事件，此時 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 事件

事件補充

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

lengthComputable
【只讀】，為 boolean值，表示資源是否有可計算的長度。

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

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

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

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

fetchAPI 整理。

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

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

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

你真的會使用 XMLHttpRequest 嗎？

XMLHttpRequest Level 2 使用指南