JavaScript原生Ajax

Ajax請求

1、建立XHR

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

var xhr = new XMLHttpRequst();

二、在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"];
                    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();

2、XHR的用法

xhr包含四個方法：

xhr.open();//接受3個參數：發送請求的類型，請求的地址，是否異步請求
xhr.setRequestHeader();//接受兩個參數：設置htttp頭部的名字，設置http頭部的值
xhr.send();//接受一個參數：做爲請求主體的數據
xhr.abort();//取消異步請求

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

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

當調用send()以後，請求將發送到後臺而且服務器響應以後xhr對象的屬性將被自動填充：

responseText:得到字符串形式的響應數據。
responseXML:得到 XML 形式的響應數據。
status:響應http的狀態。
statusText:響應狀態說明。

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

3、請求類型

一、GET請求

說明：用於向服務器查詢信息。
一般將查詢的變量加在請求地址以後
好比說：xxx.xxx.xx?id=2 向服務器傳遞了一個參數名字叫name值爲1

用下面這個函數實現添加參數

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

二、POST請求

說明：一般向服務器發送應該保存的數據

使用方法：

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

post請求消耗的資源比get請求要多。發送相同的數據，get的速度最多能夠達到post的兩倍

4、XMLHTTPRequest 2級

一、FormData

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

二、超時限定

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

三、overrideMimeType()

強行讓XHR對象將響應做爲XML處理。

四、進度事件

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.二、progress事件

progress事件會在瀏覽器接收新數據期間週期性地觸發。而onprogress事件處理程序會接收到一個event對象，其target屬性是XHR對象，但包含着三個額外的屬性：lengthComputable、loaded和total。其中，lengthComputable是一個表示進度信息是否可用的布爾值，loaded表示已經接收的字節數，loaded表示根據Content-Length響應頭部肯定的預期字節數。有了這些信息，咱們就能夠爲用戶建立一個進度指示器了。