郭 琳 周 蓉

（四川職業(yè)技術(shù)學院，四川遂寧 629000）

Ajax的英文名為“Asynchronous JavaScript and XML”，直譯成中文意為“異步JavaScript和XML”，是指一種創(chuàng)建交互式網(wǎng)頁應用的網(wǎng)頁開發(fā)技術(shù).從Jesse James Garrett第一個提出Ajax到現(xiàn)在，Ajax成為了web應用開發(fā)中的寵兒，在web應用開發(fā)中有著重要的作用.

1 認識Ajax

Ajax對于大多數(shù)熟悉web應用程序開發(fā)的人來說，應該是一個陌生的名詞，熟悉的技術(shù).因為Ajax并沒有采用什么新的技術(shù)，只是對我們熟悉的原有技術(shù)的巧妙地綜合運用.Ajax可以理解為：使用XHTML + CSS來表示信息；使用DOM（Document Object Model）進行動態(tài)顯示及交互；使用XML和XSLT進行數(shù)據(jù)交換及相關(guān)操作；使用XmlHttpRequest對象與Web服務器進行異步數(shù)據(jù)交換.因此“新瓶裝舊酒”，可以作為對Ajax最好的引喻.

2 Ajax的優(yōu)點

2.1 無刷新更新頁面

使用Ajax的最大優(yōu)點，就是能在不更新整個頁面的前提下維護數(shù)據(jù).這使得Web應用程序更為迅捷地回應用戶動作，并避免了在網(wǎng)絡上發(fā)送那些沒有改變過的信息.

2.2 Ajax不需要任何瀏覽器插件

Ajax不需要任何瀏覽器插件，只需要用戶允許JavaScript在瀏覽器上執(zhí)行.就像DHTML應用程序那樣，Ajax應用程序必須在眾多不同的瀏覽器和平臺上經(jīng)過嚴格的測試.隨著Ajax的成熟，一些簡化Ajax使用方法的程序庫也相繼問世.同樣，也出現(xiàn)了另一種輔助程序設(shè)計的技術(shù)，為那些不支持 JavaScript的用戶提供替代功能.

2.3 強調(diào)用戶體驗

開發(fā)人員和設(shè)計人員開始認識到不僅大型的用戶體驗在市場上是成功的，而且也認識到這種體驗是怎么來影響用戶的開銷的.基于Ajax技術(shù)的google地圖比傳統(tǒng)的選擇MapQuest更成功，證明了提供更好的用戶體驗的產(chǎn)品的成功.

2.4 跨瀏覽器和跨平臺的兼容性

IE和FIREFOX是占據(jù)市場份額最大的兩個瀏覽器，并且它們都支持在瀏覽器上輕松創(chuàng)建基于Ajax的 WEB應用.現(xiàn)在開發(fā)運行在更為先進的WEB瀏覽器上的基于Ajax的富WEB應用成為了可能，這也是為什么Ajax應用變得如此流行的一個最重要的原因.

3 Ajax的實現(xiàn)原理

Ajax應用程序的加載和傳統(tǒng)的Web應用程序沒什么區(qū)別：首先，某個用戶操作（例如在瀏覽器中輸入 URL，或者在當前頁面中點擊一個外部鏈接）引發(fā)了瀏覽器的一次HTTP請求.然后，服務器處理這個請求，生成合適的 HTML、CSS以及JavaScript，并發(fā)送至客戶端.最后，客戶端瀏覽器將這一段HTML顯示出來.

隨后，用戶在該Ajax頁面上的后續(xù)操作將和傳統(tǒng) Web頁面完全不同——用戶的這些操作將不會引發(fā)瀏覽器的另一次HTTP請求，取而代之的是將引發(fā)客戶端的某段 JavaScript代碼的執(zhí)行.以一次用戶操作的全過程來描述Ajax的實現(xiàn)原理.這個流程可以分為7個步驟：

1）用戶在頁面上執(zhí)行了某個操作，例如鼠標移動、點擊某個區(qū)域等；

2）根據(jù)用戶的操作，頁面發(fā)出相應的DHTML事件；

3）調(diào)用注冊到該 DHTML事件的客戶端JavaScript事件處理函數(shù)，其中初始化了一個用以向服務器發(fā)送異步請求的XMlHttpRequest對象，同時指定了一個回調(diào)函數(shù)，當服務器端的響應返回時，將自動調(diào)用該回調(diào)函數(shù)；

4）服務器收到XMLHttpRequest對象的請求之后，開始根據(jù)請求進行一系列的處理；

5）處理完畢，服務器返回客戶端所需要的數(shù)據(jù)；

6）數(shù)據(jù)到達客戶端之后，執(zhí)行JavaScript回調(diào)函數(shù)，并根據(jù)返回的數(shù)據(jù)對用戶界面進行更新；

7）用戶看到界面的變化.

但是，在整個過程中，用戶并沒有被阻塞，依然可以瀏覽當前頁面的其他部分，甚至還可以再引發(fā)事件并觸發(fā)另一個與服務器的異步交互過程.這種非阻塞的異步通信模式在用戶體驗方面無疑是一個革命性的進步.

4 Ajax實現(xiàn)兩級級聯(lián)列表

下面以實例來實現(xiàn)省——市兩級級聯(lián)列表.當用戶選擇省份后，城市選項列表自動更新為和所選省份相關(guān)聯(lián)的城市.在此實現(xiàn)中，界面不會刷新，用戶感覺不到后臺所做的改變.

4.1 主選列表的實現(xiàn)

首先要實現(xiàn)主選列表.在省——市兩級級聯(lián)列表的實現(xiàn)中，即先實現(xiàn)省份列表的選擇.

4.1.1 建立數(shù)據(jù)庫及數(shù)據(jù)表

在MySql數(shù)據(jù)庫中新建一名為Ajaxtestdb的數(shù)據(jù)庫，在Ajaxtestdb數(shù)據(jù)庫中新建名為Pcitytb的表，表中的字段如表1：

表1 數(shù)據(jù)表Pcitytb的定義

在數(shù)據(jù)表中插入一些數(shù)據(jù)，以便測試使用.

4.1.2 在JSP頁面中實現(xiàn)主選列表

從數(shù)據(jù)庫的Pcitytb表中取出所有的省份名，生成主選列表中的選項.在取出省份名時，要去除重復值.Sel.jsp頁面的主要代碼如下：

4.1.3 主選列表添加響應事件

當主選列表的選項發(fā)生改變時要觸發(fā)相應的處理事件，因此添加onchange事件.前面的代碼改變?yōu)椋?/p>

省份：＜selset id=”prname” onchange=”city()”＞

Onchange后的值就是當主選列表的選項發(fā)生改變時調(diào)用的函數(shù).該函數(shù)的實現(xiàn)就是Ajax技術(shù)的關(guān)鍵之一.

4.2 從選列表的實現(xiàn)

當用戶選擇了省份以后從列表會進行相應的變化，主選列表實現(xiàn)后，下面就是從列表的實現(xiàn).

4.2.1 客戶端JavaScript事件處理函數(shù)

在該實例中事件處理函數(shù)就是 city()函數(shù)的實現(xiàn).City()函數(shù)的主要功能是獲取主選列表選中的值，使用XMLHttpRequest對象把該值傳到服務器上.

當服務器處理完成后調(diào)用回調(diào)函數(shù).

其代碼如下：

4.2.2 服務器端的處理

服務器端要完成的工作就是獲取從處理函數(shù)中傳過來的值，并做相應的處理，然后把處理結(jié)果返回給客戶端.在本實例中就是獲取到從客戶端傳來的省份名，用省份名為條件，查詢處數(shù)據(jù)庫中該省份的所有城市，然后把這些查詢處的城市返回到客戶端.從服務器返回數(shù)據(jù)有兩種方式.返回Text文本類型和XML數(shù)據(jù)流.由于返回的數(shù)據(jù)量很大，而且需要一個一個讀出，因此要用XML數(shù)據(jù)流格式返回.服務器以newcity.jsp文件來實現(xiàn)，其代碼如下：

4.2.3 JavaScript回調(diào)函數(shù)

回調(diào)函數(shù)把服務器返回的結(jié)果獲取到，然后去更新界面中需要改變的地方.在本實例中就是更新城市列表選項的值.

5 結(jié)束語

對于Ajax的應用是舉不甚舉，兩級級聯(lián)列表的實現(xiàn)只是滄海一粟.但該實例體現(xiàn)了Ajax的實現(xiàn)原理，并且在如何處理從數(shù)據(jù)庫返回的數(shù)據(jù)以及修改界面中列表項的值有值得借鑒之處.對于Ajax的使用是一個非常流行的趨勢，因此掌握Ajax技術(shù)對于Web開發(fā)人員勢在必行.

[1]沃伊喬斯基.Ajax關(guān)鍵技術(shù)與典型案例[M].北京:人民郵電出版社，2007.

[2]褚法政，周峰，孫更新.Ajax開發(fā)技術(shù)原理與實踐教程[M].北京:電子工業(yè)出版社，2007.

[3]周鑫燚.基于 Ajax的網(wǎng)絡作業(yè)管理系統(tǒng)的設(shè)計[J].重慶工學院學報（自然科學），2008，22（9）.

[4]羅會波，JSF第一步[M].北京:清華大學出版社，2007.