Ajax是目前很普遍的一門技術，也是很值得探討和研究的一門技術。本文將針對Ajax的發(fā)展過程并結合其在不同庫框架中的使用方式來和大家一起學習Ajax的那些新老語法。

Ajax簡介

Ajax全稱為“Asynchronous Javascript And XML”， 即“異步JavaScript和XML”的意思。通過Ajax我們可以向服務器發(fā)送請，在不阻塞頁面的情況下進行數(shù)據(jù)交互，也可以理解為異步數(shù)據(jù)傳輸。在Ajax的幫助下我們的網(wǎng)頁只需局部刷新即可更新數(shù)據(jù)的顯示，減少了不必要的數(shù)據(jù)量，大大提高了用戶體驗，縮短了用戶等待的時間，使得web應用程序更小、更快，更友好。

當然以上都是司空見慣的內(nèi)容了，作為一名合格的開發(fā)人員基本都再熟悉不過了，這里只為那些剛入門的新手做一個簡單的介紹。

原生Ajax

基本上所有現(xiàn)代的瀏覽器都支持原生Ajax的功能，下面就來詳細介紹下利用原生JS我們怎樣來發(fā)起和處理Ajax請求。

1.獲取XMLHttpRequest對象

var xhr = new XMLHttpRequest(); // 獲取瀏覽器內(nèi)置的XMLHttpRequest對象

如果你的項目應用不考慮低版本IE，那么可以直接用上面的方法，所有現(xiàn)代瀏覽器 (Firefox、Chrome、Safari以及 Opera) 都內(nèi)建了 XMLHttpRequest 對象。如果需要兼容老版本IE（IE5、IE6），那么可以使用 ActiveX 對象：

var xhr;

if (window.XMLHttpRequest) {

    xhr=new XMLHttpRequest();

} else if (window.ActiveXObject) {    // 兼容老版本瀏覽器

    xhr=new ActiveXObject("Microsoft.XMLHTTP");

}

2.參數(shù)配置

有了XMLHttpRequest對象，我們還需要配置一些請求的參數(shù)信息來完成數(shù)據(jù)交互，利用open方法即可：

var xhr;

if (window.XMLHttpRequest) {

    xhr=new XMLHttpRequest();

} else if (window.ActiveXObject) {

    xhr=new ActiveXObject("Microsoft.XMLHTTP");

}

if (xhr) {

    xhr.open('GET', '/test/', true); // 以GET請求的方式向'/test/'路徑發(fā)送異步請求

}

open方法為我們創(chuàng)建了一個新的http請求，其中第一個參數(shù)為請求方式，一般為'GET'或'POST'；第二個參數(shù)為請求url；第三個參數(shù)為是否異步，默認為true。

3.發(fā)送請求

配置完了基本參數(shù)信息，我們直接調(diào)用send方法發(fā)送請求，代碼如下：

var xhr;

if (window.XMLHttpRequest) {

    xhr=new XMLHttpRequest();

} else if (window.ActiveXObject) {

    xhr=new ActiveXObject("Microsoft.XMLHTTP");

}

if (xhr) {

    xhr.open('GET', '/test/', true);

    xhr.send(); // 調(diào)用send方法發(fā)送請求

}

這里需要注意的是如果使用GET方法傳遞參數(shù)，我們可以直接將參數(shù)放在url后面，比如'/test/?name=luozh&size=12';如果使用POST方法，那么我們的參數(shù)需要寫在send方法里，如：

xhr.open('POST', '/test/', true);

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded"); // 將請求頭設置為表單方式提交

xhr.send('name=luozh&size=12');

最終會以Form Data的形式傳遞：

如果不設置請求頭，原生Ajax會默認使用Content-Type是'text/plain;charset=UTF-8'的方式發(fā)送數(shù)據(jù),如果按照上面的參數(shù)書寫形式，我們最終傳輸?shù)男问竭@樣的：

顯然這并不是服務器期望的數(shù)據(jù)格式，我們可以這樣寫：

xhr.open('POST', '/test/', true);

xhr.send(JSON.stringify({name: 'luozh', size: 12}));

最終傳輸?shù)母袷饺缦拢?

這樣我們可以直接傳遞JSON字符串給后臺處理，當然后臺也許進行相應配置。

4.監(jiān)測狀態(tài)

發(fā)送完Ajax請求之后，我們需要針對服務器返回的狀態(tài)進行監(jiān)測并進行相應的處理，這里我們需要使用onreadystatechange方法，代碼如下：

var xhr;

if (window.XMLHttpRequest) {

    xhr=new XMLHttpRequest();

} else if (window.ActiveXObject) {

    xhr=new ActiveXObject("Microsoft.XMLHTTP");

}

if (xhr) {

    xhr.open('GET', '/test/', true);     // 以GET請求的方式向'/test/'路徑發(fā)送異步請求    xhr.send();

    xhr.onreadystatechange = function () {    // 利用onreadystatechange監(jiān)測狀態(tài)

        if (xhr.readyState === 4) {    // readyState為4表示請求響應完成

            if (xhr.status === 200) {    // status為200表示請求成功

                console.log('執(zhí)行成功');

            } else {

                console.log('執(zhí)行出錯');

            }   

        }

    }

}

上面我們利用onreadystatechange監(jiān)測狀態(tài)，并在內(nèi)部利用readyState獲取當前的狀態(tài)。readyState一共有5個階段，當其為4時表示響應內(nèi)容解析完成，可以在客戶端調(diào)用了。當readyState為4時，我們又通過status來獲取狀態(tài)碼，狀態(tài)碼為200時執(zhí)行成功代碼，否則執(zhí)行出錯代碼。

當然我們可以用onload來代替onreadystatechange等于4的情況，因為onload只在狀態(tài)為4的時候才被調(diào)用，代碼如下：

xhr.onload = function () {    // 調(diào)用onload

    if (xhr.status === 200) {    // status為200表示請求成功

        console.log('執(zhí)行成功');

    } else {

        console.log('執(zhí)行出錯');

    }   

}

然而需要注意的是，IE對onload這個屬性的支持并不友好。
除了onload還有:

onloadstart

onprogress

onabort

ontimeout

onerror

onloadend

等事件，有興趣的同學可以親自去實踐它們的用處。

以上便是原生Ajax請求數(shù)據(jù)的常見代碼。

文章來自：博客園/勞卜