AJAX技術(shù)開發(fā)Back按鈕問題的應(yīng)用程序

2024-09-01 08:26:14

字體：大中小

供稿：網(wǎng)友

一、簡介

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

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

我已創(chuàng)建了一個適合于本文的示例工程。這個示例實現(xiàn)了一個簡單的請求-它裝載一個包含頁面內(nèi)容的XML文件并且分析數(shù)據(jù)以把它顯示在一個HTML頁面中。

二、常規(guī)屬性和方法

表1和2提供了一個屬性和方法的概述-它們?yōu)閃indows Internet Explorer 5，Mozilla，Netscape 7，Safari 1.2，和表1屬性

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

表2方法

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

三、從哪里開始

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

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

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

＜div id="copy"＞＜/div＞

＜/body＞

四、創(chuàng)建請求對象

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

if(window.XMLHttpRequest)

{ request = new XMLHttpRequest();}

else if(window.ActiveXObject)

{ request = new ActiveXObject("MSXML2.XMLHTTP");}

五、發(fā)出請求

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

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

request.onreadystatechange = onResponse;

request.open("GET". url, true);

request.send(null);

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

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

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

W3C中有很長的一串有關(guān)HTTP狀態(tài)代碼的定義。我選擇了兩個狀態(tài)代碼:

?200:請求成功了。

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

最后，我檢查任何另外的狀況代碼-它們將生成一個錯誤并提供一個一般錯誤信息。下面是一個代碼示例-你可以用之來處理這些情況。注意，我在定位我們前面在HTML文件的主體中創(chuàng)建的div ID并且對它應(yīng)用裝載和/或錯誤信息-通過innerHTML方法-這個方法用于設(shè)置在div對象的開始和結(jié)束標簽之間的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時，這意味著請求成功。下面開始進行響應(yīng)了。

七、分析響應(yīng)

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

var response = request.responseXML.documentElement;

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

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

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

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

下面是怎樣創(chuàng)建這些代碼的完整的例子：

var response = request.responseXML.documentElement;

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

document.getElementById('copy').innerHTML = header;

八、需求分析

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

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

九、結(jié)論

盡管AJAX允許我們構(gòu)建新的和改進的方式來與一個WEB頁面進行交互；但是作為開發(fā)者，我們需要牢記產(chǎn)品是不考慮技術(shù)的；它關(guān)心的是用戶以及其如何與用戶進行交互。沒有了用戶群，我們構(gòu)建的工程毫無用處。基于這個標準，我們就能評估應(yīng)該使用什么技術(shù)以及何時使用它們來創(chuàng)建對相應(yīng)用戶有用的應(yīng)用軟件。

上一篇：如何克服對Ajax應(yīng)用的阻礙

下一篇：70個AJAX應(yīng)用的演示　附源碼下載