翻譯：《javascript : The Definitive Guide, 5th Edition》
英文：《異步互動（二）》
一、XMLHttpRequest對象擷取
對象擷取以及介紹和簡單使用範例：《異步互動（一）》
XMLHttpRequest對象詳解：3個構造方法，5個屬性，6個方法，1個事件——3561詳解AJAX核心對象XMLHttpRequest。
約定1：本文中所有的xhr指代XMLHttpRequest對象。
約定2：問了友善介紹該對象，本文并沒有原原本本的按照英文翻譯。
二、構造方法
1. 幾乎适用所有浏覽器
new XMLHttpRequest();
2. 适用IE 7+
new ActiveXObject("Msxml2.XMLHTTP");
3. 适用IE 5, IE 6
new ActiveXObject("Microsoft.XMLHTTP");
補充
new XMLHttpRequest();建立xhr對象，适用于chrome、Firefox、opera以及IE 7+等浏覽，也就意味着第一種和第二種構造方，隻需要選用第一種就可以了，是以為了最保險的方式，三種都用，但實際上隻需要第一種和第三種構造方法配合使用就可以了。具體建立方法請看《異步互動（一）》（早期完備方式，三種構造方法均使用）或查詢w3cschool示例源碼xhr對象建立（新的建立xhr對象方式，使用第一種和第三種構造方法）。
三、屬性詳解
1. readyState
隻讀屬性，傳回值類型short。
該屬性表示xhr對象的狀态，狀态值從0（當該對象第一次被建立的時候，readyState為0）開始一直增加到4（當收到完整的HTTP響應的時候，該屬性值為4），一般情況下，readyState對應的狀态值隻會增加會不減少，除非調用了abort()方法，或是一個已經在異步互動程序中的xhr對象再次調用了open()方法。
每一次狀态值的增加，都會觸發onreadystatechange事件，是以可以通過該事件來對整個異步互動過程進行控制。
readyState屬性對應的5個狀态各都有一個非正式的名字，下面将詳細介紹readyState對象。
----------------------------------------------------------------------------------------------------------------------------
狀态值 狀态名 描述
0 Uninitialized 初始化狀态，表示xhr對象已經被成功建立，或者一個已經存在的xhr對象調用了abort()方法進行了重置
1 Open 建立連接配接的狀态，調用了open方法，但是還沒有調用send方法，request對象還未被發送
2 Send 發送狀态，send方法已經被調用，http請求已經被送出給了伺服器，但是還未收到來自伺服器的任何響應資訊
3 Receiving 表示接收響應中，已經收到所有的響應消息頭，但是還沒有完整的收到響應消息
4 Loaded 完成狀态，已經收到了所有的響應消息，xhr對象完成互動一次互動過程
----------------------------------------------------------------------------------------------------------------------------
2. responseText
自讀屬性，傳回值類型String。
表示從遠端伺服器傳回的響應體的内容（不包含響應頭，響應的結構請參看點選打開連結），如果沒有收到資料，則該屬性為空字元串。通常情況下，如果readyState的狀态值小于3，則該屬性的值為空字元串；如果readyState的狀态值剛好為3，那麼該屬性的值為目前已經從伺服器獲得的響應體的資料，盡管獲得的資料可能隻是完整響應中的部分資料；如果readyState的狀态值為4，那麼該屬性表示完整的響應體資料。
重要：關于資料編碼，如果響應頭中包含有字元編碼資訊（譬如Context-type中的charset），則responseText屬性的值使用該編碼方式；否則預設使用UTF-8進行資料編碼。
3. responseXML
隻讀屬性，傳回值類型Document。
請求對應的傳回資料被當作XML進行解析，解析完成後傳回一個Document對象，這意味着從伺服器傳回的資料應該要複合xml格式，否則解析失敗。
要想該屬性的傳回值不為null，必須滿足以下三個條件（三個都為真，則該屬性的值不為null，否則為null）：
a. xhr的狀态值readyState為4；
b. 傳回的響應頭資訊中明确包含該該響應是一個XML文檔的響應頭資訊，譬如Context-type的值為”text/xml;charset=UTF-8"，或為“application/xml”，或其他能夠表明該響應是一個XML文檔的響應頭；
c. 響應體的内容應該是滿足一個XML格式的資料，確定按照XML格式進行解析的時候不會出錯，也就意味着伺服器傳回的資料就是一個XML文檔；
補充：
推薦使用XStream，第三方jar包将對象解析成XML串然後傳回給伺服器，官網：XStream，官網上有代碼示例，是簡潔。
4. status
隻讀屬性，傳回值類型short。
伺服器傳回的響應狀态碼，表示伺服器響應的狀态，譬如200,404等。
注意：如果在xhr狀态值小于3（不包含3）的情況下讀取該狀态值，則會抛出一個異常。
5. statusText
隻讀屬性，傳回值類型String。
伺服器傳回的響應狀态碼描述，譬如status=200，則statusText=“OK"，這兩個屬性都由HTTP協定規定。
注意：如果在xhr狀态值小于3（不包含3）的情況下讀取該狀态值，則會抛出一個異常。
四、方法詳解
1. abort
傳回值void。該方法取消目前的請求，調用該方法，會産生以下操作：
a. 會關閉連接配接并停止xhr對象目前一切網絡活動；
b. 重置xhr對象的readyState值為0；
使用場景：如果xhr對象發出的請求已經過了很長時間還未收到響應，或者通過調用該方法你可以關閉一個沒有必要的異步請求。
2. open
傳回值void。該方法隻對HTTP請求對象進行參數初始化，例如請求方式、URL等。
參數：void open(String method, String url, boolean async, String username, String password);
method表示HTTP請求方式，常用的有GET和POST；url表示請求的url，如果是get方式，則參數需要寫在後面，如果是post方式，則參數通過send方法發送；async表示選擇異步互動還是同步互動，如果該值為true或預設，則為異步互動方式，如果該值為true，則表示為同步互動方式，此時用戶端浏覽器會被請求阻塞，直到收到響應對象為止，這種方式和傳統的互動方式一緻；如果伺服器需要認證，則通過username和password進行傳值認證。
注意：僅當xhr的readyState為0或4的時候調用該方法是安全的，其他狀态下調用該方法結果未明确。
該方法應該在調用send方法之前被調用，調用該方法會産生以下操作：
a. 初始化request參數，删掉之前的所有請求頭和響應頭；
b. 将xhr的readyState狀态值設定為1；
c. 将responseText, responseXML, status, statusText設為預設值；
d. 該方法會不會和伺服器建立一個網絡連接配接；
注意：
a. 當xhr對象的readyState狀态值為0或4的時候，調用該方法是安全的，此時該方法會将請求參數和xhr對象的屬性重置為預設值；
b. 當采用post方式建立連接配接的時候，在建立連接配接之後和發送請求之前，需要設定請求頭Context-type，否則伺服器抛出異常或不能正常進行資料接收和處理。設定方式如下代碼示例。
//POST方式向伺服器傳送資料
document.getElementById("username").onblur = function(){
var username = this.value;
if(username == null || username == "")
return;
var xhr = getXhr();
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("unInfo").innerHTML = xhr.responseText;
}
}
}
xhr.open("POST", "${pageContext.request.contextPath}/checkUN");
//post方式，在建立連接配接之後需要設定context-type請求頭
//1. 如果是普通的表單送出：xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
//2. 如果是檔案上傳：xhr.setRequestHeader("content-type", "multipart/form-data");
xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
xhr.send("username="+username);
}
3. send
傳回值void。void send(Object obj)。
如果在open方法中采用的GET或POST方法進行連接配接，則obj可以為一個字元串或一個文檔對象，否則參數obj應該為null；如果是采用GET方式，則send方法中傳送的值伺服器端是收不到的，隻能附在url後面。
調用該方法會發送一個請求，如果此時xhr對象的狀态值不為1，則會抛出一個異常，調用該方法，會産生以下操作：
a. 發送請求，并将xhr對象的readyState狀态值設為2（出發onreadystatechange事件）；
b. 如果async參數為false，那麼調用該方法之後将會立即阻塞浏覽器程序，并一直等到xhr的狀态為4的時候才會傳回；如果async參數為true，那麼調用該方法則在發送參數之後立即傳回，由一個背景線程和伺服器進行互動；
c. 如果伺服器響應是一個重定向，那麼send方法（同步情況下）或背景線程（異步情況下）将會自動進行重定向操作；
d. 當收到所有的響應頭之後，會設定readyState的值為3，當完成相應的時候，會将readyState的值設為4；
4. setRequestHeader
隻是設定或添加一個HTTP請求頭，不會導緻請求對象重置。
參數：void setRequestHeader(String name, String value);
name為請求頭名字，value為值，如果該請求頭已經存在，則重置其value，否則視為添加請求頭。
注意：該方法已經改在readyState為1的時候調用，即應該在open建立連接配接但是還未send請求對象之間被調用。
5. getResponseHeader
擷取響應頭的值。
參數：String getResponseHeader(String name);
傳回響應頭name對應的value，如果沒有該響應頭，則傳回空字元串。
6. getAllResponseHeaders
擷取所有響應頭的值。
參數：String getAllResponseHeaders();
注意：如果xhr對象的readyState狀态值小于3，則傳回null；否則，該方法會以一個字元串的形式傳回響應對象包含的所有響應頭資訊，不同的響應頭（name和value）之間通過“\r\n”來進行分割。
五、事件詳解
xhr對象有且僅有一個事件onreadystatechange，注意所有字母都是小寫的，javascript和Java一樣都是區分大小寫的。
每一次xhr對象的readyState狀态值改變都會觸發該事件，但是該方法不能為單獨的一個xhr對象綁定多個事件處理邏輯，即onreadystatechange隻能綁定一個事件處理的function，如果你想處理多件事情，那麼隻能在綁定的function中進行多事件處理的邏輯調用。
//一個xhr對象的onreadystatechange事件隻能綁定一個function
//如果多次綁定，則最後一次綁定的function覆寫之前綁定的function
//如果想進行多件事情的處理，那麼應該在綁定的function中進行其他方法的調用
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
if(xhr.status == 200){
document.getElementById("unInfo").innerHTML = xhr.responseText;
}
}
}
附注：
本文如有錯漏，煩請不吝指正，謝謝！
本文翻譯自javascript第五版，并沒有原原本本的按照英文原書進行翻譯，如果有錯漏的地方，煩請指正！
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)