摘 要：給出一種Web開發(fā)中交互性設(shè)計(jì)的新方法，使用綜合Javascript，XMLHttpRequest，XML，CSS，HTML的Ajax技術(shù)進(jìn)行Web應(yīng)用開發(fā)。與傳統(tǒng)的Web開發(fā)技術(shù)相比較，Ajax技術(shù)使得客戶端與服務(wù)器通訊時(shí)間縮短，服務(wù)器響應(yīng)后可以在不刷新整個(gè)頁(yè)面的情況下獲取數(shù)據(jù)，用戶響應(yīng)較快，從而適應(yīng)交互性強(qiáng)的應(yīng)用需求。實(shí)踐表明，Ajax技術(shù)有效提高Web應(yīng)用的交互能力。

關(guān)鍵詞：Ajax；XMLHttpRequest；Javascript；異步交互；擴(kuò)展超媒體標(biāo)記語(yǔ)言(XML)

中圖分類號(hào)：TP393 文獻(xiàn)標(biāo)識(shí)碼：B

文章編號(hào)：1004-373X(2008)06-093-02

Research and Application of Ajax Technique

WANG Kun，F(xiàn)ANG Ming

(Computer College，Xi′an Shiyou University，Xi′an，710065，China)

Abstract：This paper presents the development of an interactive Web design new method，which uses Ajax technology，including Javascript，XMLHttpRequest，XML，CSS，HTML，to develop Web applications.Compared with the traditional Web development technology，Ajax technology makes the client and server communications time shorter，responses faster，and accesses the data from server without refreshing the entire page，thereby meet demand of the highly interactive applications.In practice，Ajax technology effectively improves the interactive capabilities of Web application.

Keywords：Ajax；XMLHttpRequest；Javascript；asynchronous interaction；XML

Ajax(Asynchronous Javascrip t and XML，異步Javascrip t和XML)由Jess James Garrett在論文 “A new Approach to Web Application ”中提出，Ajax不是什么新技術(shù)，他是通過對(duì)Javascript，XHTML，CSS，DOM，XML，XMLHttpRequest等幾種技術(shù)的全新組合使用，顛覆了傳統(tǒng)Web應(yīng)用在用戶交互方面的模式。傳統(tǒng)的Web開發(fā)中與服務(wù)器通訊往往等待時(shí)間較長(zhǎng)，服務(wù)端響應(yīng)則需要刷新整個(gè)Web客戶頁(yè)面，網(wǎng)絡(luò)上數(shù)據(jù)傳輸較高，用戶響應(yīng)較慢。使用Ajax開發(fā)Web應(yīng)用后，則允許瀏覽器采用異步方式與服務(wù)器通信并且無(wú)需刷新當(dāng)前頁(yè)面。

1 Ajax技術(shù)概述

Ajax技術(shù)是一種創(chuàng)建Web開發(fā)的技術(shù)，Ajax并非新的技術(shù)而是一種創(chuàng)新，他使用以下技術(shù)：使用擴(kuò)展超媒體標(biāo)記語(yǔ)言( eXtended Hyper2textMarkup Language，XHTML)和級(jí)聯(lián)樣式單(Cascading Style Sheet，CSS)創(chuàng)建Web應(yīng)用的UI；使用Javascript與XHTML文檔對(duì)象模型(Document ObjectModel，DOM)實(shí)現(xiàn)動(dòng)態(tài)顯示用于交互；使用XMLHttpRequest(非IE瀏覽器中的Javascript中的對(duì)象或是IE瀏覽器中的ACTIVEX對(duì)象)與服務(wù)器異步通信；最后用JavaScript綁定和處理所有數(shù)據(jù)。

在這里XMLHttpRequest是重點(diǎn)。

在傳統(tǒng)Web應(yīng)用中，用戶通過圖形用戶界面觸發(fā)一個(gè)HTTP請(qǐng)求，服務(wù)器處理用戶請(qǐng)求后，生成一個(gè)新的頁(yè)面發(fā)送給客戶端。每次客戶端請(qǐng)求時(shí)必須等待服務(wù)器響應(yīng)請(qǐng)求并發(fā)送新頁(yè)面到客戶端后，用戶才能再次進(jìn)行操作，造成空閑等待。另外，即便是很簡(jiǎn)單的通信也會(huì)造成服務(wù)器更新整個(gè)頁(yè)面，嚴(yán)重浪費(fèi)網(wǎng)絡(luò)資源。采用Ajax技術(shù)開發(fā)Web應(yīng)用時(shí)，允許客戶和服務(wù)器采用靈活的通訊方式，即可以采用異步或同步方式與服務(wù)器通訊，并在服務(wù)器處理請(qǐng)求后不必重新刷新整個(gè)頁(yè)面而是根據(jù)返回的數(shù)據(jù)使用JavaScript和DOM技術(shù)有選擇的更新部分頁(yè)面。

2 Ajax技術(shù)原理

Ajax本質(zhì)上也是遵循請(qǐng)求/響應(yīng)模式，其基本處理流程是：對(duì)象初始化、發(fā)送請(qǐng)求、服務(wù)器接收、服務(wù)器返回、客戶端接收、修改客戶端頁(yè)面內(nèi)容，只不過這個(gè)過程可以是異步的。如圖1所示。

2.1 初始化對(duì)象并發(fā)出XMLHttpRequest請(qǐng)求

首先創(chuàng)建一個(gè)XMLHttpRequest(IE以Activex組件方式提供，firfox，sarfri提供一個(gè)javascript內(nèi)置對(duì)象)實(shí)例，他允許客戶端向服務(wù)器發(fā)出一個(gè)HTTP請(qǐng)求，由于各個(gè)瀏覽器對(duì)XMLHttpRequest對(duì)象的提供方式不同，我們需要編寫跨瀏覽器的初始化代碼：

var xmlHttp；

If(window.ActivexObject){

xmlHttp = new ActivexObject(“Microsoft.XMLHTTP”)；

}else if(window.XMLHttpRequest){

xmlHttp = new XMLHttpRequest()；

}

2.2 指定響應(yīng)處理函數(shù)

當(dāng)客戶端請(qǐng)求被服務(wù)段處理后會(huì)返回XML或JSON格式的數(shù)據(jù)，以便于客戶端處理服務(wù)段響應(yīng)，我們需要提供javascript處理函數(shù)，告訴XMLHttpRequest對(duì)象哪個(gè)函數(shù)會(huì)處理XMLHttpRequest對(duì)象狀態(tài)的改變，為此要把XMLHttpRequest對(duì)象的onreadystatechange屬性設(shè)置為指向javascript函數(shù)的指針。

xmlHttp.onreadystatechange = callback；//處理函數(shù)

function callback(){

}

2.3 發(fā)出HTTP請(qǐng)求

指定響應(yīng)處理函數(shù)后，開始向服務(wù)器發(fā)送請(qǐng)求。首先調(diào)用XMLHttpRequest對(duì)象的open方法發(fā)出指定的請(qǐng)求。Open方法有3個(gè)參數(shù)：第一個(gè)是指示所使用的方法(GET或POST等)；第二個(gè)是表示目標(biāo)的資源URL；最后一個(gè)是指示請(qǐng)求為異步或同步的布爾值。接著，調(diào)用XMLHttpRequest對(duì)象的send方法把請(qǐng)求發(fā)送到指定的資源。send()方法接受一個(gè)參數(shù)，通常是1個(gè)串或dom對(duì)象，這個(gè)參數(shù)作為請(qǐng)求體的一部分發(fā)送到目標(biāo)資源。向send()方法提供參數(shù)時(shí)，需確保open()函數(shù)指定的方法是POST，如果沒有數(shù)據(jù)作為請(qǐng)求體的一部分被發(fā)送，則使用1.。

xmlHttp.open(\"GET\"，\"server.jsp?name=a\"，true)；

xmlHttp.send(1)；

xmlHttp.open(\"POST\"，\"server.jsp\"，true)；

xmlHttp.send(\"name=a\")；

2.4 服務(wù)器處理請(qǐng)求并返回?cái)?shù)據(jù)

在服務(wù)器端，被請(qǐng)求的服務(wù)端程序解析請(qǐng)求參數(shù)后執(zhí)行業(yè)務(wù)邏輯，并將響應(yīng)序列化為XML或JSON格式數(shù)據(jù)后返回。

2.5 處理服務(wù)器響應(yīng)

服務(wù)端返回后，響應(yīng)函數(shù)首先檢查XMLHttpRequest對(duì)象的readyState狀態(tài)是否為4(4 表示服務(wù)器已經(jīng)傳回?cái)?shù)據(jù)信息，可以開始處理信息)；接下來(lái)需要判斷HTTP狀態(tài)碼是否為200(狀態(tài)碼200表示頁(yè)面正常)。以上2步驗(yàn)證后，開始執(zhí)行具體的業(yè)務(wù)處理代碼。

function callback(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

//處理代碼

} } }

3 基于Ajax技術(shù)實(shí)現(xiàn)自動(dòng)完成功能

自動(dòng)完成功能可以根據(jù)以往的信息填入新的信息，或是根據(jù)輸入信息提供建議，這是Web應(yīng)用中非常實(shí)用的功能。谷歌搜索建議就是一個(gè)自動(dòng)完成功能，他能根據(jù)用戶的輸入列出相近搜索條目的建議。本文實(shí)現(xiàn)了一個(gè)與其類似的功能。首先，在表單輸入框中輸入數(shù)據(jù)，執(zhí)行onkeyup事件請(qǐng)求。

findSuggestion()函數(shù)負(fù)責(zé)用戶請(qǐng)求，并定義調(diào)用函數(shù)callback()。代碼如下：

var url = \"SuggestionServlet?suggestion=\" + escape(suggestion.value)；

xmlHttp.open(\"GET\"，url，true)；

xmlHttp.onreadystatechange = callback；

提交表單數(shù)據(jù)后，服務(wù)器負(fù)責(zé)處理客戶端請(qǐng)求，查詢數(shù)據(jù)信息返回相近搜索條目，處理完畢后返回回調(diào)函數(shù)callback()需要用到的數(shù)據(jù)，本文采用XML序列化返回?cái)?shù)據(jù)，其中具體XML 的格式自定義。

中國(guó)移動(dòng)

中國(guó)銀行

中國(guó)工商銀行

…

\"；

客戶端接受到服務(wù)器傳來(lái)的數(shù)據(jù)后，調(diào)用回調(diào)函數(shù)callback()?；卣{(diào)函數(shù)中setSuggestions()函數(shù)負(fù)責(zé)解析返回的XML格式數(shù)據(jù)(xmlHttp.responseXML獲得服務(wù)器返回的數(shù)據(jù))，并繪制自動(dòng)完成區(qū)域與填充數(shù)據(jù)，clearSuggestions()函數(shù)負(fù)責(zé)在沒有新文檔返回時(shí)清除繪制的區(qū)域(setSuggestions() 和clearSuggestions()函數(shù)具體代碼省略)。

if (xmlHttp.readyState == 4) {

if (xmlHttp.status == 200) {

var name = xmlHttp.responseXML.getElementsByTagName(\"suggestion\")[0].firstChild.data；

setSuggestions(xmlHttp.responseXML.getElementsByTagName(\"suggestion\"))；

} else if (xmlHttp.status == 204){

clearSuggestions()；

}

}

4 結(jié) 語(yǔ)

Web開發(fā)中用戶體驗(yàn)一直是一個(gè)難以解決的問題，B/S應(yīng)用開發(fā)往往受到很多限制難以與桌面應(yīng)用交互能力匹敵，這嚴(yán)重制約了B/S應(yīng)用的發(fā)展，使得人們不得不使用桌面應(yīng)用來(lái)實(shí)現(xiàn)需要較高體驗(yàn)的應(yīng)用。Ajax 技術(shù)為B/S應(yīng)用開辟了一條新路，他平滑地實(shí)現(xiàn)與服務(wù)器的交互，增強(qiáng)用戶體驗(yàn)。該方法優(yōu)于以往傳統(tǒng)的Web開發(fā)技術(shù)，有著廣闊的應(yīng)用空間。

參考文獻(xiàn)

[1]Elliotte Rusty Harold.Java.語(yǔ)言與XML處理教程[M].劉文紅，譯.北京：電子工業(yè)出版社，2004.

[2]蘆東昕，李典蔚，柳長(zhǎng)安.基于AJAX和Servlet 的Web GIS 的研究與實(shí)現(xiàn)\\[J\\].計(jì)算機(jī)技術(shù)與發(fā)展，2007，17(3)：192-199.

[3]陸海晶，劉萬(wàn)軍.基于Ajax的Web應(yīng)用技術(shù)的研究與實(shí)現(xiàn)\\[J\\].2007，7(3)：415-418.

[4]敖麗敏，李林輝.基于AJAX的電力圖形系統(tǒng)的實(shí)現(xiàn)\\[J\\].電力系統(tǒng)自動(dòng)化，2007，31(9)：47-50.

作者簡(jiǎn)介 王 錕 男，1976年出生，四川營(yíng)山人，碩士研究生。管理信息系統(tǒng)與計(jì)算機(jī)網(wǎng)絡(luò)、數(shù)據(jù)庫(kù)、數(shù)據(jù)倉(cāng)庫(kù)。

方 明 男，1963年出生，湖南人，博士后，教授。研究方向?yàn)閿?shù)據(jù)倉(cāng)庫(kù)、數(shù)據(jù)庫(kù)、管理信息系統(tǒng)。