鄒夢(mèng)麗　劉小勇

摘 要： 遵循AJAX技術(shù)的基本原理，創(chuàng)建了一個(gè)簡(jiǎn)單的異步引用方法，并給出登錄實(shí)例來(lái)說(shuō)明如何實(shí)現(xiàn)該方法的引用，減少代碼冗余。主要闡述了通過(guò)創(chuàng)建方法，并引用方法到不同Web應(yīng)用程序中，實(shí)現(xiàn)了代碼的優(yōu)化。

關(guān)鍵詞： AJAX； XML Http請(qǐng)求； 異步引用； 登錄實(shí)例； 創(chuàng)建方法

中圖分類號(hào)：TP311.1 文獻(xiàn)標(biāo)志碼：A 文章編號(hào)：1006-8228（2014）03-33-03

0 引言

AJAX是Web應(yīng)用的一種新方法。它使客戶端能在后臺(tái)訪問(wèn)服務(wù)器并取回用戶所需數(shù)據(jù)，從而避免了整個(gè)頁(yè)面的刷新。這為交互較多、頻繁讀數(shù)據(jù)的Web應(yīng)用提供了一個(gè)很好的解決方案[1]，因此得到了廣泛的應(yīng)用。

1 AJAX的工作原理

AJAX是由Adaptive Path公司的Jesse James Garrett命名的，是Asynchronous JavaScript and XML的縮寫(xiě)，即異步 JavaScript和XML[2]。它并不是一門新的語(yǔ)言或技術(shù)，本質(zhì)上只是將已有的多種技術(shù)，按一定的方式組合在一起，共同協(xié)作發(fā)揮出更加強(qiáng)大的作用，它主要用于動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)[3]。

基于AJAX的Web應(yīng)用不同于傳統(tǒng)的Web應(yīng)用，傳統(tǒng)的Web應(yīng)用通常是由用戶發(fā)出一個(gè)HTTP請(qǐng)求到Web服務(wù)器，并將結(jié)果發(fā)送回客戶端進(jìn)行顯示。這是一種單線程的處理方式。而基于AJAX的Web應(yīng)用則在客戶端和Web服務(wù)器之間添加了—個(gè)通過(guò)JavaScript編寫(xiě)的中間層，即AJAX引擎，從而使得用戶操作與服務(wù)器響應(yīng)異步化。在不刷新整個(gè)頁(yè)面的前提下，用戶向服務(wù)器端發(fā)送HTTP請(qǐng)求，服務(wù)器端對(duì)客戶端發(fā)來(lái)的請(qǐng)求進(jìn)行處理后，將響應(yīng)發(fā)送給客戶端。客戶端再次利用 XMLHttpRequest對(duì)象接受服務(wù)端的響應(yīng)，并利用DOM將結(jié)果顯示給用戶[4～6]。整個(gè)通信過(guò)程是在后臺(tái)異步進(jìn)行的，不會(huì)中斷用戶當(dāng)前的操作。AJAX的Web應(yīng)用模型如圖1所示。

2 創(chuàng)建AJAX異步引用方法

AJAX技術(shù)的核心是JavaScript構(gòu)造的XML Http Request對(duì)象，而XML Http Request本身提供了一系列屬性和方法來(lái)向服務(wù)器發(fā)送異步的http請(qǐng)求。在服務(wù)器處理用戶請(qǐng)求的過(guò)程中，XML Http Request監(jiān)聽(tīng)服務(wù)器的狀態(tài)，并根據(jù)這些狀態(tài)指示JavaScript作相應(yīng)的處理[7]。當(dāng)服務(wù)器順利完成響應(yīng)用戶行為的動(dòng)作，并將響應(yīng)數(shù)據(jù)返回時(shí)，XML Http Request對(duì)象能夠回調(diào)響應(yīng)的處理函數(shù)，完成AJAX的調(diào)用。

為保障業(yè)務(wù)流暢簡(jiǎn)潔，編寫(xiě)代碼要層次清楚、簡(jiǎn)短，并在基于JavaScript構(gòu)造的XML Http Request對(duì)象的工作原理上專門編寫(xiě)關(guān)于AJAX異步引用的方法[8]。此方法創(chuàng)建在名為tools工具箱的命名空間內(nèi)。關(guān)鍵代碼如下：

Var tools={

//創(chuàng)建區(qū)分瀏覽器（IE瀏覽器和非IE瀏覽器）的方法

isIE：function（） {

var str=window.navigator.userAgent； //判斷瀏覽器類型及版本

if（str.indexOf（“IE”>=0）） {

return true；

}；

return false； //indexOf（）方法若找不到相同字符則返回-1

}，

//創(chuàng)建XMLHttpRequest對(duì)象，使用HTTP方法獲取HTTP對(duì)象

getHttp：function（） {

if （tools.isIE（）） {

//IE系列獲取HTTP對(duì)象

return new ActiveXObject（"Microsoft.XMLHTTP"）；

}；

//非IE系列獲取HTTP對(duì)象

return new XMLHttpRequest（）；

}，

//HTTP的GET方法

getHttpReq：function（url，fun） {

var async=true； //異步交互的方式

var http=tools.getHttp（）；

//發(fā)送地址，使用時(shí)間戳解決緩存問(wèn)題，保證每次發(fā)送的地址不同

If（url.indexOf（“？”）>=0） {

url+=”&t=”+（new Date（））.getTime（）；

}；

If（url.indexOf（“？”）<0） {

url+=”？t=”+（new Date（））.getTime（）；

}；

//設(shè)置發(fā)送方式，數(shù)據(jù)傳輸方式為GET，false=同步

http.open（“GET”，url，async）；

//定義服務(wù)器處理完成之后的回調(diào)函數(shù)

If（async） {

//對(duì)指定狀態(tài)變化時(shí)的事件句柄定義相應(yīng)方法

http.onreadystatechange=function（） {

if（http.readyState==”4”） { //當(dāng)前狀態(tài)4=完成

if（http.ststus==”200”） {

//服務(wù)器運(yùn)行狀態(tài)，其中200=服務(wù)器執(zhí)行成功

fun（http.responseText）； //服務(wù)器運(yùn)行狀態(tài)的說(shuō)明文字

return；

}；

fun（“Service error”+http.status）； //服務(wù)器執(zhí)行不成功則報(bào)錯(cuò)

}；

}；

}；

//發(fā)送

http.send（null）； //對(duì)于GET方式傳輸小規(guī)模數(shù)據(jù)，無(wú)需傳遞參數(shù)，固設(shè)為null

}；

3 AJAX異步引用方法應(yīng)用實(shí)例

下面給出一個(gè)簡(jiǎn)單的登錄實(shí)例來(lái)簡(jiǎn)述AJAX異步方法引用的應(yīng)用。單擊登錄按鈕，無(wú)須頁(yè)面提交，就會(huì)實(shí)現(xiàn)數(shù)據(jù)驗(yàn)證[9]。

前臺(tái)頁(yè)面JavaScript核心設(shè)計(jì)代碼如下：

var _login={

//用戶登錄業(yè)務(wù)邏輯1-驗(yàn)證數(shù)據(jù)

valiLogin$1：function（） {

//獲取帳號(hào)

var access=_login.$（"access"）； // access為頁(yè)面獲取賬號(hào)框的id

access=access.value； //獲取用戶輸入的帳號(hào)值

//判斷數(shù)據(jù)

if（access.length<=0） {

_login.disWarn（"用戶名不能為空"）；

//引用空間里創(chuàng)建的錯(cuò)誤提示方法

return；

}；

//錯(cuò)誤提示方法

disWarn：function（str） {

str.style.color="red"；

}，

……

//發(fā)送數(shù)據(jù)，將從前臺(tái)獲取到的賬號(hào)和密碼值傳入后臺(tái)校對(duì)

_login.userLoginSend（{

"userLoginAccess"：access，

"userLoginPwd"：pwd

}）；

}

……

//數(shù)據(jù)層 （傳輸HTTP）

//用戶登錄-委托

userLoginAction：{

action：false，

name：""，

fun：""

}，

//用戶登錄-發(fā)送到后臺(tái)asp獲取數(shù)據(jù)

userLoginSend：function（obj） {

var url="./ajax.asp"；

url+="？userLoginAccess="+obj.userLoginAccess；

url+="&userLoginPwd="+obj.userLoginPwd；

url+="&action=login"；

tools.getHttpReq（url，_login.userLoginOk）； //應(yīng)用tools命名

空間里的異步通信get方式

}，

//用戶登錄-返回

userLoginOk：function（json） {

if（ _login.userLoginAction.action ） {

_login.userLoginAction.action=false；

window[_login.userLoginAction.name]

[_login.userLoginAction.fun]（json）；

return true；

}；

return false；

}，

……

}；

上述實(shí)例中的數(shù)據(jù)層引用了tools命名空間里的AJAX異步通信的get方式。當(dāng)遇到不同Web應(yīng)用程序的不同功能時(shí)，都可以調(diào)用該方法[10]。當(dāng)項(xiàng)目工程龐大并且功能錯(cuò)綜復(fù)雜時(shí)，通過(guò)調(diào)用tools工具里的AJAX異步引用方法可以實(shí)現(xiàn)減少代碼的冗余，降低相同代碼的重復(fù)率。

如圖3所示，當(dāng)用戶欲進(jìn)入登錄系統(tǒng)行使相應(yīng)的權(quán)限時(shí)，需輸入驗(yàn)證信息。輸入的驗(yàn)證信息與后臺(tái)數(shù)據(jù)庫(kù)中信息相同則登錄成功。否則當(dāng)用戶輸入的信息不符合網(wǎng)絡(luò)安全規(guī)定時(shí)，提醒用戶輸入的信息有誤，其頁(yè)面如圖2所示。

圖2 用戶輸入數(shù)據(jù)驗(yàn)證不通過(guò)

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

AJAX之所以近年來(lái)大規(guī)模地投入應(yīng)用，在于它打破了使用頁(yè)面重載的慣例技術(shù)組合，可以在不中斷交互流程的情況下，重新加載Web頁(yè)面，對(duì)網(wǎng)頁(yè)進(jìn)行局部刷新，從而實(shí)現(xiàn)動(dòng)態(tài)更新和流暢舒適的交互用戶體驗(yàn)[14]。從本文所演示的登錄實(shí)例可見(jiàn)，如果能將AJAX技術(shù)合理簡(jiǎn)單地創(chuàng)建成方法，再引用到不同Web應(yīng)用程序中，不僅整體代碼層次清楚簡(jiǎn)練，而且當(dāng)有需要多次調(diào)用AJAX異步調(diào)用方法時(shí)，代碼量可大大縮短。

圖3 用戶登錄成功圖

參考文獻(xiàn)：

[1] 向春，沈建新.AJAX核心技術(shù)解析[J].信息技術(shù)名，2007.36（2）：

79-81

[2] Jesse James Garrett.Ajax： A new approach to web Applications.

http：//www.adaptivepath.com/publications/essays/archives/000385.php.2005.

[3] 張俊妍.AJAX技術(shù)在動(dòng)態(tài)網(wǎng)站開(kāi)發(fā)中的應(yīng)用研究[J].現(xiàn)代計(jì)算機(jī)，

2011.2：62-63

[4] 王義勇，何月順.AJAX的原理及其在Web開(kāi)發(fā)中的應(yīng)用[J].科技廣

場(chǎng)，2006.7：66-68

[5] 田原.基于AJAX的教學(xué)Web應(yīng)用[J].遼寧工程技術(shù)大學(xué)（自然科學(xué)

版），2007.5：737-739

[6] 陳瓊.AJAX老技術(shù)，新外衣[J].互聯(lián)網(wǎng)周刊，2005.8（27）：52-53

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

（3）：415-418

[8] 吳學(xué)義，黃永平，郭娜等.基于AJAX的B/S架構(gòu)及應(yīng)用[J].吉林大學(xué)

學(xué)報(bào)（信息科學(xué)版），2007.25（3）：314-318

[9] 柯自聰.Ajax開(kāi)發(fā)精要[M].電子工業(yè)出版社，2006.

[10] 王義勇，何月順.AJAX的原理及其在Web開(kāi)發(fā)中的應(yīng)用[J].科技廣

場(chǎng)，2006.7：66-68