基于ＡＪＡＸ的ＷＥＢ開(kāi)發(fā)研究

摘要：該文介紹了使用AJAX 開(kāi)發(fā)WEB應(yīng)用系統(tǒng)的基本原理，并與傳統(tǒng)的WEB開(kāi)發(fā)方式進(jìn)行了對(duì)比，結(jié)合實(shí)際項(xiàng)目提出使用AJAX解決WEB開(kāi)發(fā)中幾個(gè)典型問(wèn)題的方法。

關(guān)鍵詞: AJAX；XMLHttpRequest；XML；WEB開(kāi)發(fā)

中圖分類號(hào)：TP311.52文獻(xiàn)標(biāo)識(shí)碼：A文章編號(hào)：1009-3044(2009)04-0839-02

Research on Web Development Based on AJAX

JIN Ying1， Li-Chao2

(1.Department of Management of Hefei University， Hefei 230601， China; 2.School of Computer Information of Hefei University of Technology， Hefei 230009， China)

Abstract: This paper introduces a principle of develop web application system using AJAX and compares with traditional web development method， gives a solution to solve some typical problems using AJAX under actual project.

Key words: AJAX; XMLHttpRequest; XML; WEB development

1 引言

隨著計(jì)算機(jī)網(wǎng)絡(luò)的不斷發(fā)展，越來(lái)越多的應(yīng)用系統(tǒng)采用Browse/Server (B/S)架構(gòu)。由于WEB應(yīng)用系統(tǒng)和桌面應(yīng)用系統(tǒng)對(duì)數(shù)據(jù)顯示不同的處理方式，使得WEB應(yīng)用系統(tǒng)無(wú)法像桌面應(yīng)用系統(tǒng)一樣使用豐富的界面組件，增大了WEB開(kāi)發(fā)的復(fù)雜性，也為構(gòu)造復(fù)雜界面的應(yīng)用系統(tǒng)帶來(lái)了很大的困難。AJAX(Asynchronous JavaScript and XML)由Jesse James Garrett首先提出。AJAX作為一種新的WEB開(kāi)發(fā)方法已在Google Gmail，Google Maps等應(yīng)用系統(tǒng)中使用，并且Sun已開(kāi)始計(jì)劃把AJAX加入到J2EE[1]中。

2 AJAX原理

AJAX綜合運(yùn)用已有的技術(shù)實(shí)現(xiàn)WEB的開(kāi)發(fā)。AJAX主要包括以下的技術(shù)[2]：

1) HTML和CSS：用于描述WEB界面。

2) Document Object Model(DOM): 文檔對(duì)象模型。WEB頁(yè)面使用DOM樹(shù)來(lái)描述，通過(guò)腳本可以對(duì)DOM進(jìn)行操作，實(shí)現(xiàn)動(dòng)態(tài)頁(yè)面。

3) XML和XSLT: XML是AJAX操作的數(shù)據(jù)格式，AJAX與服務(wù)器交互的數(shù)據(jù)都是通過(guò)XML來(lái)描述的。XSLT用于XML數(shù)據(jù)的格式化。

4) XMLHttpRequest：WEB頁(yè)面通過(guò)XMLHttpRequest對(duì)象和服務(wù)器進(jìn)行交互。XMLHttpRequest對(duì)象雖然還沒(méi)有在W3C規(guī)范中定義，但大多數(shù)的瀏覽器都已支持此對(duì)象，如Microsoft Internet Explorer中有與之對(duì)應(yīng)的XMLHTTP對(duì)象，在以Mozilla為核心的瀏覽器中已定義了XMLHttpRequest對(duì)象，Netscape最新版本中也加入了對(duì)XMLHttpRequest的支持。

5) JavaScript: 通過(guò)JavaScript腳本可以對(duì)DOM，XML和XMLHttpRequest對(duì)象和數(shù)據(jù)進(jìn)行處理，構(gòu)造出WEB界面。

圖1給出了AJAX的WEB模型圖。AJAX的模型比傳統(tǒng)的WEB模型多了AJAX一層。

AJAX層處于用戶界面和WEB服務(wù)器之間，用戶界面中的數(shù)據(jù)由AJAX引擎進(jìn)行封裝并提交給WEB服務(wù)器，WEB服務(wù)器的數(shù)據(jù)也是通過(guò)AJAX的解析反映到用戶界面中的。

AJAX引擎與WEB服務(wù)器的交互過(guò)程如下：

1) AJAX引擎通過(guò)JavaScript腳本訪問(wèn)用戶界面對(duì)應(yīng)的DOM樹(shù)，從DOM中獲取用戶準(zhǔn)備提交的數(shù)據(jù)，并以一定的格式組織這些數(shù)據(jù)。

2) AJAX引擎獲得XMLHttpRequest對(duì)象，并指定發(fā)送的數(shù)據(jù)，WEB服務(wù)器的地址以及回調(diào)函數(shù)?；卣{(diào)函數(shù)是實(shí)現(xiàn)異步發(fā)送和接收數(shù)據(jù)的關(guān)鍵部分，在發(fā)送和接收數(shù)據(jù)過(guò)程中，XMLHttpRequest對(duì)象會(huì)調(diào)用回調(diào)函數(shù)，從而可以獲得與服務(wù)器交互的情況。

3) AJAX引擎調(diào)用XMLHttpRequest對(duì)象的send方法發(fā)送數(shù)據(jù)。

4) WEB服務(wù)器在接收到HTTP請(qǐng)求后對(duì)AJAX封裝的數(shù)據(jù)進(jìn)行解析，完成相應(yīng)的業(yè)務(wù)處理，按照XML數(shù)據(jù)格式返回結(jié)果給AJAX引擎。

5) 回調(diào)函數(shù)在檢測(cè)到與WEB服務(wù)器的交互完成以后，從AJAX引擎中獲得WEB服務(wù)器返回的數(shù)據(jù)，通過(guò)JavaScript[3]對(duì)數(shù)據(jù)進(jìn)行處理，以HTML的形式在用戶界面中顯示。

3 AJAX 與傳統(tǒng)WEB開(kāi)發(fā)方式的比較

這里所說(shuō)的傳統(tǒng)WEB開(kāi)發(fā)方式指的是在客戶端通過(guò)表單提交數(shù)據(jù)，在服務(wù)器上同時(shí)處理業(yè)務(wù)數(shù)據(jù)和樣式的一種設(shè)計(jì)方法。

1) 對(duì)界面開(kāi)發(fā)人員的要求不同

傳統(tǒng)開(kāi)發(fā)方式要求界面開(kāi)發(fā)人員不但熟悉頁(yè)面的設(shè)計(jì)，還要能夠熟悉各種業(yè)務(wù)對(duì)象，并將業(yè)務(wù)數(shù)據(jù)嵌入到頁(yè)面中，這對(duì)于專業(yè)的界面設(shè)計(jì)人員來(lái)說(shuō)難度較大，而充當(dāng)這一角色的往往是業(yè)務(wù)層開(kāi)發(fā)人員，這樣既降低了界面的質(zhì)量又使業(yè)務(wù)層開(kāi)發(fā)人員不能集中精力開(kāi)發(fā)業(yè)務(wù)邏輯。

基于AJAX的開(kāi)發(fā)完全將頁(yè)面設(shè)計(jì)和業(yè)務(wù)數(shù)據(jù)分割開(kāi)來(lái)。業(yè)務(wù)層開(kāi)發(fā)人員可以完全關(guān)注于業(yè)務(wù)流程，只需要提供用戶界面中使用到的業(yè)務(wù)數(shù)據(jù)。用戶界面開(kāi)發(fā)人員無(wú)須關(guān)心業(yè)務(wù)對(duì)象，只需要對(duì)業(yè)務(wù)數(shù)據(jù)進(jìn)行處理，所需的技術(shù)就是如何操作XML格式的數(shù)據(jù)。這種方式不但有利于分工，還可以提高軟件并行開(kāi)發(fā)的效率，降低沖突的可能性。

2) 與服務(wù)器的交互方式不同

傳統(tǒng)開(kāi)發(fā)方式使用表單與服務(wù)器進(jìn)行數(shù)據(jù)交互，往往需要刷新整個(gè)頁(yè)面來(lái)完成一個(gè)操作，這種方式帶來(lái)的問(wèn)題就是在客戶端和服務(wù)端之間傳輸重復(fù)的數(shù)據(jù)，并且造成視覺(jué)上的不連續(xù)性。

AJAX使用XMLHttpRequest對(duì)象在后臺(tái)與服務(wù)器進(jìn)行交互，交互的是與業(yè)務(wù)緊密相關(guān)的數(shù)據(jù)，并在同一個(gè)界面中給出操作的結(jié)果，從而保持視覺(jué)上的連續(xù)性。

3) 界面組件的使用方式不同

傳統(tǒng)開(kāi)發(fā)方式使用的界面組件包括服務(wù)端和客戶端兩種類型的組件。服務(wù)端組件使用表單與服務(wù)器通訊，所以每次組件的更新操作都是組件的重新構(gòu)造過(guò)程，這樣使得組件的使用效率較低?？蛻舳私M件由于無(wú)法和業(yè)務(wù)數(shù)據(jù)綁定，所以只起到頁(yè)面顯示的作用。

AJAX主要使用客戶端組件。由于AJAX可以與服務(wù)器進(jìn)行數(shù)據(jù)的交互，從而使的客戶端組件擁有了豐富的數(shù)據(jù)表現(xiàn)能力，組件的更新只對(duì)數(shù)據(jù)進(jìn)行變更，而無(wú)需重新構(gòu)造整個(gè)組件。

4) 實(shí)現(xiàn)復(fù)雜界面的難易程度不同

復(fù)雜界面的構(gòu)造往往需要大量的腳本，需要在一個(gè)界面中完成各種各樣的操作。基于表單的傳統(tǒng)開(kāi)發(fā)方式不太適合在一個(gè)界面中完成一系列連續(xù)的操作，AJAX通過(guò)后臺(tái)的數(shù)據(jù)交換可以很好的保證在一個(gè)界面中完成各種操作。

5) 調(diào)試方式不同

傳統(tǒng)開(kāi)發(fā)方式所進(jìn)行的頁(yè)面調(diào)試主要是服務(wù)端調(diào)試，由于頁(yè)面中既包含了樣式，又包含了業(yè)務(wù)對(duì)象，這給調(diào)試帶來(lái)了一定的困難。

AJAX設(shè)及到大量的腳本，調(diào)試的重點(diǎn)是客戶端腳本。隨著開(kāi)發(fā)工具的不斷更新，腳本的調(diào)試也變得非常便利。Microsoft Visual Studio .net提供了非常好的腳本調(diào)試環(huán)境。

6) 應(yīng)用范圍不同

傳統(tǒng)開(kāi)發(fā)方式可以應(yīng)用在各種類型的應(yīng)用系統(tǒng)中，而AJAX開(kāi)發(fā)方式適合數(shù)據(jù)處理，管理類的應(yīng)用系統(tǒng)，而不適合以內(nèi)容發(fā)布為主的應(yīng)用系統(tǒng)，如新聞系統(tǒng)。

AJAX開(kāi)發(fā)方式與傳統(tǒng)開(kāi)發(fā)方式的不同就在于AJAX開(kāi)發(fā)方式吸取了桌面應(yīng)用系統(tǒng)開(kāi)發(fā)的特點(diǎn)，同時(shí)又結(jié)合WEB開(kāi)發(fā)固有的特點(diǎn)，從而可以更好的用來(lái)開(kāi)發(fā)WEB應(yīng)用系統(tǒng)。

4 AJAX應(yīng)用實(shí)例

在基于Web的網(wǎng)絡(luò)平臺(tái)實(shí)驗(yàn)系統(tǒng)中，我們采用AJAX技術(shù)進(jìn)行了WEB開(kāi)發(fā)，下面說(shuō)明使用AJAX解決的幾個(gè)典型問(wèn)題。

1) 樹(shù)型目錄的構(gòu)造

網(wǎng)絡(luò)平臺(tái)實(shí)驗(yàn)系統(tǒng)管理的對(duì)象之一是部門結(jié)構(gòu)。系統(tǒng)中包括多個(gè)部門（如:院），每個(gè)部門包含多個(gè)基層單位(如:系)，如信息管理系，工商管理系等，每個(gè)基層單位又包括多門基礎(chǔ)實(shí)驗(yàn)課程，如數(shù)據(jù)結(jié)構(gòu)002，高級(jí)語(yǔ)言001等。這樣就構(gòu)成了三級(jí)結(jié)構(gòu)，第一級(jí)為部門（如：院），第二級(jí)為基層單位（如:系)，第三級(jí)為實(shí)驗(yàn)課程。樹(shù)型目錄可以清晰的表示這種層次結(jié)構(gòu)。

對(duì)于樹(shù)型目錄的構(gòu)造有多種方式。

一種方式是一次性獲取所有結(jié)點(diǎn)的信息，構(gòu)造出一完整的樹(shù)型目錄，當(dāng)樹(shù)型目錄的內(nèi)容發(fā)生變更時(shí)，就重新構(gòu)造。當(dāng)結(jié)點(diǎn)數(shù)量較大時(shí)這種方式將會(huì)嚴(yán)重影響性能，同時(shí)要維護(hù)樹(shù)型目錄更新前和更新后狀態(tài)的連續(xù)性也會(huì)非常困難。

另一種方式就是使用AJAX，動(dòng)態(tài)填充數(shù)據(jù)，動(dòng)態(tài)變更數(shù)據(jù)。通過(guò)AJAX在后臺(tái)與服務(wù)器的通訊，可以根據(jù)需要每次獲得一層的數(shù)據(jù)。首先生成所有部門結(jié)點(diǎn)，當(dāng)用戶選擇了某個(gè)部門結(jié)點(diǎn)后，AJAX與服務(wù)器交互一次獲取此部門包含的所有基層單位信息，當(dāng)選中基層單位后再獲取其包含的基礎(chǔ)實(shí)驗(yàn)課程信息，這樣就實(shí)現(xiàn)了數(shù)據(jù)的按需獲取。當(dāng)結(jié)點(diǎn)內(nèi)容發(fā)生時(shí)，AJAX只要提交數(shù)據(jù)變更，并通過(guò)腳本改變結(jié)點(diǎn)的顯示內(nèi)容就可以完成整個(gè)操作。

2) 層次數(shù)據(jù)的提交

在新學(xué)期開(kāi)學(xué)時(shí)需要登記開(kāi)設(shè)實(shí)驗(yàn)課程的基本信息和選課學(xué)生的信息，分別保存在數(shù)據(jù)庫(kù)中的實(shí)驗(yàn)課程表和選課學(xué)生表中。實(shí)驗(yàn)課程表和選課學(xué)生表是一對(duì)多的關(guān)系。對(duì)于這種有一定層次的數(shù)據(jù)提交，傳統(tǒng)的處理方式有兩種。第一種是分步提交，首先提交實(shí)驗(yàn)課程的基本信息，然后再提交選課學(xué)生信息。第二種是在表單中構(gòu)造重復(fù)表單域，以數(shù)組的形式來(lái)提交，在服務(wù)器中對(duì)數(shù)組進(jìn)行解析。

使用AJAX來(lái)提交這種數(shù)據(jù)將變得非常簡(jiǎn)單。我們使用XML[4]來(lái)表示這種層次數(shù)據(jù)，定義的格式如下。

＜definition＞

＜Course name=\"數(shù)據(jù)結(jié)構(gòu)\" courseno=\"002\" time=\"2008-3-1 10:09:10\"＞

＜students＞

＜student stuno=\"2007021\" degree=\"1\" precourse =\"001\"/＞

＜student stuno=\"2007034\" degree=\"2\" precourse =\"001\"/＞

＜student stuno=\"2007053\" degree=\"1\" precourse =\"001\"/＞

＜/students＞

＜/Course ＞

＜/definition＞

在格式中定義了課程結(jié)點(diǎn)＜Course＞，并通過(guò)課程名稱，課程號(hào)，選課時(shí)間屬性來(lái)描述課程的基本信息，在課程結(jié)點(diǎn)下定義了多個(gè)學(xué)生結(jié)點(diǎn)＜student＞，在結(jié)點(diǎn)中描述了學(xué)生號(hào)，學(xué)生先修實(shí)驗(yàn)課程掌握程度（為學(xué)生分配實(shí)驗(yàn)試題難易程度上做參考），先修課程號(hào)信息。

通過(guò)AJAX引擎發(fā)送此XML格式的數(shù)據(jù)到WEB服務(wù)器，WEB服務(wù)器可以很容易的通過(guò)XML解析器對(duì)這種層次結(jié)構(gòu)進(jìn)行分析，由于越來(lái)越多的數(shù)據(jù)庫(kù)支持XML數(shù)據(jù)的直接導(dǎo)入，導(dǎo)入XML數(shù)據(jù)將更加方便，即使沒(méi)有數(shù)據(jù)庫(kù)的支持，也可以通過(guò)對(duì)XML數(shù)據(jù)的分析自行編寫代碼實(shí)現(xiàn)數(shù)據(jù)的自動(dòng)導(dǎo)入。

3) 自動(dòng)完成功能

當(dāng)要從大量的數(shù)據(jù)中選擇一所需的數(shù)據(jù)是一件比較復(fù)雜的工作。自動(dòng)完成功能可以以一種比較友好的方式來(lái)完成此項(xiàng)工作。這個(gè)功能越來(lái)越多的應(yīng)用在各種系統(tǒng)中。要在WEB界面中實(shí)現(xiàn)此功能AJAX是一種非常好的途徑。

從數(shù)千人的學(xué)生中選擇一人是比較困難的，我們通過(guò)AJAX在用戶輸入完學(xué)生姓名后給出滿足此條件的所有學(xué)生列表，然后由用戶從中選擇出滿足條件的學(xué)生。這種方式比較符合實(shí)際教學(xué)工作中以姓名作為查詢條件的習(xí)慣，又可以避免學(xué)生重名造成的數(shù)據(jù)不一致性，很好的滿足了用戶的需求。

5 結(jié)束語(yǔ)

AJAX WEB開(kāi)發(fā)方法將各種WEB技術(shù)有機(jī)的結(jié)合起來(lái)，很好的解決了傳統(tǒng)WEB開(kāi)發(fā)中的固有問(wèn)題，提供了實(shí)現(xiàn)富客戶端，組件化開(kāi)發(fā)的有效途徑，將越來(lái)越多的應(yīng)用到各種類型的系統(tǒng)中去。

參考文獻(xiàn)：

[1] Sun co.Asynchronous JavaScript and XML (AJAX) with Java 2 Enterprise Edition[EB/OL]. https://bpcatalog.dev.java.net.

[2] Garrett J J. Ajax: A New Approach to Web Applications[EB/OL]. www.adaptivepath.com.

[3] Goodman D. Dynamic HTML:The Definitive Reference[M]. O'Reilly Associates，2002.

[4] Harold E R. XML Bible[M]. IDG Books Worldwide，Inc.，1999.