DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> AJAX入門 >> AJAX詳解 >> AJAX:Getting Started(中文)
AJAX:Getting Started(中文)
編輯: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"(可擴展標記語言)。

第一步:如何發出一個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方法。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved