淺析ajax

1.什麼是Ajax

Ajax：是Asynchronous Javascript And XML的簡寫，即異步JavaScript和XML
用途：動態刷新局部數據，無需卸載整個頁面，從而帶來更好的用戶體驗
Ajax核心：XMLHttpRequest對象(簡稱XHR)

2.如何建立XHR對象

如下是一個跨瀏覽器建立XHR對象的函數:

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

XMLHttpRequest這個對象的屬性：

• responseText 做爲響應主體返回的文本。

• responseXML 若是響應的內容類型是"text/xml"或"application/xml"，這個屬性將保存包含着響應數據的xml DOM文檔。

• status 響應的http狀態

• statusText http狀態的說明

當XHR對象把一個HTTP請求發送到服務器的過程當中會經歷幾個狀態，直到請求被處理，而後才接收一個迴應。readyState是XHR請求的狀態屬性，它自己有5個屬性值：

• 0（未初始化）尚未調用open()方法

• 1（啓動）已調用send()方法，正在發送請求

• 2(發送)send()方法完成，已收到所有響應內容

• 3(接收)已經接收到部分響應內容

• 4（完成）響應內容解析完成，能夠再客戶端使用了

3.實現Ajax的步驟

A.建立一個XHR對象

var xhr= createXHR();

B.設置響應HTTP請求狀態變化的函數

xhr.onreadystatechange = function() {
    if(xhr.readyState==4){
        if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){
            xxx.innerHTML = xhr.responseText;//刷新了xxx中的數據
        } else {
            alert("Request was failed:"+xhr.status);
        }
    }
};

C.建立一個新的HTTP請求,並指定該HTTP請求的方法、URL及表示是否異步發送請求的布爾值

xhr.open("get","getAjaxData.php",true);//true表示異步發送請求

D.設置自定義請求頭部(可選)

xhr.setRequestHeader("myHeader","myValue");//jsonp跨域請求時會用到自定義的頭部

E.發送http請求

xhr.send(null);//做爲請求主體發送的數據，無數據必須傳入null，post請求時常常會發送數據

完整代碼以下：

var xhr= createXHR();
xhr.onreadystatechange = function() {
    if(xhr.readyState==4){
        if(xhr.status >= 200 && xhr.status < 300 &&xhr.status == 304){
            xxx.innerHTML = xhr.responseText;
        } else {
            alert("Request was failed:"+xhr.status);
        }
    }
};
xhr.open("get","getAjaxData.php",true);
xhr.setRequestHeader("myHeader","myValue");
xhr.send(null);