AJAX技術(shù)讓W(xué)eb信息系統(tǒng)的頁面更輕便

張治平

摘 要 隨著網(wǎng)頁內(nèi)容的豐富及不斷擴(kuò)大的網(wǎng)絡(luò)訪問需求，在訪問速度以及網(wǎng)頁效果方面要求下，傳統(tǒng)的Web頁面技術(shù)越來越顯得不足，表單form、JS、CSS越來越顯其不足。AJAX便是這種環(huán)境下應(yīng)用而生，AJAX與JavaScript、制作動態(tài)網(wǎng)站的程序語言結(jié)合在一起使得網(wǎng)站的頁面更加友好、更加輕便、用戶使用的體驗(yàn)感更加好。

關(guān)鍵詞 AJAX技術(shù)；局部頁面交互；頁面輕便；用戶體驗(yàn)好

中圖分類號 TP3 文獻(xiàn)標(biāo)識碼 A 文章編號 1674-6708（2017）201-0099-02

1 傳統(tǒng)信息系統(tǒng)頁面與Web服務(wù)器交互時存在的不足

傳統(tǒng)網(wǎng)頁開發(fā)用戶與服務(wù)器進(jìn)行交互是先讓用戶在form表單中輸入數(shù)據(jù)，然后向網(wǎng)頁服務(wù)器提交表單并發(fā)出一個交互請求，此交互請求可能是數(shù)據(jù)查詢、數(shù)據(jù)更新等操作。當(dāng)服務(wù)器收到用戶從客戶端發(fā)送過來的處理請求后，將會做出相關(guān)處理后給用戶客戶端返回一個新的站點(diǎn)頁面。這樣做法會浪費(fèi)很多帶寬，因?yàn)樵谇昂髢蓚€站點(diǎn)頁面中的絕大部分HTML代碼都是完全相同。因?yàn)槊看斡脩粼诳蛻舳伺c服務(wù)器的交互都需要向服務(wù)器發(fā)送請求，用戶請求的響應(yīng)時間不但依賴于服務(wù)器的響應(yīng)快慢、還依賴于網(wǎng)絡(luò)帶寬等因素。采用傳統(tǒng)技術(shù)讓網(wǎng)頁與服務(wù)器進(jìn)行交互有如下幾個缺點(diǎn)。

1）浪費(fèi)帶寬。本來網(wǎng)頁中只需要一部分內(nèi)容、部分頁面需要與服務(wù)器交互，局部更新。但是傳統(tǒng)做法需要整個頁面刷新，從服務(wù)器重新下載返回一個新的頁面，相當(dāng)于把整個頁面重新從服務(wù)器傳輸一次給客戶端；而第2次傳輸?shù)膬?nèi)容大部分都與第1次的相同，只是很小的部分有改動。單純通過傳統(tǒng)表單方式與服務(wù)器進(jìn)行交互會浪費(fèi)有限網(wǎng)絡(luò)帶寬與流量。

2）交互響應(yīng)速度慢。隨著信息化發(fā)展、多媒體技術(shù)的推廣，很多網(wǎng)頁都是圖文并茂，內(nèi)容豐富，一個頁面也不?。划?dāng)網(wǎng)絡(luò)速度相當(dāng)固定時，重新返回整個圖文并茂的頁面比只返回網(wǎng)頁中內(nèi)容發(fā)生了改變的一部分頁面速度會慢很多；并且每次用戶與服務(wù)器進(jìn)行交互時都需要向服務(wù)器發(fā)送請求，應(yīng)用的響應(yīng)時間還依賴于服務(wù)器的響應(yīng)時間。

3）用戶體驗(yàn)效果差。特別是執(zhí)行數(shù)據(jù)查詢動作時，在網(wǎng)頁頁面中發(fā)生改變的可能是把數(shù)據(jù)查詢的結(jié)果顯示出來，但傳統(tǒng)通過表單提交查詢請求，然后返回一個新的頁面的話，整個頁面會產(chǎn)生抖動感，用戶體驗(yàn)性差。

2 AJAX技術(shù)在Web頁面制作中的優(yōu)點(diǎn)

AJAX是英文字母“Asynchronous JavaScript”和“XML”縮寫，直譯是“異步JavaScript”和“XML”。AJAX技術(shù)一種比較新穎、成熟、實(shí)用的技術(shù)，也是一種創(chuàng)建快速交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。AJAX技術(shù)是通過在后臺與服務(wù)器進(jìn)行少量數(shù)據(jù)交換實(shí)現(xiàn)用戶在客戶端與服務(wù)器交互的需要。

1）AJAX 是一種用于創(chuàng)建快速動態(tài)網(wǎng)頁的技術(shù)。傳統(tǒng)的網(wǎng)頁如果不使用AJAX技術(shù)進(jìn)行更新內(nèi)容，必須重載整個網(wǎng)頁面；而采用AJAX技術(shù)與服務(wù)器交互只需向服務(wù)器發(fā)送請求并取回必需的那部分?jǐn)?shù)據(jù)。它通過借助SOAP或基于XML的web service應(yīng)用接口，并在客戶端結(jié)合JavaScript技術(shù)以處理從服務(wù)器返回的響應(yīng)；所以在服務(wù)器與客戶端瀏覽器之間交換的數(shù)據(jù)大大減少，不像傳統(tǒng)技術(shù)那樣需要重新把頁面?zhèn)鬏斠淮?，所以用戶在客戶端瀏覽器就能更快地看到系統(tǒng)的響應(yīng)。

2）異步傳輸模式。AJAX使用異步方式與服務(wù)器通信，即用戶不需要打斷在客戶端的操作，即可實(shí)現(xiàn)與服務(wù)器交互、數(shù)據(jù)傳遞等操作，具有更加快速的響應(yīng)能力。

3）可以減輕服務(wù)器負(fù)擔(dān)。AJAX可以把之前一部分需要在服務(wù)器上執(zhí)行的操作代碼轉(zhuǎn)移到客戶端執(zhí)行，利用客戶端電腦閑置的資源來處理，起到減輕服務(wù)器負(fù)擔(dān)并且節(jié)約網(wǎng)絡(luò)傳輸帶寬的作用；從而減輕Web服務(wù)器的負(fù)擔(dān)，AJAX技術(shù)與服務(wù)器交互的原則是“按需取數(shù)”，可以大大減少冗余請求，從而提供服務(wù)器響應(yīng)速度。

4）用戶體驗(yàn)效果好。采用AJAX的最大優(yōu)點(diǎn)，是能在不刷新、也不更新整個頁面的前提下維護(hù)局部數(shù)據(jù)，完成用戶與服務(wù)器交互過程。這使得Web應(yīng)用程序能更快捷地對用戶請求做出相應(yīng)的響應(yīng)動作，同時減少了在網(wǎng)絡(luò)上傳輸那些沒有改變過的數(shù)據(jù)，節(jié)約了網(wǎng)絡(luò)帶寬。有了AJAX這種技術(shù)，當(dāng)用戶在客戶端需要與服務(wù)器進(jìn)行交換時，AJAX可以快捷地執(zhí)行服務(wù)器操作，并悄悄地返回執(zhí)行操作結(jié)果，然后把執(zhí)行結(jié)果顯示在網(wǎng)頁中，整個網(wǎng)頁不會有抖動感。

5）Web應(yīng)用開發(fā)更容易。有了AJAX為Web應(yīng)用程序開發(fā)注入了新的魅力、新的活力，Web應(yīng)用開發(fā)效率更加高。比如要開發(fā)一個類似QQ聊天工具的Web應(yīng)用程序，不需要安裝額外應(yīng)用程序，直接在IE瀏覽器上執(zhí)行，只依靠傳統(tǒng)表單form、JS、CSS技術(shù)是比較難實(shí)現(xiàn)，而且開發(fā)效率很低。有了AJAX之后，比如檢測用戶有沒有新加的好友、有沒有新的信息、好友查找等功能實(shí)現(xiàn)起來很簡單，而且開發(fā)出來類似Web應(yīng)用程序用戶體驗(yàn)性很好。

3 使用AJAX技術(shù)讓W(xué)eb頁面更輕便、更精致、用戶體驗(yàn)效果更好

利用AJAX頁面不刷新技術(shù)與異步傳輸模式，可以開發(fā)出高效的、交互的、似桌面應(yīng)用軟件的Web應(yīng)用程序，隨著JS語言以及應(yīng)用開發(fā)框架技術(shù)成熟，AJAX技術(shù)將在Web應(yīng)用開發(fā)發(fā)揮越來越重要的角色，讓程序設(shè)計(jì)者能開發(fā)出更加輕便、更高品質(zhì)、更高技術(shù)含量的Web應(yīng)用系統(tǒng)。

1）AJAX解決問題的原理。AJAX通過與開發(fā)語言（如ASP.NET、PHP、JSP）結(jié)合起來，并嵌入Web頁面中，實(shí)現(xiàn)Web頁面的局部更新功能，把整個頁面中部分需要與服務(wù)器交換的功能代碼放置在AJAX代碼中，避免傳統(tǒng)才用表單form方法把整個頁面提交到服務(wù)器，然后把整個頁面重新加載，實(shí)現(xiàn)節(jié)省帶寬、網(wǎng)絡(luò)資源。

2）筆者使用ASP.NET進(jìn)行開發(fā)電子商務(wù)實(shí)訓(xùn)系統(tǒng)時，廣泛采用了AJAX技術(shù)處理用戶與系統(tǒng)的交換，比如商城用戶注冊時需要用戶進(jìn)行手機(jī)驗(yàn)證，筆者將用戶從服務(wù)器獲取“手機(jī)驗(yàn)證代碼”請求編寫成AJAX，在用戶點(diǎn)擊按鈕“獲取短信驗(yàn)證碼”后，頁面將會靜悄悄地通過AJAX與后臺服務(wù)器進(jìn)行交互，生成6位數(shù)字的手機(jī)驗(yàn)證以短信形式發(fā)送到用戶手機(jī)上，整個過程中用戶不需要進(jìn)行頁面跳轉(zhuǎn)、不需要頁面刷新、也不需要表單提交就在手機(jī)上收到了“手機(jī)短信驗(yàn)證碼”，頁面的手機(jī)短信驗(yàn)證碼功能實(shí)現(xiàn)過程如圖1所示。

3）筆者在開發(fā)商城用戶注冊過程頁面中，不但手機(jī)驗(yàn)證通過AJAX技術(shù)讓頁面從服務(wù)器ASP. NET動態(tài)腳本以實(shí)現(xiàn)獲??；本頁面中當(dāng)用戶輸入手機(jī)號碼完畢后頁面則馬上通過JavaScript（簡稱JS）觸發(fā)AJAX，將發(fā)送http請求到服務(wù)器驗(yàn)證輸入的手機(jī)號碼是否被使用過，服務(wù)器收到請求后調(diào)用ASP.NET動態(tài)腳本到數(shù)據(jù)庫中查找此手機(jī)號碼是否被注冊過，把處理結(jié)果以響應(yīng)形式返回給客戶端，若被使用發(fā)出警告提醒用戶輸入別的手機(jī)號碼，AJAX整個工作過程如圖2所示。

4）AJAX能讓用戶與服務(wù)器進(jìn)行交互時頁面顯得很輕便。AJAX能在不更新整個頁面的情況，與服務(wù)器進(jìn)行數(shù)據(jù)交換，比如在修改商城系統(tǒng)用戶密碼時，采用傳統(tǒng)技術(shù)提交修改用戶密碼頁面時，用監(jiān)測工具可測出加載整個頁面的流量大概需要5KB，但用AJAX技術(shù)，只要傳輸密碼文本給服務(wù)器，不需要傳輸頁面圖片、表單、表格等頁面數(shù)據(jù)，僅需要0.3KB流量就能快速地完成與遠(yuǎn)端服務(wù)器的交互，實(shí)現(xiàn)客戶端與服務(wù)器實(shí)現(xiàn)精準(zhǔn)交互。AJAX讓用戶在客戶端與服務(wù)器交互效率提高、服務(wù)器反饋及時、用戶體驗(yàn)效果更好。

4 結(jié)論

本文分析了傳統(tǒng)網(wǎng)站開發(fā)技術(shù)存在的一些不足，以及利用AJAX技術(shù)進(jìn)行Web應(yīng)用開發(fā)的原理和優(yōu)勢。AJAX技術(shù)實(shí)現(xiàn)了客戶端瀏覽器與Web服務(wù)器之間，在不打斷用戶操作的情況下，采用使用異步方式傳輸數(shù)據(jù)，同時能夠避免在網(wǎng)絡(luò)上頻繁地、重復(fù)地傳輸那些沒有更新的數(shù)據(jù)信息。從本文論述可知，AJAX技術(shù)能讓W(xué)eb應(yīng)用程序代碼更加精簡、界面更加友好、用戶與信息系統(tǒng)進(jìn)行交互時頁面顯得更加輕便，增強(qiáng)了使用信息系統(tǒng)的舒適感。

參考文獻(xiàn)

[1]麥克勞夫林.深入淺出Ajax[M].南京：東南大學(xué)出版社，2006.

[2]李剛.基于J2EE的Ajax寶典[M].北京：電子工業(yè)出版社，2007.

[3]陳鋒敏，羅田，李穎智.Ajax原理與系統(tǒng)開發(fā)[M].北京：清華大學(xué)出版社，2009.endprint