淺析ajax

objc94 發(fā)布于2019-08-19 17:57 / 1501人閱讀

摘要：如果響應(yīng)的內(nèi)容類型是或，這個(gè)屬性將保存包含著響應(yīng)數(shù)據(jù)的文檔。響應(yīng)的狀態(tài)狀態(tài)的說明當(dāng)對(duì)象把一個(gè)請(qǐng)求發(fā)送到服務(wù)器的過程中會(huì)經(jīng)歷幾個(gè)狀態(tài)，直到請(qǐng)求被處理，然后才接收一個(gè)回應(yīng)。

1.什么是Ajax

Ajax：是Asynchronous Javascript And XML的簡(jiǎn)寫，即異步JavaScript和XML
用途：動(dòng)態(tài)刷新局部數(shù)據(jù)，無需卸載整個(gè)頁(yè)面，從而帶來更好的用戶體驗(yàn)
Ajax核心：XMLHttpRequest對(duì)象(簡(jiǎn)稱XHR)

2.如何創(chuàng)建XHR對(duì)象

以下是一個(gè)跨瀏覽器創(chuàng)建XHR對(duì)象的函數(shù):

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這個(gè)對(duì)象的屬性：

responseText 作為響應(yīng)主體返回的文本。

responseXML 如果響應(yīng)的內(nèi)容類型是"text/xml"或"application/xml"，這個(gè)屬性將保存包含著響應(yīng)數(shù)據(jù)的xml DOM文檔。

status 響應(yīng)的http狀態(tài)

statusText http狀態(tài)的說明

當(dāng)XHR對(duì)象把一個(gè)HTTP請(qǐng)求發(fā)送到服務(wù)器的過程中會(huì)經(jīng)歷幾個(gè)狀態(tài)，直到請(qǐng)求被處理，然后才接收一個(gè)回應(yīng)。readyState是XHR請(qǐng)求的狀態(tài)屬性，它本身有5個(gè)屬性值：

0（未初始化）還沒有調(diào)用open()方法

1（啟動(dòng)）已調(diào)用send()方法，正在發(fā)送請(qǐng)求

2(發(fā)送)send()方法完成，已收到全部響應(yīng)內(nèi)容

3(接收)已經(jīng)接收到部分響應(yīng)內(nèi)容

4（完成）響應(yīng)內(nèi)容解析完成，可以再客戶端使用了

3.實(shí)現(xiàn)Ajax的步驟

A.創(chuàng)建一個(gè)XHR對(duì)象

var xhr= createXHR();

B.設(shè)置響應(yīng)HTTP請(qǐng)求狀態(tài)變化的函數(shù)

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

C.創(chuàng)建一個(gè)新的HTTP請(qǐng)求,并指定該HTTP請(qǐng)求的方法、URL及表示是否異步發(fā)送請(qǐng)求的布爾值

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

D.設(shè)置自定義請(qǐng)求頭部(可選)

xhr.setRequestHeader("myHeader","myValue");//jsonp跨域請(qǐng)求時(shí)會(huì)用到自定義的頭部

E.發(fā)送http請(qǐng)求

xhr.send(null);//作為請(qǐng)求主體發(fā)送的數(shù)據(jù)，無數(shù)據(jù)必須傳入null，post請(qǐng)求時(shí)經(jīng)常會(huì)發(fā)送數(shù)據(jù)

完整代碼如下：

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