蔡志榮

（紹興職業(yè)技術(shù)學(xué)院，浙江 紹興 312000）

基于AJAX技術(shù)的WEB異步交互的探索與研究

蔡志榮

（紹興職業(yè)技術(shù)學(xué)院，浙江 紹興 312000）

AJAX是Web客戶端構(gòu)建技術(shù)，它面向異步消息通訊機(jī)制,利用它可以構(gòu)建動(dòng)態(tài)、快速、靈活的Web應(yīng)用程序。它不但能讓上網(wǎng)用戶有更好的體驗(yàn)，而且有效地減輕服務(wù)器和帶寬的壓力。本文將著重介紹AJAX的概念、工作原理，與傳統(tǒng)Web應(yīng)用模型進(jìn)行比較。

AJAX；異步交互；通訊

隨著互聯(lián)網(wǎng)的不斷發(fā)展和網(wǎng)絡(luò)各方面信息量的劇增，網(wǎng)絡(luò)通訊能力的不斷提高，如何使Web響應(yīng)更加靈敏，數(shù)據(jù)傳輸更加快捷，已成為當(dāng)今關(guān)注的熱點(diǎn)。應(yīng)用系統(tǒng)所采用的技術(shù)也由早期的C／S(Client／Server)模式向基于B／S(Browser／Server)的應(yīng)用模式進(jìn)行轉(zhuǎn)變。這種轉(zhuǎn)變避免了繁瑣的部署工作，體現(xiàn)了瘦客戶的開發(fā)理念，但同步交互方式也帶來客戶端響應(yīng)速度慢的問題，并且始終困擾著最終用戶?；贏JAX的Web技術(shù)改變?cè)械耐浇换楫惒浇换シ绞剑鬼撁嬖诤笈_(tái)按需獲取數(shù)據(jù)，這樣不僅節(jié)省了帶寬，更大大提升了用戶體驗(yàn)。

一、AJAX的概念

AJAX全稱為“Asynchronous JavaScript and XML”（異步JavaScript和XML），是指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用的網(wǎng)頁開發(fā)技術(shù)。它實(shí)際上是幾項(xiàng)技術(shù)按一定的方式組合在一起，在共同的協(xié)作中發(fā)揮各自的作用。這些技術(shù)包括Javascript、XHTML、CSS、DOM、XML、XSTL 及 XMLHttpRequest，在AJAX中，各種技術(shù)各司其職：使用XHTML和CSS進(jìn)行數(shù)據(jù)的標(biāo)準(zhǔn)化呈現(xiàn)；使用DOM實(shí)現(xiàn)動(dòng)態(tài)顯示和交互；使用XML和XSTL進(jìn)行數(shù)據(jù)交換與處理；使用XMLHttpRequest對(duì)象進(jìn)行異步數(shù)據(jù)讀??；使用Javascript綁定和處理所有數(shù)據(jù)。

AJAX技術(shù)的核心是JavaScript對(duì)象XMLHttpRequest。Web開發(fā)人員可以利用該對(duì)象在不刷新整個(gè)頁面的前提下，向服務(wù)器端發(fā)送請(qǐng)求；服務(wù)器端對(duì)客戶端發(fā)來的請(qǐng)求進(jìn)行處理后，將響應(yīng)發(fā)送給客戶端；客戶端再次利用XMLHttpRequest對(duì)象接受服務(wù)端的響應(yīng)，并利用DOM將結(jié)果顯示給用戶。這樣就可以像桌面應(yīng)用程序一樣，只同服務(wù)器進(jìn)行數(shù)據(jù)層面的交換，而不用每次都刷新界面，也不用每次將數(shù)據(jù)處理的工作提交給服務(wù)器來做，這樣既減輕了服務(wù)器的負(fù)擔(dān)又加快了響應(yīng)速度，縮短了用戶等候的時(shí)間。

二、AJAX的工作原理

在傳統(tǒng)的瀏覽器與服務(wù)器的交互方式中“采用同步方式”，由用戶觸發(fā)一個(gè)HTTP請(qǐng)求到服務(wù)器，服務(wù)器對(duì)其進(jìn)行處理后再返回一個(gè)新的Web頁到瀏覽器。每當(dāng)服務(wù)器處理客戶端提交的請(qǐng)求時(shí)，用戶都只能空閑等待，必須等到服務(wù)器把全部的數(shù)據(jù)傳輸完成后才能進(jìn)行下一項(xiàng)操作，并且哪怕只是一次很小的交互，只需從服務(wù)器端得到很簡單的一個(gè)數(shù)據(jù)，服務(wù)器都要返回一個(gè)完整的HTML頁作為響應(yīng)結(jié)果，用戶每次都要浪費(fèi)時(shí)間和帶寬去重新讀取整個(gè)頁面。

服務(wù)器的響應(yīng)時(shí)間由多方面因素共同決定，如服務(wù)器硬件性能、服務(wù)器軟件設(shè)置、網(wǎng)絡(luò)因素等。當(dāng)服務(wù)器正在處理或數(shù)據(jù)傳輸過程中，用戶只是在等待，如此就會(huì)讓用戶產(chǎn)生不好的體驗(yàn)，這種體驗(yàn)就會(huì)讓用戶在下次訪問時(shí)猶豫，從而可能失去用戶。此外，前后兩個(gè)頁面中的大部分HTML代碼往往是相同的，也就是大部分?jǐn)?shù)據(jù)信息已在客戶端，那就不需要再次從服務(wù)器中獲取，用戶只要從服務(wù)器中重新獲取新內(nèi)容即可，這樣不僅可以減少數(shù)據(jù)傳輸，也可以加快用戶數(shù)據(jù)的讀取。

現(xiàn)在使用的AJAX技術(shù)是將幾種成熟技術(shù)按一定的方式結(jié)合在一起，通過協(xié)作發(fā)揮各自作用，包括：使用XHTML和CSS標(biāo)準(zhǔn)化呈現(xiàn)；使用DOM實(shí)現(xiàn)動(dòng)態(tài)顯示和交互；使用XML和XSLT進(jìn)行數(shù)據(jù)交換與處理；使用XMLHttpRequest進(jìn)行異步數(shù)據(jù)讀取；用JavaS-cript綁定和處理所有數(shù)據(jù)。

AJAX需要一個(gè)穩(wěn)定、響應(yīng)及時(shí)的服務(wù)器向引擎發(fā)送內(nèi)容，作為必要的服務(wù)端處理邏輯，確保向AJAX引擎發(fā)送的數(shù)據(jù)格式是正確的。

AJAX的工作原理相當(dāng)于在用戶和服務(wù)器之間加了一個(gè)中間層AJAX引擎，從而實(shí)現(xiàn)用戶操作與服務(wù)器響應(yīng)的異步化。這樣把以前的一些服務(wù)器負(fù)擔(dān)的工作轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來處理，減輕服務(wù)器和帶寬的負(fù)擔(dān)，從而達(dá)到節(jié)約ISP的空間及帶寬租用成本的目的。但并不是所有的用戶請(qǐng)求都提交給服務(wù)器，像一些數(shù)據(jù)驗(yàn)證和數(shù)據(jù)處理等都交給AJAX引擎自己來做，只有確定需要從服務(wù)器讀取新數(shù)據(jù)時(shí)再由AJAX引擎代為向服務(wù)器提交請(qǐng)求。傳統(tǒng)的Web應(yīng)用程序模型和基于AJAX的Web應(yīng)用模型分別所示。

三、AJAX的優(yōu)點(diǎn)分析

基于AJAX技術(shù)的WEB異步交互系統(tǒng)相比于傳統(tǒng)的模式的系統(tǒng)具有以下一些優(yōu)勢(shì)：

1.減輕服務(wù)器的負(fù)擔(dān)和減少網(wǎng)絡(luò)流量

AJAX的原則是“按需取數(shù)據(jù)”，可以最大程度地減少冗余請(qǐng)求，減少相同且不必要的數(shù)據(jù)傳輸，減少響應(yīng)對(duì)服務(wù)器造成的負(fù)擔(dān)?！鞍葱枞?shù)據(jù)”的意思就是根據(jù)客戶需求，用什么數(shù)據(jù)就取什么數(shù)據(jù)、用多少數(shù)據(jù)就取多少數(shù)據(jù)，不會(huì)有數(shù)據(jù)的冗余和浪費(fèi)，減少了數(shù)據(jù)下載總量，而且更新頁面時(shí)不用重載全部內(nèi)容，只更新需要更新的那部分，既縮短了用戶等待時(shí)間，也減少了資源的浪費(fèi)。還可以把服務(wù)器負(fù)荷轉(zhuǎn)嫁到客戶端，利于客戶端閑置的處理能力來處理，如表單驗(yàn)證、客戶端數(shù)據(jù)網(wǎng)格排序、生成圖表等?！鞍葱枞?shù)據(jù)”的方式不僅可以使用戶從服務(wù)器中下載數(shù)據(jù)盡可能減少，而且也減輕了服務(wù)的負(fù)擔(dān)，提高了單位時(shí)間服務(wù)器可以處理的用戶數(shù)據(jù)。

AJAX技術(shù)的試驗(yàn)：Using AJAX to Improve the Bandwidth Performance ofWeb Applications

（1）一個(gè)10k的頁面：AJAX技術(shù)，在交互中只刷新網(wǎng)頁中部分需要更新數(shù)據(jù)2-3k，傳統(tǒng)的整頁刷新模式需整頁重載10k；

（2）交互次數(shù)越多，AJAX應(yīng)用的帶寬節(jié)省效果越明顯；

（3）整頁刷新模式雖然需要重新載入圖片等，AJAX則不用；

在此次條件的試驗(yàn)過程中：AJAX技術(shù)總計(jì)節(jié)省了超過61%。遠(yuǎn)遠(yuǎn)超過預(yù)期的50%而且隨著交互次數(shù)增加，節(jié)省率還會(huì)更高。

2.帶來更好的用戶體驗(yàn)

AJAX使用XMLHttpRequest對(duì)象發(fā)送請(qǐng)求并得到服務(wù)器響應(yīng)，在不重新載入整個(gè)頁面的情況下用Javascript操作DOM最終更新頁面。所以在讀取數(shù)據(jù)的過程中，用戶所面對(duì)的不是白屏，是原來的頁面內(nèi)容（也可以加一個(gè)Loading的提示框讓用戶知道處于讀取數(shù)據(jù)過程），只有當(dāng)數(shù)據(jù)接收完畢之后才更新相應(yīng)部分的內(nèi)容。這種更新瞬間完成，用戶幾乎感覺不到，這種體驗(yàn)是十分美妙的。而傳統(tǒng)方式瀏覽器提示用戶正在加載頁面，這種過程對(duì)于用戶來說是非常痛苦的，用戶不能做其他事情，只能等待加載工作完成后才能進(jìn)行繼續(xù)操作。在本系統(tǒng)中，利用CSS，模仿了C/S應(yīng)用程序的菜單、面板等，讓用戶擁有更好的使用體驗(yàn)，感覺就像在使用一個(gè)C/S程序一樣。

開發(fā)人員和設(shè)計(jì)人員開始認(rèn)識(shí)到不僅大型的用戶體驗(yàn)在市場上是成功的，而且也認(rèn)識(shí)到這種體驗(yàn)是怎么來影響用戶的開銷的?；贏JAX技術(shù)的google地圖比傳統(tǒng)的選擇MapQuest更成功，證明了提供更好的用戶體驗(yàn)的產(chǎn)品的成功。AJAX技術(shù)是使網(wǎng)絡(luò)應(yīng)用有更好的可用性的一個(gè)領(lǐng)導(dǎo)性的技術(shù)。它允許從服務(wù)器端請(qǐng)求少量的信息，而不是整個(gè)網(wǎng)頁。它增加了頁面數(shù)據(jù)的更新但同時(shí)減少了頁面的刷新和刷新等待，這些問題從網(wǎng)絡(luò)一誕生就折磨著Web應(yīng)用。

人們已經(jīng)知道他們需要一個(gè)優(yōu)秀的用戶界面并且有對(duì)該界面的投資意愿。前提條件是：用戶能夠快速地取得信息，不管數(shù)據(jù)是一個(gè)內(nèi)部網(wǎng)的應(yīng)用還是一個(gè)廣域網(wǎng)的服務(wù)，快速是用戶最直觀的體驗(yàn)。

3.進(jìn)一步促進(jìn)頁面呈現(xiàn)和數(shù)據(jù)的分離

在B/S模式的系統(tǒng)中，頁面呈現(xiàn)和數(shù)據(jù)本身沒有清晰的界限，數(shù)據(jù)和數(shù)據(jù)表現(xiàn)的格式混雜在一起，而基于AJAX技術(shù)的B/S系統(tǒng)采用XML作為數(shù)據(jù)的載體，數(shù)據(jù)通過DOM解析之后表現(xiàn)出來，能夠做到數(shù)據(jù)與數(shù)據(jù)表現(xiàn)的徹底分離，有利于分工合作、減少頁面的修改引起的Web應(yīng)用程序錯(cuò)誤，提高效率，更加適用目前的系統(tǒng)要求。

4.公開標(biāo)準(zhǔn)

AJAX技術(shù)是基于被各大瀏覽器和平臺(tái)都支持的公開標(biāo)準(zhǔn)的技術(shù)。這意味著該技術(shù)不怕技術(shù)提供商的技術(shù)封鎖。組成AJAX技術(shù)的大多數(shù)技術(shù)都能放心地使用很多年，而那些不是熱點(diǎn)的、最新的和未經(jīng)考驗(yàn)的技術(shù)只能使用一段時(shí)間。

5.客戶端分擔(dān)些工作，減低了后端的負(fù)載

AJAX技術(shù)把一部分工作分擔(dān)到客戶端完成，客戶端完成工作的速度必然大大快于將數(shù)據(jù)發(fā)送到服務(wù)器運(yùn)算完成后再返回到客戶端。雖然服務(wù)器的運(yùn)算能力非常強(qiáng)大，但是服務(wù)器同一時(shí)間可能需要處理眾多的客戶端的運(yùn)算請(qǐng)求，也會(huì)削弱服務(wù)器運(yùn)算能力，不可忽略的是一般情況下客戶端的閑置資源是非常多的。除此之外，真正減慢速度的原因是，客戶端的每個(gè)操作都將伴著大量的數(shù)據(jù)需要傳輸，這不僅會(huì)大大占用服務(wù)器資源，而且受網(wǎng)絡(luò)環(huán)境的影響，傳輸并不一定會(huì)很及時(shí)。利用客戶端的閑置資源分擔(dān)些客戶端工作，減低了后端的負(fù)載，給用戶較快的響應(yīng)。

在傳統(tǒng)交互模式中，服務(wù)端對(duì)客戶端的數(shù)據(jù)處理都是以頁面為單位的，客戶端提交頁面表單，服務(wù)器分析提交數(shù)據(jù)后會(huì)將整個(gè)頁面重新生成為HTML+CSS發(fā)回給客戶端呈現(xiàn)。很多時(shí)候程序其實(shí)只是希望提交很小一部分?jǐn)?shù)據(jù)，并改變一小部分的數(shù)據(jù)顯示，如用戶注冊(cè)過程，用戶需要輸ID，但對(duì)于新注冊(cè)的用戶來說，必須驗(yàn)證該ID是否為合法，判斷是否已經(jīng)被其他用戶所使用，這時(shí)卻不得不將整個(gè)表單提交，并在服務(wù)器端處理整個(gè)頁面并回傳，這極大地浪費(fèi)了寶貴的服務(wù)器資源。

借助于AJAX技術(shù)，我們有了一種新的選擇，我們只回傳用戶注冊(cè)ID這個(gè)信息，可能這個(gè)信息只包含幾個(gè)字節(jié)，返回時(shí)我們也只返回是否可用這個(gè)信息，返回結(jié)果也只包含一個(gè)狀態(tài)位，通過AJAXengine改變頁面并顯示數(shù)據(jù)，在服務(wù)端只是執(zhí)行了一個(gè)簡單的業(yè)務(wù)邏輯，并沒有處理頁面顯示回傳的問題，這樣對(duì)于服務(wù)端來說減少了大量的處理壓力。

四、AJAX的缺點(diǎn)分析

事物都會(huì)有它的兩面性，既然AJAX有著那么多優(yōu)勢(shì)，相應(yīng)地它也會(huì)有很多不足之處，相信隨著AJAX技術(shù)的發(fā)展，這些不足會(huì)逐漸消失。

1.增加第一次傳輸?shù)木W(wǎng)絡(luò)負(fù)載

基于AJAX技術(shù)的Web異步交互系統(tǒng)比于傳統(tǒng)的模式的系統(tǒng)需要增加第一次傳輸?shù)木W(wǎng)絡(luò)負(fù)載。AJAX需要將AJAX引擎?zhèn)鬏數(shù)娇蛻舳?，這一步將增加網(wǎng)站進(jìn)行時(shí)的數(shù)據(jù)傳輸量，相對(duì)傳統(tǒng)的模式會(huì)有一定的理論時(shí)間差。

2.AJAX取消了back按鈕，即對(duì)瀏覽器后退機(jī)制的破壞

后退按鈕是一個(gè)標(biāo)準(zhǔn)的Web站點(diǎn)的重要功能，但是它沒法和js進(jìn)行很好的合作，這是AJAX所帶來的一個(gè)比較嚴(yán)重的問題。作為一個(gè)WEB的用戶，我們已經(jīng)習(xí)慣了有back按鈕，這幾乎是每個(gè)用戶共同的習(xí)慣，AJAX下點(diǎn)擊鏈接是不Redirect頁面，所以不存在后退和前進(jìn)了，同樣，沒有后退和前進(jìn)也就無法找瀏覽歷史紀(jì)錄了。在動(dòng)態(tài)更新頁面的情況下，用戶無法回到前一個(gè)頁面狀態(tài)，這是因?yàn)闉g覽器僅能記下歷史記錄中的靜態(tài)頁面。一個(gè)被完整讀入的頁面與一個(gè)已經(jīng)被動(dòng)態(tài)修改過的頁面之間的差別非常微妙；用戶通常都希望單擊后退按鈕，就能夠取消他們的前一次操作，但是在AJAX應(yīng)用程序中，卻無法這樣做。不過開發(fā)者已想出了種種辦法來解決這個(gè)問題，當(dāng)中大多數(shù)都是在用戶單擊后退按鈕訪問歷史記錄時(shí)，通過建立或使用一個(gè)隱藏的IFRAME來重現(xiàn)頁面上的變更。

3.查詢返回大量的數(shù)據(jù)的時(shí)候不適宜用AJAX

如果數(shù)據(jù)的查詢返回，數(shù)據(jù)量較大時(shí)，AJAX就不適宜用了。

4.安全性不高

暴露服務(wù)端，有可能被惡意攻擊、篡改，造成安全上的漏洞。

圖1 傳統(tǒng)的Web應(yīng)用程序模型

圖2 基于AJAX的Web應(yīng)用模型

［1］郭鄭州，崔程，郝軍啟.ASP.NET+Ajax網(wǎng)站開發(fā)典型實(shí)例［M］.北京：電子工業(yè)出版社，2008.

［2］張桂元，賈燕鳳，姜波.征服Ajax——Web2.0快速入門與項(xiàng)目實(shí)踐（Java）［M］.北京：人民郵電出版社，2006.

［3］Cbristian wenz.ASP.NET AJAX 編程指南［M］.唐學(xué)韜等，譯.北京：機(jī)械工業(yè)出版社，2008.

TP

A

1673-0046（2011）05-0166-03