AJAX:Getting Started(中文)

ajax|中文

Start AJAX

最近開始研究AJAX（Asynchronous JavaScript and XML），很幸運google到了這篇發表在Devmo上的AJAX: Getting Started。現把這篇簡潔易懂的文章翻譯如下，與大家共用，希望能對大家有所協助！

這篇文章會使你對AJAX有一個基本瞭解，並給出兩個容易上手的例子。

目錄

1. 什麼是AJAX？
2. 第一步：如何發出一個HTTP請求
3. 第二步：處理伺服器的響應
4. 第三步：一個簡單的例子
5. 第四步：與XML響應協同工作

什麼是AJAX

AJAX是一個新的合成術語，隱含了兩個已經存在多年的JavaScript特性，但是直到最近，隨著一些諸如Gmail、Google Suggest以及Google Maps的轟動，才被許多網路開發人員所注意到。

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

• 向伺服器發出請求而不需重新載入任何頁面
• 解析XML文檔並且與之協同工作

AJAX是一個縮寫，A是指"asynchronous"（非同步），它表示你可以在向伺服器發出一個HTTP請求後，邊做其他的事情，邊等待伺服器的響應。JA表示"JavaScript"，X表示"XML"（可延伸標記語言 (XML)）。

第一步：如何發出一個HTTP請求

為了用JavaScript向伺服器發出一個HTTP請求，你需要一個類的執行個體來提供給你這種功能。這個類原本在IE裡被作為一個ActiveX對象提出，叫XMLHTTP。然後，Mozilla、Safari以及一些其他的瀏覽器相繼跟隨，出現了一個XMLHttpRequest類，其支援微軟的ActiveX對象原本的方法和屬性。

所以，為了能夠跨瀏覽器地建立這個類的對象，你需要這樣：

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

（以上例子中的代碼，是一個用來構建XMLHTTP執行個體的簡單版本，實際使用時的例子請參見本文的第三步）

如果伺服器端的響應中沒有包含XML的mime-type前序（header），有些版本的Mozilla瀏覽器可能不會處理。所以，為了安全起見，你可以用一個特殊的方法來給伺服器端發出的響應強加上這個前序，以防其不是text/xml類型。

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

下一步就是你來決定在伺服器對你的請求作出響應後，你準備做什麼。這一階段，你只需要告訴HTTP請求對象（HTTP request object）用哪一個JavaScript函數來處理這一響應。這一步用設定該對象onreadystatechange屬性為相應的JavaScript函數名來實現：

http_request.onreadystatechange = nameOfTheFunction;

注意，在函數名後面沒有括弧。另外如下定義處理響應的函數：

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

接下來，既然你已經聲明了在接到響應後幹什麼，你就需要去發出請求。你需要調用HTTP請求類的open()和send()方法：

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

• open()方法的第一個參數是HTTP請求的方式——GET、POST、HEAD或者任何其它你想使用的，你的伺服器支援的方式。方式的名稱要大寫，否則有些瀏覽器（如Firefox）可能就不會處理請求。可以去 W3C specs擷取更多的你可以使用的HTTP請求方式的資訊。
• 第二個參數是你所請求頁面的URL。
• 第三個參數是用來佈建要求是否為非同步。如果是TRUE，則在伺服器尚未返迴響應的時候，JavaScript的函數會繼續執行。這也就是AJAX中的A的含義。

send()方法的參數可以使任何你希望傳遞給伺服器的資料，資料應該為如下格式的查詢串：

name=value&anothername=othervalue&so=on

第二步：處理伺服器響應

記住，當你向伺服器發出了一個請求，你也就發出了一個被設計用來處理響應的JavaScript函數的名字。

http_request.onreadystatechange = nameOfTheFunction;

我們來看看這個函數都應該做些什麼。首先，其需要檢查請求的狀態，如果狀態的值為4，那麼就意味著全部的伺服器響應都已接受完畢，你可以繼續來處理了。

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

readyState全部值的列表如下：

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

(來源)

下一步是檢查HTTP伺服器響應的情況代碼。所有可能的代碼都被列在了W3C的網站上。目前，我們只對200 OK響應感興趣。

if (http_request.status == 200) {
    // 棒極了！
} else {
    // 請求出了些問題，
    // 比如響應可能是404(Not Found)，未找到
    // 或者500，內部伺服器錯誤
}

在你檢查完請求的狀態和HTTP響應情況後，你就可以自己決定對伺服器發送給你的資料作什麼樣的處理了。你有兩種途徑來訪問這些資料：

• http_request.responseText將會把伺服器的響應作為一個文本串返回
• http_request.responseXML將把響應作為一個XMLDocument對象返回，你可以用JavaScript的文件物件模型（DOM）的函數來處理

第三步：一個簡單的例子

我現在來做一個簡單的HTTP請求。我們的JavaScript指令碼將會請求一個HTML文檔，test.html，其包含了一段文本——“這是一個測試。”——然後我們會alert() test.html的內容。

<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"
>
發出請求
</span>

在這個例子中：

• 使用者在瀏覽器裡點擊“發出請求”（make a request）；
• 這會調用makeRequest()函數，並且附有參數test.html，一個自阿同一目錄下的HTML文檔的名字。
• 請求被發出，然後（onreadystatechange）操作被傳遞給alertContents()；
• alertContents()檢查響應是否被接收和是否狀態為“OK”，然後alert() test.html檔案的內容。

你可以在這裡測試這個例子，並且可以在這裡看見測試檔案。

與XML響應協同工作

在上個例子中，在HTTP響應被接收完畢後，我們和使用了請求對象的responseText屬性，其包含了test.html檔案的內容。現在，讓我們試試responseXML屬性。

讓我們現在就建立一個有效XML文檔，這個文檔稍後會被我們請求。文檔（test.xml）包括：

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

我們只需要在指令碼中用下面的內容替換請求行：

...
>
...

然後在 alertContents()裡把 alert()行替換成 alert(http_request.responseText);，並且，在其上方寫下：

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

這樣，我們擷取了responseXML中的XMLDocument對象，並且用DOM方法來訪問了XML文檔中所包含的某些內容。你可以在這裡瀏覽到test.xml，更新後的指令碼可以在這裡得到。

可以去Mozilla's DOM implementation擷取更多的DOM方法。