鄒夢麗　劉小勇

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

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

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

0 引言

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

1 AJAX的工作原理

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

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

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

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

為保障業(yè)務(wù)流暢簡潔，編寫代碼要層次清楚、簡短，并在基于JavaScript構(gòu)造的XML Http Request對象的工作原理上專門編寫關(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對象，使用HTTP方法獲取HTTP對象

getHttp：function（） {

if （tools.isIE（）） {

//IE系列獲取HTTP對象

return new ActiveXObject（"Microsoft.XMLHTTP"）；

}；

//非IE系列獲取HTTP對象

return new XMLHttpRequest（）；

}，

//HTTP的GET方法

getHttpReq：function（url，fun） {

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

var http=tools.getHttp（）；

//發(fā)送地址，使用時(shí)間戳解決緩存問題，保證每次發(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） {

//對指定狀態(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)的說明文字

return；

}；

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

}；

}；

}；

//發(fā)送

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

}；

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

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

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

var _login={

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

valiLogin$1：function（） {

//獲取帳號

var access=_login.$（"access"）； // access為頁面獲取賬號框的id

access=access.value； //獲取用戶輸入的帳號值

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

if（access.length<=0） {

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

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

return；

}；

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

disWarn：function（str） {

str.style.color="red"；

}，

……

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

_login.userLoginSend（{

"userLoginAccess"：access，

"userLoginPwd"：pwd

}）；

}

……

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

//用戶登錄-委托

userLoginAction：{

action：false，

name：""，

fun：""

}，

//用戶登錄-發(fā)送到后臺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í)，通過調(diào)用tools工具里的AJAX異步引用方法可以實(shí)現(xiàn)減少代碼的冗余，降低相同代碼的重復(fù)率。

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

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

4 結(jié)束語

AJAX之所以近年來大規(guī)模地投入應(yīng)用，在于它打破了使用頁面重載的慣例技術(shù)組合，可以在不中斷交互流程的情況下，重新加載Web頁面，對網(wǎng)頁進(jìn)行局部刷新，從而實(shí)現(xiàn)動態(tài)更新和流暢舒適的交互用戶體驗(yàn)[14]。從本文所演示的登錄實(shí)例可見，如果能將AJAX技術(shù)合理簡單地創(chuàng)建成方法，再引用到不同Web應(yīng)用程序中，不僅整體代碼層次清楚簡練，而且當(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ù)在動態(tài)網(wǎng)站開發(fā)中的應(yīng)用研究[J].現(xiàn)代計(jì)算機(jī)，

2011.2：62-63

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

場，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] 陸海晶，劉萬軍.基于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開發(fā)精要[M].電子工業(yè)出版社，2006.

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

場，2006.7：66-68