摘要：本文主要探討Ajax技術(shù)在Web中的應(yīng)用原理、較傳統(tǒng)web應(yīng)用的優(yōu)勢等問題，并舉例說明用Ajax建立用戶登錄功能的實現(xiàn)方法。 　　關(guān)鍵詞：Ajax；JavaScript
　　中圖分類號：TP311 文獻標(biāo)識碼：A
　　
　　1 概述
　　
　　Ajax是一種新型的網(wǎng)頁交互技術(shù)。它允許在客戶端和服務(wù)器之間只傳輸少量的信息，避免了每次點擊都要重新下載頁面的等待，從而讓用戶得到更快的響應(yīng)和更及時的反饋。
　　在傳統(tǒng)的網(wǎng)站程序中，瀏覽器負(fù)責(zé)向服務(wù)器提交用戶請求，并處理服務(wù)器對請求的響應(yīng)。這使得用戶為了提交一點點數(shù)據(jù)都需要重新下載網(wǎng)頁。而網(wǎng)頁的頻繁刷新不僅使用戶等待響應(yīng)的時間變長，而且更容易導(dǎo)致用戶的誤操作。
　　Ajax模型利用中間層來解決這一問題，即Ajax引擎（Ajax Engine），用它來處理客戶端和服務(wù)器之間的通信。Ajax引擎使用JavaScript函數(shù)實現(xiàn)，只有當(dāng)需要處理客戶端與服務(wù)器間通信的時候才調(diào)用它。與傳統(tǒng)模型的最大不同是，Ajax模型的處理過程是異步的，不需要等到響應(yīng)到達后才繼續(xù)執(zhí)行后續(xù)的代碼。
　　
　　2 較傳統(tǒng)web應(yīng)用的優(yōu)勢
　　
　　2.1 Ajax技術(shù)圖示
　　
　　
　　
　　
　　
　　
　　
　　2.2 Ajax的技術(shù)優(yōu)勢
　　1．通訊采用異步模式，使網(wǎng)頁執(zhí)行的效率大大提高。例如，客戶端在向服務(wù)器端發(fā)出了查詢操作后，將立刻執(zhí)行查詢語句的下一條代碼，無須停下來等待服務(wù)器端的反饋結(jié)果。
　　2．優(yōu)化了瀏覽器和服務(wù)器間的傳輸，減少不必要的數(shù)據(jù)下載＜sup＞[1]＜/sup＞。傳統(tǒng)web應(yīng)用的基本過程是，先讓用戶填寫表單，在提交表單時向Web服務(wù)器發(fā)送一個請求。服務(wù)器端接收并處理請求，然后返回一個新的網(wǎng)頁。這樣的過程浪費了很多時間，因為在前后兩個頁面中，網(wǎng)頁代碼往往大部分是相同的。由于每次交互過程都需要向服務(wù)器端發(fā)送請求，網(wǎng)頁的響應(yīng)速度就依賴于服務(wù)器的響應(yīng)速度，這就導(dǎo)致了用戶的網(wǎng)頁界面響應(yīng)比本地程序的界面響應(yīng)要慢得多。
　　3．Ajax引擎在客戶端運行，并承擔(dān)一部分原本由服務(wù)器端處理的工作，從而減少服務(wù)器端的數(shù)據(jù)負(fù)載，進一步提升網(wǎng)絡(luò)交互的效率。Ajax應(yīng)用程序僅向服務(wù)器端發(fā)送并獲取交互所必需的數(shù)據(jù)，從而使服務(wù)器和瀏覽器間交換的數(shù)據(jù)大大減少，用戶就能看到更快響應(yīng)的應(yīng)用過程。另一方面，由于很多的處理工作能在客戶端上完成，所以也縮短了服務(wù)器的處理時間。
　　
　　3 用Ajax實現(xiàn)用戶登錄功能
　　
　　3.1 建立用戶信息表
　　建立存儲用戶信息的數(shù)據(jù)庫表users表，其中包含3個屬性，分別是序號xuhao、用戶名xingming和密碼mima。以下為創(chuàng)建此表的SQL語句：
　　create table users （xuhao int primary key unique not null， xingming varchar（50） not null， mima varchar（50） not null
　　3.2 服務(wù)器端代碼
　　用戶登錄門戶網(wǎng)站的過程是：客戶端代碼先向服務(wù)器端發(fā)送一個請求，在請求中傳遞用戶的身份信息。服務(wù)器端獲取到這一請求，并要確定此身份信息是否正確。如果正確，就開始創(chuàng)建主頁；如果身份信息不正確，就給客戶端頁面發(fā)回出錯消息。
　　以Java語言為例，可用了servlet程序封裝所有與服務(wù)器端的交互代碼。利用一個過濾器來檢查User對象是否己經(jīng)保存在會話中。如果是，就接受；否則將根據(jù)請求中提供的用戶名和密碼來做身份驗證。如果接受，請求就會繼續(xù)傳遞到servlet程序中；不然就返回一條出錯消息。以下代碼封裝了出錯消息的JavaScript語句：
　　public static String getLoginError （ ） {
　　StringBuffer jsBuf=new StringBuffer （ ）
　　. append（" document.getElementByld （"spanProcessing"） \\n " ）
　　. append （" . innerHTML=" ）
　　. append （" "姓名和密碼不正確！"； \\n " ） ；
　　return jsBuf . tostring （ ） ；
　　}
　　服務(wù)器端從請求中取出用戶名和密碼，然后訪問數(shù)據(jù)庫尋找匹配的記錄。如果找到匹配此用戶信息的記錄，會返回一個user對象的實例，然后將其保存在會話中。當(dāng)后續(xù)再有請求時，就不需要再發(fā)送用戶名和密碼了。此方法的優(yōu)點是，使用戶非常容易執(zhí)行注銷操作，只需將User 實例從會話中刪除即可。以下為User 對象的定義代碼：
　　//User.java
　　public class User {
　　private int xuhao=-1 ；
　　private String xingming=null ；
　　public User （ int xuhao ， String xingming ） {
　　Super （ ） ；
　　this.xuhao=xuhao ；
　　this.xingming=xingming ；
　　}
　　public int getXuhao （ ） { return xuhao ； }
　　public String getXingming （ ）｛return xingming ； }
　　}
　　3.3 客戶端登錄頁
　　客戶端登錄頁由兩部分組成。一部分是動態(tài)網(wǎng)頁的HTML代碼，另一部分是Ajax（JavaScript）代碼，用來把請求發(fā)送到服務(wù)器端，并且要能處理響應(yīng)。JavaScript語言中的Eval （ ）方法可將傳遞給它的字符串作為JavaScript代碼來執(zhí)行。如果字符串中包含一個變量名，它就創(chuàng)建這個變量。如果Eval （ ）的輸入?yún)��?shù)包含一個函數(shù)調(diào)用，它就執(zhí)行這個函數(shù)。需要注意的是，雖然Eval （ ）方法功能十分強大，但如果要做的操作過于復(fù)雜，該方法的性能可能會受到影響。以下為網(wǎng)頁的HTML 代碼：
　�。糵orm name=" Form1 " ＞
　　＜div id =" header " ＞
　�。約pan id =" login " ＞
　　姓名：
　　＜input type=" text " name =" xingming " ＞
　�。糱r＞密碼：
　�。糹nput type =" mima " name=" mima " ＞
　�。糱r＞
　�。約pan id =" spanProcessing " ＞＜/span＞
　　＜input type=" submit " name=" btnsub " value =" 登錄 " onclick=" loginreqrest（） " ＞
　�。�/span＞
　　＜span id =" sloganText " ＞提示信息＜/span＞
　�。�/div＞
　　＜div id =" defaultContent " ＞
　�。紁＞網(wǎng)頁中的其他內(nèi)容＜/p＞
　　＜/div＞
　�。糳iv id =" divSettings " class=" hidden " ＞＜/div＞
　�。�/form＞
　　代碼中的onclick 事件用來將數(shù)據(jù)提交到服務(wù)器端，通過調(diào)用loginreqrest （ ） 函數(shù)啟動Ajax 請求。為美化頁面，可在網(wǎng)頁上使用一個CSS規(guī)則。例如下列代碼，在文檔的head 標(biāo)簽中添加一個內(nèi)嵌的style標(biāo)簽，用來改變表單顏色、字體、大小、位置、邊距等樣式：
　�。約tyle type=" text/css " ＞
　　html.body {margin ： 0px ； padding ： 0px ； height ： 100% ； }
　　#header {background-color：#c0c0c0；height：100px；border-bottom：1px solid black； font-weight：bold；}
　　#login { text- align ： right ； float ： right ； margin-top ： 15px ； margin-right ： 15px ； }
　　#sloganText { font-size ： 25px ； margin-left ： 15px ； line-height ： 100px ； }
　　＜/style＞
　　3.4 登錄代碼
　　Ajax的優(yōu)勢在于：在網(wǎng)頁點擊時，JavaScript提交代碼只發(fā)送用戶名和密碼到服務(wù)器，而無須提交整個頁面，這樣就能加快用戶瀏覽的速度。例如在本例中，引用一個外部的JavaScript文件net.js：
　　＜script type=" text/javascript " src=" net.js " ＞＜/script＞
　　net.js包含三個步驟的代碼。首先通知用戶：請求正在被處理；然后收集發(fā)送的信息；最后將請求信息發(fā)送到服務(wù)器。最后一步用函數(shù)LoginRequest實現(xiàn)，代碼如下：
　　function LoginRequest （ ） {
　　document. getElementByld （" spanProcessing " ） . innerHTML=" Verifying Credentials " ；
　　var url =" portalLogin. servlet " ；
　　var strName=document.Forml.xingming.value ；
　　var strPass=document. Forml. mima. value ；
　　var strParams=" user=" +strName+ " &pass=" +strPass
　　var loaderl=new net.ContentLoader（url ， Createscript ， null ， " POST " ， strParams ） ；
　　}
　　在發(fā)送信息之前，會顯示一條消息，告訴用戶點擊“登錄”按鈕的操作正在處理中。這樣可以防止用戶誤以為什么都沒發(fā)生而重復(fù)地點擊按鈕，造成系統(tǒng)錯誤。
　　網(wǎng)頁中提交的用戶名和密碼字段值會被放在一個字符串中，然后通過ContentLoader對象提交給服務(wù)器。當(dāng)服務(wù)器返回登錄成功信息時會調(diào)用createscript （ ） 函數(shù)，它負(fù)責(zé)處理由服務(wù)器端頁面返回的數(shù)據(jù)：
　　function Createscript （ ） {
　　strText=this . req . responseText ；
　　eval （ strText ） ；
　　}
　　responseText屬性中返回了包含JavaScript語句的字符串，然后使用eval （ ）函數(shù)執(zhí)行字符串。字符串中可以包含由LoginFilter產(chǎn)生的出錯消息，也可以包含允許用戶登錄時由SelectServlet返回的窗口創(chuàng)建代碼。
　　如果登錄成功，上述的請求信息就會被提交給主頁面，最后利用HTML創(chuàng)建下一個窗口。
　　
　　4 結(jié)論
　　
　　用Ajax技術(shù)建立的網(wǎng)站可讓用戶在訪問時體驗到瀏覽本機資源一樣的順暢感，大大減少了重復(fù)下載網(wǎng)頁資源的等待時間，并且能使網(wǎng)頁具有更好的視覺效果。但需要注意的是，使用Ajax技術(shù)前一定要有所規(guī)劃，計劃好哪些方面需要用到Ajax，否則會給網(wǎng)站的修改和維護帶來麻煩。另一方面，由于JavaScript語言的強大功能和語言缺陷，在編寫和調(diào)試時一定要多考慮怎樣規(guī)避潛在的執(zhí)行錯誤和病毒入侵。
　　
　　參考文獻
　　[1]Ryan Asleson， Nathaniel T.Schutta. Foundation of Ajax [M]. 北京：人民郵電出版社， 2006.

相關(guān)熱詞搜索：技術(shù) Ajax Web Ａｊａｘ技術(shù)在Ｗｅｂ�。玻�０中的應(yīng)用與實現(xiàn) web2 0技術(shù)的典型應(yīng)用 web2 0時代的典型應(yīng)用