轉載google這篇發表在Devmo上的AJAX: Getting Started。
目錄
-
什么是AJAX？
-
第一步：如何發出一個HTTP請求
-
第二步：處理服務器的響應
-
第三步：一個簡單的例子
-
第四步：與XML響應協同工作
什么是AJAX
AJAX是一個新的合成術語，隱含了兩個已經存在多年的JavaScript特性，但是直到最近，隨著一些諸如Gmail、Google Suggest以及Google Maps的轟動，才被許多網絡開發者所注意到。
我們所討論的兩個JavaScript的特性是你能夠：
- 向服務器發出請求而不需重新加載任何頁面
- 解析XML文檔并且與之協同工作
AJAX是一個縮寫，A是指"asynchronous"（異步的），它表示你可以在向服務器發出一個HTTP請求后，邊做其他的事情，邊等待服務器的響應。JA表示"JavaScript"，X表示"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"
onclick="makeRequest('test.html')">
發出請求
</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>
我們只需要在腳本中用下面的內容替換請求行：
...
onclick="makeRequest('test.xml)">
...
然后在
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，更新后的腳本可以在這里得到。
可以去獲取更多的DOM方法。