Ajax請求

一、建立XHR

1、在IE7及其更高的版本中：

var xhr = new XMLHttpRequst();

2、在IE7之前的的版本中使用createXHR函式根據IE中可用的MSXML庫建立最新版本的XHR物件：

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"],
                        i, 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的用法

xhr包含四個方法：

xhr.open();//接受3個引數：傳送請求的型別，請求的地址，是否非同步請求
xhr.setRequestHeader();//接受兩個引數：設定htttp頭部的名字，設定http頭部的值
xhr.send();//接受一個引數：作為請求主體的資料
xhr.abort();//取消非同步請求

1、xhr.open()以及xhr.send()

xhr.open()注意：傳送請求的地址相對執行程式碼的當前頁面。

當呼叫send()之後，請求將傳送到後臺並且伺服器響應之後xhr物件的屬性將被自動填充：

responseText:獲得字串形式的響應資料。
responseXML:獲得 XML 形式的響應資料。
status:響應http的狀態。
statusText:響應狀態說明。
 

2、readyState屬性

說明：這個屬性表示請求或者是響應個過程的當前活動階段。

0: 未初始化。未呼叫open()方法。
1: 啟動。已呼叫open()，未呼叫send()
2: 傳送。已呼叫send(),尚未接收到響應資料
3: 接收。接收到部分響應資料
4: 完成。已經接收到所有資料

readyState每次改變時將會觸發readystatechange事件。
可以在呼叫open()之前指定onreadystatechange事件處理程式才能確保跨瀏覽器的相容性。

//例子
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);
 

三、請求型別

1、GET請求

說明：用於向伺服器查詢資訊。
通常將查詢的變數加在請求地址之後
比如說：xxx.xxx.xx?id=2 向伺服器傳遞了一個引數名字叫name值為1

用下面這個函式實現新增引數

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

2、POST請求

說明：通常向伺服器傳送應該儲存的資料

使用方法：

xhr.open('post','請求地址',true);

post請求消耗的資源比get請求要多。傳送相同的資料，get的速度最多可以達到post的兩倍

四、XMLHTTPRequest 2級

1、FormData

說明：序列化表單以及建立與表單格式相同的資料。
之前在文章中提到過，具體點 這裡

2、超時限定

XHR的timeout屬性，表示請求等待響應多少毫秒之後就會自動終止。
請求終止時會呼叫ontimeout事件處理程式，此時readyState為4，這就會呼叫onreadystatechange事件。但是如果超時終止請求之後再訪問status屬性就會報錯。這裡可以使用try-catch中去處理檢查status屬性。

3、overrideMimeType()

強行讓XHR物件將響應作為XML處理。

4、進度事件

loadstart：在接收到相應資料的第一個位元組時觸發。
progress：在接收相應期間持續不斷觸發。
error：在請求發生錯誤時觸發。
abort：在因為呼叫abort()方法而終止連結時觸發。
load：在接收到完整的相應資料時觸發。
loadend：在通訊完成或者觸發error、abort或load事件後觸發。

每個請求不對觸發Loadstart事件開始，接下來是一或多個progress事件，然後觸發error、abort或load事件中的一個，最後以觸發loadend事件結束。

4.1

Firefox在實現XHR物件的某個版本時，曾致力於簡化非同步互動模型。最終，Firefox實現中引入了load事件，用以替代readystatechange事件。響應接收完畢後將觸發Load事件，因此也就沒有必要去檢查readyState屬性了。而onload事件處理程式會接收到一個event物件，其target屬性就指向XHR物件例項，因而可以訪問到XHR物件的所有方法和屬性。然而，並非所有瀏覽器都為這個事件實現了適當的事件物件。結果，開發人員還是要像下面這樣被迫使用XHR物件變數。

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);

只要瀏覽器接收到伺服器的響應，不管其狀態如何，都會觸發load事件。而這意味著你必須要檢查status屬性，才能確定資料是否真的已經可用了。Firefox、Operan、Chrome和Safari都支援load事件。

4.2、progress事件

progress事件會在瀏覽器接收新資料期間週期性地觸發。而onprogress事件處理程式會接收到一個event物件，其target屬性是XHR物件，但包含著三個額外的屬性：lengthComputable、loaded和total。其中，lengthComputable是一個表示進度資訊是否可用的布林值，loaded表示已經接收的位元組數，loaded表示根據Content-Length響應頭部確定的預期位元組數。有了這些資訊，我們就可以為使用者建立一個進度指示器了。