怎樣使用AJAX進(jìn)行WEB應(yīng)用程序開發(fā)_AJAX教程

推薦：用AJAX編寫用戶注冊(cè)實(shí)例及技術(shù)小結(jié)
　　我所舉的這個(gè)例子是一個(gè)企業(yè)用戶注冊(cè)時(shí)的一個(gè)應(yīng)用，當(dāng)用戶注冊(cè)時(shí)檢查用戶名和企業(yè)名是否可用，以前的做法是在旁邊加一個(gè)按鈕，點(diǎn)擊“檢查”，就向服務(wù)器發(fā)出請(qǐng)求，然后等待……服務(wù)器返

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

　　一、 簡介

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

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

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

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

　　表1和2提供了一個(gè)屬性和方法的概述-它們?yōu)閃indows Internet Explorer 5，Mozilla，Netscape 7，Safari 1.2，和Opera等瀏覽器所支持。

　　表1屬性

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

　　表2方法

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

　　三、 從哪里開始

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

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

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

　　四、 創(chuàng)建請(qǐng)求對(duì)象

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

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

五、 發(fā)出請(qǐng)求

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

　　現(xiàn)在到了發(fā)出請(qǐng)求的時(shí)間了。在這個(gè)示例中，我使用了null，因?yàn)槲覀兪褂玫氖荊ET；為了使用POST，你需要使用下面這個(gè)方法發(fā)出一個(gè)查詢串：

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

　　六、 定制加載和錯(cuò)誤處理消息

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

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

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

　　·200:請(qǐng)求成功了。

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

　　最后，我檢查任何另外的狀況代碼-它們將生成一個(gè)錯(cuò)誤并提供一個(gè)一般錯(cuò)誤信息。下面是一個(gè)代碼示例-你可以用之來處理這些情況。注意，我在定位我們前面在HTML文件的主體中創(chuàng)建的div ID并且對(duì)它應(yīng)用裝載和/或錯(cuò)誤信息-通過innerHTML方法-這個(gè)方法用于設(shè)置在div對(duì)象的開始和結(jié)束標(biāo)簽之間的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) { // 添加一個(gè)定制消息或把用戶重定向到另外一個(gè)頁面 document.getElementById('copy').innerHTML = "File not found"; } else {document.getElementById('copy').innerHTML = "There was a problem retrieving the XML."; } }

　　當(dāng)狀況代碼為200時(shí)，這意味著請(qǐng)求成功。下面開始進(jìn)行響應(yīng)了。

　　七、分析響應(yīng)

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

var response = request.responseXML.documentElement;

　　現(xiàn)在既然你有了到響應(yīng)的根結(jié)點(diǎn)的參考，那么你可以使用getElementsByTagName()以結(jié)點(diǎn)名字來檢索childNodes。下面一行用一個(gè)頭部的nodeName來定位一個(gè)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ǔ)知識(shí)，那么下一步就是決定是否在一工程使用它。須記住的最重要的事情是，在你還沒有刷新頁面時(shí)你無法使用"Back"按鈕。為此，可以先專注于你的工程中的一小部分-它能夠從使用這種類型的交互中受益。例如，你可以創(chuàng)建一個(gè)表單-它在用戶每次輸入一個(gè)輸入字段或一個(gè)字母時(shí)查詢一個(gè)腳本以便進(jìn)行實(shí)時(shí)校驗(yàn)。你可以創(chuàng)建一個(gè)拖放頁面-在釋放一項(xiàng)時(shí)，它能夠把數(shù)據(jù)發(fā)送到一個(gè)腳本中并把該頁面的狀態(tài)保存到一個(gè)數(shù)據(jù)庫中。使用AJAX的理由毫無疑問是存在的；并且這種使用無論對(duì)開發(fā)者還是用戶都會(huì)帶來益處；這全依賴于具體的條件和執(zhí)行情況。

　　還有其它方法可用來解決"Back"按鈕的問題，例如使用Google Gmail-它現(xiàn)在能夠?yàn)槟愕牟僮魈峁┮环N撤消功能而不刷新該頁面。以后還會(huì)出現(xiàn)許多更具創(chuàng)造性的例子-它們將通過提供給開發(fā)者創(chuàng)建獨(dú)特實(shí)時(shí)的體驗(yàn)的手段給用戶帶來更大的好處。

　　九、結(jié)論

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

分享：Ajax并不神秘揭下各種Ajax控件和類庫的小褲衩
　　Ajax控件和類庫現(xiàn)在真的太多了，不知不覺中增加了Ajax的神秘性和復(fù)雜性，看到版內(nèi)很多人為此費(fèi)解和傷神，決定發(fā)此貼談?wù)劚救藢?duì)Ajax的觀點(diǎn)，希望能讓大家對(duì)Ajax有一個(gè)本質(zhì)的認(rèn)識(shí)。