【從0到1學Web前端】javascript中的ajax對象（一）

標籤：javascript   伺服器   ajax   

現在最流行的擷取後端的（瀏覽器從伺服器）資料的方式就是通過Ajax了吧。今天就來詳細的來學習下這個知識吧。如果使用ajax來訪問後段的資料，瀏覽器和瀏覽器端的js做了那些工作呢？我做了一個圖，請大家看一下：

1.原生js的Ajax請求的方式

由上面的圖我們大致的知道了ajax訪問後端資料的一個過程。最重要的就是檢測瀏覽器，建立XMLHttpRequest對象的過程：
代碼如下：

/* 判斷是否支援XMLHttpRequest */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) {                    console.log(ex);                }            }        }        return new ActiveXObject(arguments.callee.activeXString());    }    else {        throw new Error(‘no XHR‘)    }}

此處分別是根據瀏覽器是否支援XMLHttpRequest對象來判斷是否是IE還是非IE，然後來建立響應的對象。

當XHR對象open()的時候，此時並沒有向Web伺服器發送HTTP請求，而是當send()的時候，XHR對象才向Web伺服器發送請求。

xhr.send(‘‘);

這裡有一個非常重要的地方，就是send的參數為null。

send()方法接收一個參數，需要作為請求主體發送的資料。如果不需要作為請求主體發送資料，則必須傳入null，因為這個參數對於某些瀏覽器是必須的。

當瀏覽器接收到Web伺服器的響應後，會開始填充XHR對象的屬性，主要的如下：

• responseText作為響應的主體被返回的文本
• responseXML如果響應的內容類型為text/xml或者application/xml這個屬性中將包含著響應資料的XML DOM文檔
• status響應的HTTP狀態

• statusTextHTTP狀態的說明

  一般通過XHR.status屬性值為200表示成功的標誌。此時可以擷取responseText和responseXML的值。當XHR.status==304（響應是有效）的時候，說明檔案沒有被修改，可以直接使用瀏覽器緩衝的版本。

檢測的代碼如下：

if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {                console.log(xhr.responseText);            }            else {                console.log(xhr.responseText);            }

不要依賴responseText，因為在跨瀏覽器處理的時候這個屬性擷取的值是不可靠的。

上面的代碼在同步發送請求驗證和擷取返會的資料是沒有任何問題的。但是當我們發送非同步請求的時候確實會出現問題，因為我們不知道服務端的Response在什麼時候反回。那麼我們該怎麼辦呢？

其實在ajax在向Web伺服器發送請求的時候，會有一個readyState屬性來檢測XHR對象的請求/響應過程的當前活動階段，值的列表如下：

• 0未初始化。尚未調用open()方法
• 1啟動。已經調用open()方法，但是尚未調用send()方法
• 2發送。已經調用send()方法。但是還沒有接收到響應。
• 3接收。已經接收到部分的響應資料。

• 4完成。已經接收到全部的響應資料，而且已經在用戶端可以使用了。

  每當XHR.readyState的屬性值發生變化，都會觸發一次onreadystatechange事件。通常我們只對XHR.readyState==4的時候感興趣（這時資料已經全部就緒）。

必須在調用open()之前指定onreadystatechange事件處理常式才能夠保證誇瀏覽器的相容性。

執行個體代碼如下：

var xhr = new createXHR();    xhr.onreadystatechange = function () {        if (xhr.readyState == 4) {            if (xhr.status >= 200 && xhr.status <= 300 || xhr.status == 304) {                console.log(xhr.responseText);                //console.log(xhr.)                //document.createElement()                creatNode(‘script‘);                creatNode(‘img‘);            }            else {                console.log(xhr.responseText);            }        }    }    xhr.open(‘GET‘, ‘test.js‘, true);    xhr.send(‘‘);

2.jQuery發送Ajax的方式

參考jquery的文檔，使用jquery來發送ajax請求比原生的js簡單很多。如下代碼：

2.1GET方式

$.ajax({  type: "GET",  url: "test.js",  dataType: "script"});

2.2POST方式

$.ajax({   type: "POST",   url: "some.php",   data: "name=John&location=Boston",   success: function(msg){     alert( "Data Saved: " + msg );   }});

這裡也只是簡單的執行個體，如果想要詳細的瞭解jQuery中ajax的使用。可以參考Jquery的官方文檔。
中文文檔（點擊轉到）
英文文檔（點擊轉到）

【從0到1學Web前端】javascript中的ajax對象（一）