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

蔡志榮

（紹興職業技術學院，浙江 紹興 312000）

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

蔡志榮

（紹興職業技術學院，浙江 紹興 312000）

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

AJAX；異步交互；通訊

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

一、AJAX的概念

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

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

二、AJAX的工作原理

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

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

現在使用的AJAX技術是將幾種成熟技術按一定的方式結合在一起，通過協作發揮各自作用，包括：使用XHTML和CSS標準化呈現；使用DOM實現動態顯示和交互；使用XML和XSLT進行數據交換與處理；使用XMLHttpRequest進行異步數據讀取；用JavaS-cript綁定和處理所有數據。

AJAX需要一個穩定、響應及時的服務器向引擎發送內容，作為必要的服務端處理邏輯，確保向AJAX引擎發送的數據格式是正確的。

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

三、AJAX的優點分析

基于AJAX技術的WEB異步交互系統相比于傳統的模式的系統具有以下一些優勢：

1.減輕服務器的負擔和減少網絡流量

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

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

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

（2）交互次數越多，AJAX應用的帶寬節省效果越明顯；

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

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

2.帶來更好的用戶體驗

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

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

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

3.進一步促進頁面呈現和數據的分離

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

4.公開標準

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

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

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

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

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

四、AJAX的缺點分析

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

1.增加第一次傳輸的網絡負載

基于AJAX技術的Web異步交互系統比于傳統的模式的系統需要增加第一次傳輸的網絡負載。AJAX需要將AJAX引擎傳輸到客戶端，這一步將增加網站進行時的數據傳輸量，相對傳統的模式會有一定的理論時間差。

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

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

3.查詢返回大量的數據的時候不適宜用AJAX

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

4.安全性不高

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

圖1 傳統的Web應用程序模型

圖2 基于AJAX的Web應用模型

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

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

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

TP

A

1673-0046（2011）05-0166-03