怎樣使用AJAX進行WEB應用程序開發

2024-09-01 08:26:13

字體：大中小

來源：轉載

供稿：網友

　　閱讀提要 AJAX，一個異步javascript和XML的縮略詞，是當今快速發展的Web開發界十分熱門的技術。在這項新技術提供巨大能力的同時，它也燃發了在"Back"按鈕問題上的不容置疑的爭論。本文作者將向你解釋怎樣在真實世界中使用AJAX以及怎樣在一個工程中評估它的價值。在你讀完本文后，你就會明白什么是AJAX，在什么情況下，為什么以及怎樣使用這項技術。

　　一、簡介

　　AJAX，一個異步javascript和XML的縮略詞，是最近出來的技術詞語。異步意味著你可以經由超文本傳輸協議(HTTP)向一個服務器發出請求并且在等待該響應時繼續處理另外的數據。這就意味著，例如，你可以調用一個服務器端腳本來從一個數據庫中以XML方式檢索數據，把數據發送到存儲在一個數據庫的服務器腳本，或者簡單地裝載一個XML文件以填充你的Web站點而不需刷新該頁面。然而，在這項新技術提供巨大能力的同時，它也引起了在"Back"按鈕問題上的很多爭論。本文將幫助你確定在真實世界中何時使用AJAX是最佳選擇。

　　首先，我假定你對縮略詞javascript和XML部分有一個基本了解。盡管你能通過AJAX請求任何類型的文本文件，但是我在此主要集中討論XML。我將解釋怎樣在真實世界中使用AJAX以及怎樣在一個工程中評估它的價值。在你讀完本文后，你將會明白什么是AJAX，在什么情況下，為什么以及怎樣使用這項技術。你將要學習，在保持給用戶提供直觀體驗的同時怎樣創建對象，發出請求以及定制響應。

　　我已創建了一個適合于本文的示例工程(你可以下載源代碼)。這個示例實現了一個簡單的請求-它裝載一個包含頁面內容的XML文件并且分析數據以把它顯示在一個HTML頁面中。

　　二、常規屬性和方法

　　表1和2提供了一個屬性和方法的概述-它們為Windows Internet Explorer 5，Mozilla，Netscape 7，Safari 1.2，和Opera等瀏覽器所支持。

　　表1屬性

屬性	描述
onreadystatechange	當請求對象變化時該事件處理器激活。
readyState	返回指示對象的當前狀態的值。
responseText	來自服務器的響應串的版本。
responseXML	來自服務器的響應的DOM兼容的文檔對象。
status	來自服務器的響應的狀態碼。
statusText	以一個字符串形式返回的狀態消息。

　　表2方法

方法	描述
Abort()	取消當前HTTP請求。
getAllResponseHeaders()	檢索所有的HTTP頭值。
getResponseHeader("headerLabel")	從響應體中檢索一個HTTP頭部的值。
open("method","URL"[,asyncFlag[,"userName"[,"password"]]])	初始化一個MSXML2.XMLHTTP請求，并從該請求指定方法，URL和認證信息。
send(content)	發送一個HTTP請求到服務器并接收響應。
setRequestHeader("label", "value")	指定一個HTTP頭的名字。

　　三、從哪里開始

　　首先，你需要創建XML文件-后面我們對之進行請求并作為頁面內容進行分析。你正在請求的文件必須與目標工程駐留在相同的服務器上。

　　下一步，創建發出請求的HTML文件。當頁面通過使用頁面主體中的onload方法進行加載時，該請求發生。接著，該文件需要一個有ID的div標簽，這樣當我們準備好要顯示內容時就可以對之進行定位。當你做完所有這些，你的頁面的主體看上去如下：

＜body onload="makeRequest('xml/content.xml');"＞
＜div id="copy"＞＜/div＞
＜/body＞

　　四、創建請求對象

　　為了創建請求對象，你必須檢查是否瀏覽器使用XMLHttpRequest或ActiveXObject。這兩個對象之間的主要區別在于使用它們的瀏覽器。Windows IE 5 及以上版本使用ActiveX對象；而Mozilla，Netscape 7，Opera和Safari 1.2及以上版本使用XMLHttpRequest對象。另外一個區別是你創建對象的方式：Opera，Mozilla，Netscape和Safari允許你簡單地調用該對象的構造器，但是Windows IE需要把對象的名字傳遞到ActiveX構造器中。下面是怎樣創建代碼來決定要使用哪個對象和怎樣創建它的示例：

if(window.XMLHttpRequest)
{ request = new XMLHttpRequest();}
else if(window.ActiveXObject)
{ request = new ActiveXObject("MSXML2.XMLHTTP");}

五、發出請求

　　現在既然你已經創建了你的請求對象，那么你已經為向服務器發出請求作了準備。創建一個到事件處理器的參考以聽取onreadystatechange事件。然后，該事件處理器方法將在狀態發生變化時作出響應。一旦我們完成請求，我們就開始創建這個方法。打開連接以GET或POST一個定制的URL-在此是一個content.xml，并且設置一個布爾定義-是否你想要進行異步調用。

　　現在到了發出請求的時間了。在這個示例中，我使用了null，因為我們使用的是GET；為了使用POST，你需要使用下面這個方法發出一個查詢串：

request.onreadystatechange = onResponse;
request.open("GET". url, true);
request.send(null);

　　六、定制加載和錯誤處理消息

　　你為onreadystatechange方法創建的事件處理器正是集中進行加載和處理錯誤的場所?，F在到了考慮用戶并針對他們與之交互的內容的狀態提供反饋的時候了。在這個實例中，我針對所有的裝載狀態代碼提供反饋，并且也對最經常發生的錯誤處理狀態代碼提供一些基本的反饋。為了顯示請求對象的當前狀態，readyState屬性包括顯示在下表中的一些值。

值	描述
0	未初始化，對象沒有用數據進行初始化。
1	裝載中，對象正在裝載它的數據。
2	裝載結束，對象完成了它的數據的裝載。
3	可交互，用戶能與對象交互了，盡管它還沒有裝載結束。
4	完成，對象已經完全被初始化。

　　W3C中有很長的一串有關HTTP狀態代碼的定義。我選擇了兩個狀態代碼:

　　?200:請求成功了。

　　?404:服務器沒有找到與所請求的文件相匹配的任何東西。

　　最后，我檢查任何另外的狀況代碼-它們將生成一個錯誤并提供一個一般錯誤信息。下面是一個代碼示例-你可以用之來處理這些情況。注意，我在定位我們前面在HTML文件的主體中創建的div ID并且對它應用裝載和/或錯誤信息-通過innerHTML方法-這個方法用于設置在div對象的開始和結束標簽之間的HTML:

if(obj.readyState == 0)
{ document.getElementById('copy').innerHTML = "Sending Request...";}
if(obj.readyState == 1)
{ document.getElementById('copy').innerHTML = "Loading Response...";}
if(obj.readyState == 2)
{ document.getElementById('copy').innerHTML = "Response Loaded...";}
if(obj.readyState == 3)
{ document.getElementById('copy').innerHTML = "Response Ready...";}
if(obj.readyState == 4){
if(obj.status == 200){ return true; }
else if(obj.status == 404)
{
// 添加一個定制消息或把用戶重定向到另外一個頁面
document.getElementById('copy').innerHTML = "File not found";
}
else
{document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; }
}

　　當狀況代碼為200時，這意味著請求成功。下面開始進行響應了。

　　七、分析響應

　　當你準備好分析來自請求對象的響應時，真正的工作開始了。現在你可以用你請求的數據開始工作。僅為測試目的，在開發期間，可以使用responseText和responseXML屬性來顯示來自響應的原始數據。為了存取XML響應中的結點，首先使用你創建的請求對象，定位到responseXML屬性以檢索(你可能已經猜測出來)來自響應的XML。定位到documentElement-它檢索一個到XML響應的根結點的參考。

var response = request.responseXML.documentElement;

　　現在既然你有了到響應的根結點的參考，那么你可以使用getElementsByTagName()以結點名字來檢索childNodes。下面一行用一個頭部的nodeName來定位一個childNode：

response.getElementsByTagName('header')[0].firstChild.data;

　　使用firstChild.data可以允許你存取該元素中的文本：

response.getElementsByTagName('header')[0].firstChild.data;

　　下面是怎樣創建這些代碼的完整的例子：

var response = request.responseXML.documentElement;
var header = response.getElementsByTagName('header')[0].firstChild.data;
document.getElementById('copy').innerHTML = header;

　　八、需求分析

　　現在既然你知道怎樣使用AJAX的基礎知識，那么下一步就是決定是否在一工程使用它。須記住的最重要的事情是，在你還沒有刷新頁面時你無法使用"Back"按鈕。為此，可以先專注于你的工程中的一小部分-它能夠從使用這種類型的交互中受益。例如，你可以創建一個表單-它在用戶每次輸入一個輸入字段或一個字母時查詢一個腳本以便進行實時校驗。你可以創建一個拖放頁面-在釋放一項時，它能夠把數據發送到一個腳本中并把該頁面的狀態保存到一個數據庫中。使用AJAX的理由毫無疑問是存在的；并且這種使用無論對開發者還是用戶都會帶來益處；這全依賴于具體的條件和執行情況。

　　還有其它方法可用來解決"Back"按鈕的問題，例如使用Google Gmail-它現在能夠為你的操作提供一種撤消功能而不刷新該頁面。以后還會出現許多更具創造性的例子-它們將通過提供給開發者創建獨特實時的體驗的手段給用戶帶來更大的好處。

　　九、結論

　　盡管AJAX允許我們構建新的和改進的方式來與一個WEB頁面進行交互；但是作為開發者，我們需要牢記產品是不考慮技術的；它關心的是用戶以及其如何與用戶進行交互。沒有了用戶群，我們構建的工程毫無用處?；谶@個標準，我們就能評估應該使用什么技術以及何時使用它們來創建對相應用戶有用的應用軟件。

上一篇：巧用Ajax和RSS做個人門戶網站

下一篇：由淺入深完全掌握Ajax之Ajax 簡介