基于AJAX技術創建的異步方法應用研究

鄒夢麗　劉小勇

摘 要： 遵循AJAX技術的基本原理，創建了一個簡單的異步引用方法，并給出登錄實例來說明如何實現該方法的引用，減少代碼冗余。主要闡述了通過創建方法，并引用方法到不同Web應用程序中，實現了代碼的優化。

關鍵詞： AJAX； XML Http請求； 異步引用； 登錄實例； 創建方法

中圖分類號：TP311.1 文獻標志碼：A 文章編號：1006-8228（2014）03-33-03

0 引言

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

1 AJAX的工作原理

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

基于AJAX的Web應用不同于傳統的Web應用，傳統的Web應用通常是由用戶發出一個HTTP請求到Web服務器，并將結果發送回客戶端進行顯示。這是一種單線程的處理方式。而基于AJAX的Web應用則在客戶端和Web服務器之間添加了—個通過JavaScript編寫的中間層，即AJAX引擎，從而使得用戶操作與服務器響應異步化。在不刷新整個頁面的前提下，用戶向服務器端發送HTTP請求，服務器端對客戶端發來的請求進行處理后，將響應發送給客戶端。客戶端再次利用 XMLHttpRequest對象接受服務端的響應，并利用DOM將結果顯示給用戶[4～6]。整個通信過程是在后臺異步進行的，不會中斷用戶當前的操作。AJAX的Web應用模型如圖1所示。

2 創建AJAX異步引用方法

AJAX技術的核心是JavaScript構造的XML Http Request對象，而XML Http Request本身提供了一系列屬性和方法來向服務器發送異步的http請求。在服務器處理用戶請求的過程中，XML Http Request監聽服務器的狀態，并根據這些狀態指示JavaScript作相應的處理[7]。當服務器順利完成響應用戶行為的動作，并將響應數據返回時，XML Http Request對象能夠回調響應的處理函數，完成AJAX的調用。

為保障業務流暢簡潔，編寫代碼要層次清楚、簡短，并在基于JavaScript構造的XML Http Request對象的工作原理上專門編寫關于AJAX異步引用的方法[8]。此方法創建在名為tools工具箱的命名空間內。關鍵代碼如下：

Var tools={

//創建區分瀏覽器（IE瀏覽器和非IE瀏覽器）的方法

isIE：function（） {

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

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

return true；

}；

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

}，

//創建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（）；

//發送地址，使用時間戳解決緩存問題，保證每次發送的地址不同

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

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

}；

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

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

}；

//設置發送方式，數據傳輸方式為GET，false=同步

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

//定義服務器處理完成之后的回調函數

If（async） {

//對指定狀態變化時的事件句柄定義相應方法

http.onreadystatechange=function（） {

if（http.readyState==”4”） { //當前狀態4=完成

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

//服務器運行狀態，其中200=服務器執行成功

fun（http.responseText）； //服務器運行狀態的說明文字

return；

}；

fun（“Service error”+http.status）； //服務器執行不成功則報錯

}；

}；

}；

//發送

http.send（null）； //對于GET方式傳輸小規模數據，無需傳遞參數，固設為null

}；

3 AJAX異步引用方法應用實例

下面給出一個簡單的登錄實例來簡述AJAX異步方法引用的應用。單擊登錄按鈕，無須頁面提交，就會實現數據驗證[9]。

前臺頁面JavaScript核心設計代碼如下：

var _login={

//用戶登錄業務邏輯1-驗證數據

valiLogin$1：function（） {

//獲取帳號

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

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

//判斷數據

if（access.length<=0） {

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

//引用空間里創建的錯誤提示方法

return；

}；

//錯誤提示方法

disWarn：function（str） {

str.style.color="red"；

}，

……

//發送數據，將從前臺獲取到的賬號和密碼值傳入后臺校對

_login.userLoginSend（{

"userLoginAccess"：access，

"userLoginPwd"：pwd

}）；

}

……

//數據層 （傳輸HTTP）

//用戶登錄-委托

userLoginAction：{

action：false，

name：""，

fun：""

}，

//用戶登錄-發送到后臺asp獲取數據

userLoginSend：function（obj） {

var url="./ajax.asp"；

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

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

url+="&action=login"；

tools.getHttpReq（url，_login.userLoginOk）； //應用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；

}，

……

}；

上述實例中的數據層引用了tools命名空間里的AJAX異步通信的get方式。當遇到不同Web應用程序的不同功能時，都可以調用該方法[10]。當項目工程龐大并且功能錯綜復雜時，通過調用tools工具里的AJAX異步引用方法可以實現減少代碼的冗余，降低相同代碼的重復率。

如圖3所示，當用戶欲進入登錄系統行使相應的權限時，需輸入驗證信息。輸入的驗證信息與后臺數據庫中信息相同則登錄成功。否則當用戶輸入的信息不符合網絡安全規定時，提醒用戶輸入的信息有誤，其頁面如圖2所示。

圖2 用戶輸入數據驗證不通過

4 結束語

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

圖3 用戶登錄成功圖

參考文獻：

[1] 向春，沈建新.AJAX核心技術解析[J].信息技術名，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技術在動態網站開發中的應用研究[J].現代計算機，

2011.2：62-63

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

場，2006.7：66-68

[5] 田原.基于AJAX的教學Web應用[J].遼寧工程技術大學（自然科學

版），2007.5：737-739

[6] 陳瓊.AJAX老技術，新外衣[J].互聯網周刊，2005.8（27）：52-53

[7] 陸海晶，劉萬軍.基于Ajax的Web應用技術的研究與實現，2007.7

（3）：415-418

[8] 吳學義，黃永平，郭娜等.基于AJAX的B/S架構及應用[J].吉林大學

學報（信息科學版），2007.25（3）：314-318

[9] 柯自聰.Ajax開發精要[M].電子工業出版社，2006.

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

場，2006.7：66-68