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

蔡志榮

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

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

蔡志榮

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

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

AJAX；異步交互；通訊

隨著互聯(lián)網(wǎng)的不斷發(fā)展和網(wǎng)絡各方面信息量的劇增，網(wǎng)絡通訊能力的不斷提高，如何使Web響應更加靈敏，數(shù)據(jù)傳輸更加快捷，已成為當今關注的熱點。應用系統(tǒng)所采用的技術也由早期的C／S(Client／Server)模式向基于B／S(Browser／Server)的應用模式進行轉(zhuǎn)變。這種轉(zhuǎn)變避免了繁瑣的部署工作，體現(xiàn)了瘦客戶的開發(fā)理念，但同步交互方式也帶來客戶端響應速度慢的問題，并且始終困擾著最終用戶。基于AJAX的Web技術改變原有的同步交互為異步交互方式，使頁面在后臺按需獲取數(shù)據(jù)，這樣不僅節(jié)省了帶寬，更大大提升了用戶體驗。

一、AJAX的概念

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

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

二、AJAX的工作原理

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

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

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

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

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

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

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

1.減輕服務器的負擔和減少網(wǎng)絡流量

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

AJAX技術的試驗：Using AJAX to Improve the Bandwidth Performance ofWeb Applications

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

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

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

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

2.帶來更好的用戶體驗

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

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

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

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

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

4.公開標準

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

5.客戶端分擔些工作，減低了后端的負載

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

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

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

四、AJAX的缺點分析

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

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

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

2.AJAX取消了back按鈕，即對瀏覽器后退機制的破壞

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

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

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

4.安全性不高

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

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

圖2 基于AJAX的Web應用模型

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

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

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

TP

A

1673-0046（2011）05-0166-03