摘要：請(qǐng)求終止時(shí)會(huì)調(diào)用事件處理程序，此時(shí)為，這就會(huì)調(diào)用事件。強(qiáng)行讓對(duì)象將響應(yīng)作為處理。在請(qǐng)求發(fā)生錯(cuò)誤時(shí)觸發(fā)。最終，實(shí)現(xiàn)中引入了事件，用以替代事件。事件事件會(huì)在瀏覽器接收新數(shù)據(jù)期間周期性地觸發(fā)。

var xhr = new XMLHttpRequst();

function createXHR(){
            if (typeof XMLHttpRequest != "undefined"){
                return new XMLHttpRequest();
            } else if (typeof ActiveXObject != "undefined"){
                if (typeof arguments.callee.activeXString != "string"){
                    var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0",
                                    "MSXML2.XMLHttp"];
                    var i;
                    var len;
            
                    for (i=0,len=versions.length; i < len; i++){
                        try {
                            new ActiveXObject(versions[i]);
                            arguments.callee.activeXString = versions[i];
                            break;
                        } catch (ex){
                            //skip
                        }
                    }
                }
            
                return new ActiveXObject(arguments.callee.activeXString);
            } else {
                throw new Error("No XHR object available.");
            }
        }
var xhr = createXHR();

xhr包含四個(gè)方法：

xhr.open();//接受3個(gè)參數(shù)：發(fā)送請(qǐng)求的類型，請(qǐng)求的地址，是否異步請(qǐng)求
xhr.setRequestHeader();//接受兩個(gè)參數(shù)：設(shè)置htttp頭部的名字，設(shè)置http頭部的值
xhr.send();//接受一個(gè)參數(shù)：作為請(qǐng)求主體的數(shù)據(jù)
xhr.abort();//取消異步請(qǐng)求

xhr.open()注意：發(fā)送請(qǐng)求的地址相對(duì)執(zhí)行代碼的當(dāng)前頁(yè)面。
當(dāng)調(diào)用send()之后，請(qǐng)求將發(fā)送到后臺(tái)并且服務(wù)器響應(yīng)之后xhr對(duì)象的屬性將被自動(dòng)填充：

responseText:獲得字符串形式的響應(yīng)數(shù)據(jù)。
responseXML:獲得 XML 形式的響應(yīng)數(shù)據(jù)。
status:響應(yīng)http的狀態(tài)。
statusText:響應(yīng)狀態(tài)說(shuō)明。

說(shuō)明：這個(gè)屬性表示請(qǐng)求或者是響應(yīng)個(gè)過(guò)程的當(dāng)前活動(dòng)階段。

0: 未初始化。未調(diào)用open()方法。
1: 啟動(dòng)。已調(diào)用open()，未調(diào)用send()
2: 發(fā)送。已調(diào)用send(),尚未接收到響應(yīng)數(shù)據(jù)
3: 接收。接收到部分響應(yīng)數(shù)據(jù)
4: 完成。已經(jīng)接收到所有數(shù)據(jù)

readyState每次改變時(shí)將會(huì)觸發(fā)readystatechange事件。
可以在調(diào)用open()之前指定onreadystatechange事件處理程序才能確?？鐬g覽器的兼容性。

//例子
var xhr = createXHR();        
xhr.onreadystatechange = function(event){
    if (xhr.readyState == 4){
        if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
            alert(xhr.responseText);
        } else {
            alert("Request was unsuccessful: " + xhr.status);
        }
    }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

說(shuō)明：用于向服務(wù)器查詢信息。
通常將查詢的變量加在請(qǐng)求地址之后
比如說(shuō)：xxx.xxx.xx?id=2  向服務(wù)器傳遞了一個(gè)參數(shù)名字叫name值為1

用下面這個(gè)函數(shù)實(shí)現(xiàn)添加參數(shù)

function addURLParam(url, name, value) {
    url += (url.indexOf("?") == -1 ? "?" : "&");
    url += encodeURIComponent(name) + "=" +encodeURIComponent(value);
    return url ;
}

說(shuō)明：通常向服務(wù)器發(fā)送應(yīng)該保存的數(shù)據(jù)

xhr.open("post","請(qǐng)求地址",true);

post請(qǐng)求消耗的資源比get請(qǐng)求要多。發(fā)送相同的數(shù)據(jù)，get的速度最多可以達(dá)到post的兩倍

說(shuō)明：序列化表單以及創(chuàng)建與表單格式相同的數(shù)據(jù)。
之前在文章中提到過(guò)，具體點(diǎn)這里

XHR的timeout屬性，表示請(qǐng)求等待響應(yīng)多少毫秒之后就會(huì)自動(dòng)終止。
請(qǐng)求終止時(shí)會(huì)調(diào)用ontimeout事件處理程序，此時(shí)readyState為4，這就會(huì)調(diào)用onreadystatechange事件。但是如果超時(shí)終止請(qǐng)求之后再訪問(wèn)status屬性就會(huì)報(bào)錯(cuò)。這里可以使用try-catch中去處理檢查status屬性。

強(qiáng)行讓XHR對(duì)象將響應(yīng)作為XML處理。

loadstart：在接收到相應(yīng)數(shù)據(jù)的第一個(gè)字節(jié)時(shí)觸發(fā)。
progress：在接收相應(yīng)期間持續(xù)不斷觸發(fā)。
error：在請(qǐng)求發(fā)生錯(cuò)誤時(shí)觸發(fā)。
abort：在因?yàn)檎{(diào)用abort()方法而終止鏈接時(shí)觸發(fā)。
load：在接收到完整的相應(yīng)數(shù)據(jù)時(shí)觸發(fā)。
loadend：在通信完成或者觸發(fā)error、abort或load事件后觸發(fā)。

每個(gè)請(qǐng)求不對(duì)觸發(fā)Loadstart事件開(kāi)始，接下來(lái)是一或多個(gè)progress事件，然后觸發(fā)error、abort或load事件中的一個(gè)，最后以觸發(fā)loadend事件結(jié)束。

Firefox在實(shí)現(xiàn)XHR對(duì)象的某個(gè)版本時(shí)，曾致力于簡(jiǎn)化異步交互模型。最終，F(xiàn)irefox實(shí)現(xiàn)中引入了load事件，用以替代readystatechange事件。響應(yīng)接收完畢后將觸發(fā)Load事件，因此也就沒(méi)有必要去檢查readyState屬性了。而onload事件處理程序會(huì)接收到一個(gè)event對(duì)象，其target屬性就指向XHR對(duì)象實(shí)例，因而可以訪問(wèn)到XHR對(duì)象的所有方法和屬性。然而，并非所有瀏覽器都為這個(gè)事件實(shí)現(xiàn)了適當(dāng)?shù)氖录?duì)象。結(jié)果，開(kāi)發(fā)人員還是要像下面這樣被迫使用XHR對(duì)象變量。

var xhr = createXHR();
xhr.onload = function () {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        alert(xhr.responseText);
    } else {
        alert("Request was unsuccessful: " + xhr.status);
    }
};
xhr.open("get", "altevents.php", true);
xhr.send(null);

只要瀏覽器接收到服務(wù)器的響應(yīng)，不管其狀態(tài)如何，都會(huì)觸發(fā)load事件。而這意味著你必須要檢查status屬性，才能確定數(shù)據(jù)是否真的已經(jīng)可用了。Firefox、Operan、Chrome和Safari都支持load事件。

progress事件會(huì)在瀏覽器接收新數(shù)據(jù)期間周期性地觸發(fā)。而onprogress事件處理程序會(huì)接收到一個(gè)event對(duì)象，其target屬性是XHR對(duì)象，但包含著三個(gè)額外的屬性：lengthComputable、loaded和total。其中，lengthComputable是一個(gè)表示進(jìn)度信息是否可用的布爾值，loaded表示已經(jīng)接收的字節(jié)數(shù)，loaded表示根據(jù)Content-Length響應(yīng)頭部確定的預(yù)期字節(jié)數(shù)。有了這些信息，我們就可以為用戶創(chuàng)建一個(gè)進(jìn)度指示器了。