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

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