最近開始研究AJAX（Asynchronous JavaScript and XML），很幸運(yùn)google到了這篇發(fā)表在Devmo上的AJAX: Getting Started?，F(xiàn)把這篇簡(jiǎn)潔易懂的文章翻譯如下，與大家共享，希望能對(duì)大家有所幫助！

這篇文章會(huì)使你對(duì)AJAX有一個(gè)基本了解，并給出兩個(gè)容易上手的例子。

目錄

1. 什么是AJAX？
2. 第一步：如何發(fā)出一個(gè)HTTP請(qǐng)求
3. 第二步：處理服務(wù)器的響應(yīng)
4. 第三步：一個(gè)簡(jiǎn)單的例子
5. 第四步：與XML響應(yīng)協(xié)同工作

什么是AJAX

AJAX是一個(gè)新的合成術(shù)語，隱含了兩個(gè)已經(jīng)存在多年的JavaScript特性，但是直到最近，隨著一些諸如Gmail、Google Suggest以及Google Maps的轟動(dòng)，才被許多網(wǎng)絡(luò)開發(fā)者所注意到。

我們所討論的兩個(gè)JavaScript的特性是你能夠：

• 向服務(wù)器發(fā)出請(qǐng)求而不需重新加載任何頁面
• 解析XML文檔并且與之協(xié)同工作

AJAX是一個(gè)縮寫，A是指"asynchronous"（異步的），它表示你可以在向服務(wù)器發(fā)出一個(gè)HTTP請(qǐng)求后，邊做其他的事情，邊等待服務(wù)器的響應(yīng)。JA表示"JavaScript"，X表示"XML"（可擴(kuò)展標(biāo)記語言）。

第一步：如何發(fā)出一個(gè)HTTP請(qǐng)求

為了用JavaScript向服務(wù)器發(fā)出一個(gè)HTTP請(qǐng)求，你需要一個(gè)類的實(shí)例來提供給你這種功能。這個(gè)類原本在IE里被作為一個(gè)ActiveX對(duì)象提出，叫XMLHTTP。然后，Mozilla、Safari以及一些其他的瀏覽器相繼跟隨，出現(xiàn)了一個(gè)XMLHttpRequest類，其支持微軟的ActiveX對(duì)象原本的方法和屬性。

所以，為了能夠跨瀏覽器地創(chuàng)建這個(gè)類的對(duì)象，你需要這樣：

if (window.XMLHttpRequest) { // Mozilla, Safari,
    http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
    http_request = new ActiveXObject("Microsoft.XMLHTTP");
}

如果服務(wù)器端的響應(yīng)中沒有包含XML的mime-type報(bào)頭（header），有些版本的Mozilla瀏覽器可能不會(huì)處理。所以，為了安全起見，你可以用一個(gè)特殊的方法來給服務(wù)器端發(fā)出的響應(yīng)強(qiáng)加上這個(gè)報(bào)頭，以防其不是text/xml類型。

http_request = new XMLHttpRequest();
http_request.overrideMimeType(‘text/xml‘);

下一步就是你來決定在服務(wù)器對(duì)你的請(qǐng)求作出響應(yīng)后，你準(zhǔn)備做什么。這一階段，你只需要告訴HTTP請(qǐng)求對(duì)象（HTTP request object）用哪一個(gè)JavaScript函數(shù)來處理這一響應(yīng)。這一步用設(shè)置該對(duì)象onreadystatechange屬性為相應(yīng)的JavaScript函數(shù)名來實(shí)現(xiàn)：

http_request.onreadystatechange = nameOfTheFunction;

注意，在函數(shù)名后面沒有括號(hào)。另外如下定義處理響應(yīng)的函數(shù)：

http_request.onreadystatechange = function(){
    // 處理響應(yīng)
};

接下來，既然你已經(jīng)聲明了在接到響應(yīng)后干什么，你就需要去發(fā)出請(qǐng)求。你需要調(diào)用HTTP請(qǐng)求類的open()和send()方法：

http_request.open(‘GET‘, ‘http://www./some.file‘, true);
http_request.send(null);

• open()方法的第一個(gè)參數(shù)是HTTP請(qǐng)求的方式——GET、POST、HEAD或者任何其它你想使用的，你的服務(wù)器支持的方式。方式的名稱要大寫，否則有些瀏覽器（如Firefox）可能就不會(huì)處理請(qǐng)求。可以去 W3C specs獲取更多的你可以使用的HTTP請(qǐng)求方式的信息。
• 第二個(gè)參數(shù)是你所請(qǐng)求頁面的URL。
• 第三個(gè)參數(shù)是用來設(shè)置請(qǐng)求是否為異步的。如果是TRUE，則在服務(wù)器尚未返回響應(yīng)的時(shí)候，JavaScript的函數(shù)會(huì)繼續(xù)執(zhí)行。這也就是AJAX中的A的含義。

send()方法的參數(shù)可以使任何你希望傳遞給服務(wù)器的數(shù)據(jù)，數(shù)據(jù)應(yīng)該為如下格式的查詢串：

name=value&anothername=othervalue&so=on

第二步：處理服務(wù)器響應(yīng)

記住，當(dāng)你向服務(wù)器發(fā)出了一個(gè)請(qǐng)求，你也就發(fā)出了一個(gè)被設(shè)計(jì)用來處理響應(yīng)的JavaScript函數(shù)的名字。

http_request.onreadystatechange = nameOfTheFunction;

我們來看看這個(gè)函數(shù)都應(yīng)該做些什么。首先，其需要檢查請(qǐng)求的狀態(tài)，如果狀態(tài)的值為4，那么就意味著全部的服務(wù)器響應(yīng)都已接受完畢，你可以繼續(xù)來處理了。

if (http_request.readyState == 4) {
    // 一切就緒，相映已接受完成
} else {
    //尚未就緒
}

• 0（未初始化/uninitialized）
• 1（正在加載/loading）
• 2（加載完畢/loaded）
• 3（交互/interactive）
• 4（完成/complete）

下一步是檢查HTTP服務(wù)器響應(yīng)的情況代碼。所有可能的代碼都被列在了W3C的網(wǎng)站上。目前，我們只對(duì)200 OK響應(yīng)感興趣。

if (http_request.status == 200) {
    // 棒極了！
} else {
    // 請(qǐng)求出了些問題，
    // 比如響應(yīng)可能是404(Not Found)，未找到
    // 或者500，內(nèi)部服務(wù)器錯(cuò)誤
}

在你檢查完請(qǐng)求的狀態(tài)和HTTP響應(yīng)情況后，你就可以自己決定對(duì)服務(wù)器發(fā)送給你的數(shù)據(jù)作什么樣的處理了。你有兩種途徑來訪問這些數(shù)據(jù)：

• http_request.responseText將會(huì)把服務(wù)器的響應(yīng)作為一個(gè)文本串返回
• http_request.responseXML將把響應(yīng)作為一個(gè)XMLDocument對(duì)象返回，你可以用JavaScript的文檔對(duì)象模型（DOM）的函數(shù)來處理

第三步：一個(gè)簡(jiǎn)單的例子

我現(xiàn)在來做一個(gè)簡(jiǎn)單的HTTP請(qǐng)求。我們的JavaScript腳本將會(huì)請(qǐng)求一個(gè)HTML文檔，test.html，其包含了一段文本——“這是一個(gè)測(cè)試。”——然后我們會(huì)alert() test.html的內(nèi)容。

<script type="text/javascript" language="javascript">
    var http_request = false;

    function makeRequest(url) {

        http_request = false;

        if (window.XMLHttpRequest) { // Mozilla, Safari,...

            http_request = new XMLHttpRequest();
            if (http_request.overrideMimeType) {
                http_request.overrideMimeType(‘text/xml‘);
            }
        } else if (window.ActiveXObject) { // IE
            try {
                http_request = new ActiveXObject("Msxml2.XMLHTTP");
            } catch (e) {
                try {
                    http_request = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (e) {}
            }
        }

        if (!http_request) {
            alert(‘Giving up :( Cannot create an XMLHTTP instance‘);
            return false;
        }
        http_request.onreadystatechange = alertContents;
        http_request.open(‘GET‘, url, true);
        http_request.send(null);

    }

    function alertContents() {

        if (http_request.readyState == 4) {
            if (http_request.status == 200) {
                alert(http_request.responseText);
            } else {
                alert(‘There was a problem with the request.‘);
            }
        }

    }
</script>

<span
    style="cursor: pointer; text-decoration: underline"
    onclick="makeRequest(‘test.html‘)">
        發(fā)出請(qǐng)求
</span>

在這個(gè)例子中：

• 用戶在瀏覽器里點(diǎn)擊“發(fā)出請(qǐng)求”（make a request）；
• 這會(huì)調(diào)用makeRequest()函數(shù)，并且附有參數(shù)test.html，一個(gè)自阿同一目錄下的HTML文檔的名字。
• 請(qǐng)求被發(fā)出，然后（onreadystatechange）操作被傳遞給alertContents()；
• alertContents()檢查響應(yīng)是否被接收和是否狀態(tài)為“OK”，然后alert() test.html文件的內(nèi)容。

你可以在這里測(cè)試這個(gè)例子，并且可以在這里看見測(cè)試文件。

與XML響應(yīng)協(xié)同工作

在上個(gè)例子中，在HTTP響應(yīng)被接收完畢后，我們和使用了請(qǐng)求對(duì)象的responseText屬性，其包含了test.html文件的內(nèi)容?，F(xiàn)在，讓我們?cè)囋?code>responseXML屬性。

讓我們現(xiàn)在就創(chuàng)建一個(gè)有效的XML文檔，這個(gè)文檔稍后會(huì)被我們請(qǐng)求。文檔（test.xml）包括：

<?xml version="1.0" encoding="utf-8" ?>
<root>
    這是個(gè)測(cè)試.
</root>

...
onclick="makeRequest(‘test.xml)">
...

var xmldoc = http_request.responseXML;
var root_node = xmldoc.getElementsByTagName(‘root‘).item(0);
alert(root_node.firstChild.data);

這樣，我們獲取了responseXML中的XMLDocument對(duì)象，并且用DOM方法來訪問了XML文檔中所包含的某些內(nèi)容。你可以在這里瀏覽到test.xml，更新后的腳本可以在這里得到。

可以去Mozilla‘s DOM implementation獲取更多的DOM方法。