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

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

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

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

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

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

XMLHttpRequest的實例對象沒有自有屬性。實際上，他的所有屬性均來自XMLHttpRequest.prototype

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

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

readyState屬性
只讀。

onreadystatechange
onreadystatechange事件回調(diào)方法在readystate狀態(tài)改變時觸發(fā)，在一個收到響應(yīng)的ajax請求周期中，onreadystatechange方法會被觸發(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)會傳入Event實例

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

statusText
只讀屬性, statusText表示服務(wù)器的響應(yīng)狀態(tài)信息, 它是一個 UTF-16 的字符串, 請求成功且status==20X時, 返回大寫的 OK . 請求失敗時返回空字符串. 其他情況下返回相應(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請求發(fā)送之前觸發(fā), 觸發(fā)時機在 readyState==1 狀態(tài)之后, readyState==2 狀態(tài)之前.
onloadstart方法中默認(rèn)將傳入一個ProgressEvent事件進(jìn)度對象. 如下:

ProgressEvent對象具有三個重要的Read only屬性

lengthComputable 表示長度是否可計算, 它是一個布爾值, 初始值為false.

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

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

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

onload
onload事件回調(diào)方法在ajax請求成功后觸發(fā), 觸發(fā)時機在 readyState==4 狀態(tài)之后.
想要捕捉到一個ajax異步請求的成功狀態(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請求完成后觸發(fā), 觸發(fā)時機在 readyState==4 狀態(tài)之后(收到響應(yīng)時) 或者 readyState==2 狀態(tài)之后(未收到響應(yīng)時).

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

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

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

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

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

ontimeout
ontimeout方法在ajax請求超時時觸發(fā), 通過它可以在ajax請求超時時做一些后續(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, 則會報錯.
responseType
responseType表示響應(yīng)的類型, 缺省為空字符串, 可取 "arraybuffer" , "blob" , "document" , "json" , and "text" 共五種類型.
responseURL
responseURL返回ajax請求最終的URL, 如果請求中存在重定向, 那么responseURL表示重定向之后的URL.
withCredentials
withCredentials是一個布爾值, 默認(rèn)為false, 表示跨域請求中不發(fā)送cookies等信息. 當(dāng)它設(shè)置為true時, cookies , authorization headers 或者 TLS客戶端證書 都可以正常發(fā)送和接收. 顯然它的值對同域請求沒有影響.

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

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

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

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

getAllResponseHeaders
getAllResponseHeaders方法用于獲取所有安全的ajax響應(yīng)頭, 響應(yīng)頭以字符串形式返回. 每個HTTP報頭名稱和值用冒號分隔, 如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è)置請求頭, setRequestHeader就是干這個的. 如下:

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

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

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

原文