摘要：實(shí)際上，他的所有屬性均來自實(shí)例對(duì)象具有如下的繼承關(guān)系屬性只讀。事件回調(diào)方法在狀態(tài)改變時(shí)觸發(fā)，在一個(gè)收到響應(yīng)的請(qǐng)求周期中，方法會(huì)被觸發(fā)次，因此可以在方法中綁定一些事件回調(diào)。表示請(qǐng)求的狀態(tài)。

1.GUI渲染線程
2.javascript引擎線程
3.瀏覽器事件觸發(fā)線程
4.HTTP請(qǐng)求線程

通常線程之間的交互以事件的方式發(fā)生，通過事件回調(diào)的方法予以通知。事件回調(diào)，是以先進(jìn)先出的方式添加到任務(wù)隊(duì)列的末尾，等js引擎空閑時(shí)，任務(wù)隊(duì)列中排隊(duì)的任務(wù)將會(huì)依次被執(zhí)行。這些事件回調(diào)包括setTimeout, setInterval,click, ajax異步請(qǐng)求回調(diào)。

瀏覽器中，js引擎線程會(huì)循環(huán)從任務(wù)隊(duì)列中讀取事件并且執(zhí)行，這種運(yùn)行機(jī)制稱作 Event Loop（事件循環(huán)）。

當(dāng)ajax請(qǐng)求被服務(wù)器響應(yīng)并且受到response后，瀏覽器事件觸發(fā)線程捕獲了ajax的回調(diào)事件 onreadystatechange(當(dāng)然也可能觸發(fā)onload,或者onerror等等)。該事件沒有立即被執(zhí)行，而是添加到任務(wù)隊(duì)列的末尾。等js引擎空閑了，任務(wù)隊(duì)列的任務(wù)才會(huì)被撈出來，然后挨個(gè)執(zhí)行。

在onreadystatechange事件回調(diào)內(nèi)部，有可能對(duì)dom進(jìn)行操作。此時(shí)瀏覽器會(huì)掛起js引擎線程，轉(zhuǎn)而執(zhí)行GUI渲染線程，進(jìn)行UI重繪(repaint)或者回流（reflow）.當(dāng)js引擎重新執(zhí)行時(shí)，GUI渲染線程又會(huì)被掛起，GUI更新會(huì)被保存起來，等到j(luò)s引擎空閑時(shí)立即被執(zhí)行。

XMLHttpRequest的實(shí)例對(duì)象沒有自有屬性。實(shí)際上，他的所有屬性均來自XMLHttpRequest.prototype

XMLHttpRequest實(shí)例對(duì)象具有如下的繼承關(guān)系

xhr << XMLHttpRequest.prototype << XMLHttpRequestEventTarget.prototype << EventTarget.prototype << Object.prototype

readyState屬性
只讀。

onreadystatechange
onreadystatechange事件回調(diào)方法在readystate狀態(tài)改變時(shí)觸發(fā)，在一個(gè)收到響應(yīng)的ajax請(qǐng)求周期中，onreadystatechange方法會(huì)被觸發(fā)4次，因此可以在onreadystatechange方法中綁定一些事件回調(diào)。

xhr.onreadystatechange = function(e){
  if(xhr.readystate==4){
    var s = xhr.status;
    if((s >= 200 && s < 300) || s == 304){
      var resp = xhr.responseText;
      //TODO ...
    }
  }
}

注意: onreadystatechange回調(diào)中默認(rèn)會(huì)傳入Event實(shí)例

status
只讀屬性。status表示http請(qǐng)求的狀態(tài)。初始值為0，如果服務(wù)器沒有顯式地指定狀態(tài)碼, 那么status將被設(shè)置為默認(rèn)值, 即200.

statusText
只讀屬性, statusText表示服務(wù)器的響應(yīng)狀態(tài)信息, 它是一個(gè) UTF-16 的字符串, 請(qǐng)求成功且status==20X時(shí), 返回大寫的 OK . 請(qǐng)求失敗時(shí)返回空字符串. 其他情況下返回相應(yīng)的狀態(tài)描述. 比如: 301的 Moved Permanently , 302的 Found , 303的 See Other , 307 的 Temporary Redirect , 400的 Bad Request , 401的 Unauthorized 等等.

onloadstart
onloadstart事件回調(diào)方法在ajax請(qǐng)求發(fā)送之前觸發(fā), 觸發(fā)時(shí)機(jī)在 readyState==1 狀態(tài)之后, readyState==2 狀態(tài)之前.
onloadstart方法中默認(rèn)將傳入一個(gè)ProgressEvent事件進(jìn)度對(duì)象. 如下:

ProgressEvent對(duì)象具有三個(gè)重要的Read only屬性

lengthComputable 表示長(zhǎng)度是否可計(jì)算, 它是一個(gè)布爾值, 初始值為false.

loaded 表示已加載資源的大小, 如果使用http下載資源, 它僅僅表示已下載內(nèi)容的大小, 而不包括http headers等. 它是一個(gè)無符號(hào)長(zhǎng)整型, 初始值為0.

total 表示資源總大小, 如果使用http下載資源, 它僅僅表示內(nèi)容的總大小, 而不包括http headers等, 它同樣是一個(gè)無符號(hào)長(zhǎng)整型, 初始值為0.

onprogress
onprogress事件回調(diào)方法在 readyState==3 狀態(tài)時(shí)開始觸發(fā), 默認(rèn)傳入 ProgressEvent 對(duì)象, 可通過 e.loaded/e.total 來計(jì)算加載資源的進(jìn)度, 該方法用于獲取資源的下載進(jìn)度.

onload
onload事件回調(diào)方法在ajax請(qǐng)求成功后觸發(fā), 觸發(fā)時(shí)機(jī)在 readyState==4 狀態(tài)之后.
想要捕捉到一個(gè)ajax異步請(qǐng)求的成功狀態(tài), 并且執(zhí)行回調(diào), 一般下面的語句就足夠了:

xhr.onload = function(){
  var s = xhr.status;
  if((s >= 200 && s < 300) || s == 304){
    var resp = xhr.responseText;
    //TODO ...
  }
}

onloadend
onloadend事件回調(diào)方法在ajax請(qǐng)求完成后觸發(fā), 觸發(fā)時(shí)機(jī)在 readyState==4 狀態(tài)之后(收到響應(yīng)時(shí)) 或者 readyState==2 狀態(tài)之后(未收到響應(yīng)時(shí)).

onloadend方法中默認(rèn)將傳入一個(gè)ProgressEvent事件進(jìn)度對(duì)象.

timeout
timeout屬性用于指定ajax的超時(shí)時(shí)長(zhǎng). 通過它可以靈活地控制ajax請(qǐng)求時(shí)間的上限. timeout的值滿足如下規(guī)則:

通常設(shè)置為0時(shí)不生效

設(shè)置為字符串時(shí), 如果字符串中全部為數(shù)字, 它會(huì)自動(dòng)將字符串轉(zhuǎn)化為數(shù)字, 反之該設(shè)置不生效.

設(shè)置為對(duì)象時(shí), 如果該對(duì)象能夠轉(zhuǎn)化為數(shù)字, 那么將設(shè)置為轉(zhuǎn)化后的數(shù)字.

ontimeout
ontimeout方法在ajax請(qǐng)求超時(shí)時(shí)觸發(fā), 通過它可以在ajax請(qǐng)求超時(shí)時(shí)做一些后續(xù)處理.

response responseText
均為只讀屬性, response表示服務(wù)器的響應(yīng)內(nèi)容, 相應(yīng)的, responseText表示服務(wù)器響應(yīng)內(nèi)容的文本形式.
responseXML
只讀屬性, responseXML表示xml形式的響應(yīng)數(shù)據(jù), 缺省為null, 若數(shù)據(jù)不是有效的xml, 則會(huì)報(bào)錯(cuò).
responseType
responseType表示響應(yīng)的類型, 缺省為空字符串, 可取 "arraybuffer" , "blob" , "document" , "json" , and "text" 共五種類型.
responseURL
responseURL返回ajax請(qǐng)求最終的URL, 如果請(qǐng)求中存在重定向, 那么responseURL表示重定向之后的URL.
withCredentials
withCredentials是一個(gè)布爾值, 默認(rèn)為false, 表示跨域請(qǐng)求中不發(fā)送cookies等信息. 當(dāng)它設(shè)置為true時(shí), cookies , authorization headers 或者 TLS客戶端證書 都可以正常發(fā)送和接收. 顯然它的值對(duì)同域請(qǐng)求沒有影響.

注意: 該屬性適用于 IE10+, opera12+及其他現(xiàn)代瀏覽器.

abort
abort方法用于取消ajax請(qǐng)求, 取消后, readyState 狀態(tài)將被設(shè)置為 0 (UNSENT). 如下, 調(diào)用abort 方法后, 請(qǐng)求將被取消.

getResponseHeader
getResponseHeader方法用于獲取ajax響應(yīng)頭中指定name的值. 如果response headers中存在相同的name, 那么它們的值將自動(dòng)以字符串的形式連接在一起.

console.log(xhr.getResponseHeader("Content-Type"));//"text/html"

getAllResponseHeaders
getAllResponseHeaders方法用于獲取所有安全的ajax響應(yīng)頭, 響應(yīng)頭以字符串形式返回. 每個(gè)HTTP報(bào)頭名稱和值用冒號(hào)分隔, 如key:value, 并以rn結(jié)束.

xhr.onreadystatechange = function() {
  if(this.readyState == this.HEADERS_RECEIVED) {
    console.log(this.getAllResponseHeaders());
  }
}
//Content-Type: text/html"

setRequestHeader
既然可以獲取響應(yīng)頭, 那么自然也可以設(shè)置請(qǐng)求頭, setRequestHeader就是干這個(gè)的. 如下:

//指定請(qǐng)求的type為json格式
xhr.setRequestHeader("Content-type", "application/json");
//除此之外, 還可以設(shè)置其他的請(qǐng)求頭
xhr.setRequestHeader("x-requested-with", "123456");

onerror
onerror方法用于在ajax請(qǐng)求出錯(cuò)后執(zhí)行. 通常只在網(wǎng)絡(luò)出現(xiàn)問題時(shí)或者ERR_CONNECTION_RESET時(shí)觸發(fā)(如果請(qǐng)求返回的是407狀態(tài)碼, chrome下也會(huì)觸發(fā)onerror).

upload
upload屬性默認(rèn)返回一個(gè) XMLHttpRequestUpload 對(duì)象, 用于上傳資源. 該對(duì)象具有如下方法:

原文