1、一種新的胖客戶端技術Ajax 摘要：隨著Internet的迅速發展和其用戶的增多，以及新型網絡服務的研究、實施和應用，傳統的基于Web的應用程序漸漸不能滿足用戶與Web頁面高度交互的希望，它的弊端漸漸顯露。Ajax(異步JavaScript和XML)是一種開發Web應用程序的方法，它通過提交Web頁面內容的方法提高了用戶界面的速度。在基于Ajax的應用程序中，頁面的更新是有選擇性的，可以在本地完成的，并且是異步的。客戶端的JavaScript將與服務器的交互減至最少，同時用戶能連續與Web頁面交互。Ajax的出現，使我們改變了傳統的關于胖客戶端的思維，經過分析可以得出，利用Ajax，也可以使基

2、于的Web應用程序成為實現胖客戶端的一種技術。關鍵詞：Ajax，XML Request，MVC， RIA，Rich Client1 引言Internet經歷了翻天覆地的重大變革。最初Internet實際上就是讓科學家們和學術機構交換文章和研究成果，也就是說，只有簡單的文本瀏覽器和靜態頁面僅供科學家之間交流研究心得。時至今日，Internet已不可同日而語，它得到了巨大的發展，成為貿易和信息的中心，也成為大量應用的首選平臺。因此伴隨而來的Web開發顯得尤為重要，而以前的那種簡單的請求/響應模式已不能滿足用戶的需要。在Web開發領域，隨著Internet的不斷普及和深入發展，各種網絡應用系統的開發

3、也由過去的Client/Server 模式轉向Browser/Server。這種基于Web應用系統的優點之一是免去了客戶端的部署，統一使用瀏覽器即可。而對于這種系統的后臺維護，開發人員和系統管理人員仍然要在服務器端進行，如果系統服務器要是在異地的情況下，會浪費大量的人力和時間。于是胖客戶應用的開發人員都飽受部署之苦，因為要把應用部署到數以千計的用戶機器上，他們急切地希望Web能夠減輕他們的負擔。多年以來，已經出現了許多Web應用技術，有些是專用的，另外一些需要高超的編程能力。在用戶體驗方面，盡管這些技術有弱有強，但沒有哪個技術能使瘦客戶應用達到桌面應用的水平。不過，由于很容易部署，有更大的客戶

4、群體，而且維護開銷更低，盡管瀏覽器存在一定的局限性，仍是許多應用的首選目標平臺。所以開發人員往往使用一些技巧來繞過Internet對開發人員的麻煩限制。利用各種遠程腳本方法和HTML元素，開發人員可以與服務器異步地通信，但是直到主流瀏覽器對XML Request對象提供了支持，真正的跨瀏覽器方法才有可能。XML Request的出現為Web開發提供了一種全新的可能性，甚至整個改變了人們對于Web應用由什么來組成的看法。在這個技術出現之前，由于技術上的限制，人們認為Web應用就是由一系列連續切換的頁面組成的。因此整個Web應用被劃分成了大量的頁面，其中大部分是一些很小的頁面。用戶大部分的交互都需

5、要切換并刷新整個頁面，而在這個過程中，也就是在下一個頁面完全顯示出來之前，用戶只能傻等，什么都做不了。這就是人們所習以為常的Web應用。在傳統的Web應用中客戶端與服務器的交互只能通過表單的提交服務器的處理后返回新的頁面,最后客戶端進行完全的頁面刷新。這樣的局面已經延續了相當長時間。隨著Web應用程序復雜性越來越高，這種傳統的Web應用程序已經漸漸不能滿足Web瀏覽者更高的、全方位的體驗要求了。Web應用與桌面應用程序相比，缺少了很多交互的特性，瀏覽器在Web應用中所處的角色僅僅是一個呈現HTML代碼的容器，而不是一個獨立應用程序的宿主。然而XML Request技術的出現使得我們可以打破這種

6、笨拙的開發模式，以一種全新的方式來做Web開發，為用戶提供更好的交互體驗。大量的探索者以XML Request技術為基礎，將一些原有的Web技術重新包裝整合。經過了多年的不懈努力，終于在2005年出現了一個新的術語Ajax，來描述這樣一類的技術和開發方式。隨著Web2.0時代的到來，Ajax已經成為人們談論最多的技術術語。Ajax是2005年2月才誕生但是現在已經炙手可熱的一項全新技術。這項新技術能夠極大地改善網站的用戶體驗。Ajax技術可以提供高度交互的Web應用，給予用戶更豐富的頁面瀏覽體驗。當Ajax的出現給所有的Web開發人員，它對Web應用來說可以是革命性的，它使得開發人員得以擺脫原

7、有單調的開發模式，從而開發出更易用、交互性更強的Web應用。 關鍵在于，Internet默認的請求/響應模式有了重大轉變，這正是Ajax的核心所在，盡管這并非全新的內容。Web應用開發人員現在可以自由地與服務器異步交互，這說明，他們可以完成許多原本只能在胖客戶上完成的任務。Google、Yahoo和Amazon等公司已經走在前面，我們終于看到基于瀏覽器的應用也能與胖客戶應用不相上下。利用Ajax，你可以盡享這兩方面的好處：代碼位于你能控制的服務器上，而且只要客戶有瀏覽器，就能訪問一個能提供豐富用戶體驗的應用。Web應用開發人員，可以應用某種或者多種服務器端技術來構建Web應用。在過去幾年中，服

8、務器端有了長足的發展，服務器端軟件開發越來越容易，也越來越健壯，相比之下，客戶端基本上被拋在了一邊。Ajax技術的出現使這種狀況有所改觀，因為開發人員現在有了一個更豐富的客戶端工具箱，有大量工具可以使用。Ajax技術從本質上說是屬于客戶端的技術。但它的應用是精彩之處在于客戶端與服務器的異步交互。而它實現的，卻是胖客戶端的功能，所以我們也可以這么認為：Ajax是一種新的胖客戶端技術。2 Ajax的概念2.1 Ajax的定義Ajax這個概念的最早提出者Adaptive Path公司的Jesse James Garrett認為：Ajax是異步JavaScript 和XML（Asynchronous

9、JavaScript and XML）的英文縮寫。而大力推廣并使Ajax技術炙手可熱的是Google。Ajax是指一種創建交互式應用的網頁開發技術。Ajax的核心理念是使用JavaScript對象Xml Request發送異步請求。最初為XML Request對象提供支持的是微軟公司。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術。簡而言之，Xml Request使您可以使用JavaScript向服務器提出請求并處理響應，而不阻塞用戶。 實際上，Ajax不只是一種技術，它由幾種蓬勃發展的技術以新的強大方式組合而成。Ajax包含：（1）基于XHTML和CSS

10、標準的表示；對網頁內容重新格式化，但不是使用HTML語言，因為HTML語法很不嚴格，匹配性也不好，使用性能差。（2）使用文檔對象模型（Document Object Model）進行動態顯示和交互；比原來使用各種腳本和動態語言發好。 （3）使用XMLXSLT進行數據交換與處理；所有的數據的存取都XML完成。（4）使用XML Request與服務器進行異步通信；使用XML Request進行異步數據讀取。（5）使用JavaScript綁定將它們綁定在一起。使用 HYPERLINK :/ crockford /javascript/javascript.html JavaScript整合上述技術，

11、綁定和處理所在數據。2.2 Ajax的相關技術在基于Ajax的應用中， Ajax核心技術有JavaScript、XML Request和DOM，如果所用數據格式為XML的話，還可以再加上XML這一項。 XML RequestXML Request是Ajax技術的核心。它其實是XML 組件的對象，通過此對象，可以做到無需提交表單就可以實現與服務器的連接；無需刷新整個頁面，就可以動態更新頁面中一部分的內容。這樣，Ajax可以像桌面應用程序一樣只同服務器進行數據層面的交換，而不用每次都刷新界面，也不用每次將數據處理的工作都交給服務器來做；這樣既減輕了服務器負擔又加快了響應速度、縮短了用戶等待的時間。

12、XML Request通常使用XML作為數據交換的載體，但也可使用其他的載體，如純文本。簡單來說，就是通過XML Request發送信息給服務器，異步接收服務器處理并返回信息，然后通過JavaScript動態更新頁面的部分內容。XML Request具體作用是在客戶端傳遞XML數據給遠程服務器端的。XmlDocument與Xml Request這兩個技術是Ajax的核心。Ajax的關鍵是怎樣把數據從遠端獲取回來。XmlDocument實際上是創建一個Document對象，這個對象是XML的Document對象。之所以要創建XML的Document對象，是因為互聯網上XML格式的數據非常多，如果

13、不創建XML的Document對象，取回來的數據就沒法使用。這樣就明確了,我們可以從客戶端傳遞XML數據到服務器應用程序,然后處理。下面需要做的就是將要顯示的內容(包括新的控件和HTML文本)和數據在服務器應用程序中處理成為XML數據，再以逆向傳輸發送給客戶端,然后用客戶端的響應代碼更新全部或部分頁面區域而完成無刷新的功能。 JavaScriptJavaScript是一在瀏覽器中大量使用的編程語言，它一直被定位為客戶端的腳本語言，應用最多的地方是表單數據的校驗，或是做一些小游戲等等。但事實上，它是一門真正的編程語言，有著自己的標準并在各種瀏覽器中被廣泛支持。在Ajax技術應用中，可以通過Jav

14、ascript操作XML Request，來與數據庫進行交互。 DOM（Document Object Model）DOM（即結構化的文本結構）是一個能夠讓程序和腳本動態訪問和更新文檔內容、結構和樣式的語言平臺。也就是說，它提供了文件的結構表述，并可以改變其中的內容及可見物。它提供了標準的HTML和XML對象集，并有一個標準的接口來訪問并操作它們。DOM被分為不同的部分（核心、XML和HTML）和不同的版本（DOM1/2/3），其中，HTML DOM 將HTML文檔視為嵌其他元素的樹型結構元素。所有的元素，它們包含的文字以及他們的樹型都可以被DOM樹所訪問到。它們的內容可以修改和刪除，并且可以

15、通過DOM建成立新的元素。元素的文字和它們的屬性被識別為點。DOM的本質是建立網頁與 Script 或程序語言溝通的橋梁。腳本語言通過DOM才可以跟頁面進行交互。Web開發人員可操作及建立文件的屬性、方法以及事件都以對象來展現。這些對象可以由當今大多數的瀏覽器以 Script 來取用。一個用HTML或XHTML構建的網頁也可以看作是一組結構化的數據，這些數據被封在DOM中，DOM提供了網頁中各個對象的讀寫的支持。 XML可擴展的標記語言（Extensible Markup Language）具有一種開放的、可擴展的、可自描述的語言結構，它已經成為網上傳輸的數據和文檔符合統一的標準。它是用來描述

16、數據結構的一種語言，可以使對某些結構化數據的定義更加容易，并且可以通過它與其它應用程序交換數據。用XML表述的數據和文檔，可以很容易的讓所有程序共享。XML是用于網絡上數據交換的語言，具有與描述Web頁面的“HTML”語言相似的格式。該語言有“可以利用Web瀏覽器進行數據確認”以及“易于生成數據”等優點，因此主要用于在企業之間，或者在企業內部更加方便地進行數據交換和利用。XML是Extensible Markup Language的縮寫，它是一種類似于HTML的標記語言。XML是用來描述數據的，它的標記不是在XML中預定義的，開發人員必須定義自己的標記。另外，XML使用文檔類型定義(DTD)或

17、者模式(Schema)來描述數據。而當它使用DTD或者Schema后就成為一種自描述的語言。 CSSCSS是Cascading Style Sheets(層疊樣式表單)的簡稱。更多的人把它稱作樣式表。顧名思義，它是一種設計網頁樣式的工具。借助CSS的強大功能，可以把數據更有效的表現在網頁上。CSS是一種用來顯示方式描述的標記語言。對于Ajax來說，CSS的最大特性是它可以用來顯示。我們在前面討論過，Ajax技術有幾部分組成，首先它有后臺的引擎，把數據從服務器端取出來，前臺取到數據以后有一種表示的方式，能把HTML取出來并在前臺有條不紊的顯示出來，這是一個重要的問題。網頁的美感和可視化，是通過對

18、CSS數據進行設定完成的。2.3 Ajax技術的實現原理介紹了它的相關技術后，我們來看一下它的實現原理。Ajax 這個名字代表了異步JavaScript與XML Request，并且意味著你可以在基于瀏覽器的JavaScript和服務器之間建立通訊。這些用于現代瀏覽器中的若干成功技術的可能性組合的Ajax技術，使所有的Ajax應用程序實現了一種“豐富的”用戶界面這是通過JavaScript操作HTML文檔對象模型并且經由XML Request實現的精確定位的數據檢索來實現的。（1）原理簡介Ajax的工作原理相當于在用戶和服務器之間加了個中間層,使用戶操作與服務器響應異步化。并不是所有的用戶請求

19、都提交給服務器,像些數據驗證和數據處理等都交給Ajax引擎自己來做,只有確定需要從服務器讀取新數據時再由Ajax引擎代為向服務器提交請求(主要是讀取XML格式的數據)。Ajax是使用XML和JavaScript兩部分，在客戶端向服務器端提出請求。從原理上看，主要是Ajax可以通過調用XML Request實現與服務器的異步通訊，并最終在網頁中實現豐富友好的用戶界面。應用Ajax的流程如下：（1）定義一個事件處理器 。（2）獲取XML Request，并將事件處理器注冊給它。（3）與服務器連接。（4）發送信息。（5）服務器返回處理完畢的信息。（6）每當XML Request的狀態發生變化，自動觸

20、發事件處理器。（7）事件處理器動態更新頁面。技術的關鍵是Ajax引擎，它實際上是一個比較復雜的JavaScript應用程序，用來處理用戶請求，讀寫服務器和更改DOM內容。在客戶端多出來一個 Ajax engine，而且服務器傳給客戶端的已經不再是 HTML/CSS，而是純的 XML 數據，客戶端通過 XML 向服務器端發送請求。所有的表示邏輯在客戶端通過 JavaScript 腳本來執行，然后通過修改 DOM 來完成展現。 由于有了位于客戶端這個中間層，可以把原先必須在服務器端完成的很多交互工作放在了客戶端完成，而客戶端的 Ajax engine 的響應是即時的，因此用戶的交互體驗得到了極大的

21、改善。Ajax是傳統Web應用程序的一個轉變。以前是服務器每次生成HTML頁面并返回給客戶端（瀏覽器）。在大多數網站中，很多頁面中大部分內容都是一樣的，比如：結構、格式、頁頭、頁尾、廣告等，所不同的只是一小部分的內容，但每次服務器都會生成所有的頁面再返回給客戶端，這無形之中是一種浪費，不管是對于用戶的時間、帶寬、CPU耗用，還是對于ISP的高價租用的帶寬和空間來說。而Ajax可以所為客戶端和服務器的中間層，來處理客戶端的請求，并根據需要向服務器端發送請求，用什么就取什么、用多少就取多少，就不會有數據的冗余和浪費，減少了數據下載總量，而且更新頁面時不用重載全部內容，只更新需要更新的那部分即可，相

22、對于純后臺處理并重載的方式縮短了用戶等待時間，也把對資源的浪費降到最低，基于標準化的并被廣泛支持和技術，并且不需要插件或下載小程序，所以Ajax對于用戶和ISP來說都是很有利的。Ajax使Web中的界面與應用分離（也可以說是數據與呈現分離），而在以前兩者是沒有清晰的界限的，數據與呈現分離的分離，有利于分工合作、減少非技術人員對頁面的修改造成的Web應用程序錯誤、提高效率、也更加適用于現在的發布系統。也可以把以前的一些服務器負擔的工作轉嫁到客戶端，利于客戶端閑置的處理能力來處理。（2）交互模式在同步工作方式中，當我們需要改變頁面中的一些數據，并要求服務器端做一些變化時，要等整個頁面被傳過去然后再

23、傳回來，才能被看到。而使用Ajax技術之后，我們只需要把有變化的那部分的請求發過去，服務器端獲取之后，處理并只將這部分傳回來，因此性能大大提高顯著。具體來說，首先，我們不必傳那么多的數據，其次，可以增加服務的針對性。比如，頁面有好多東西，而我們只想看一下天氣預報，那么要做的事，提交給服務器我們所位置，想看一下這里的天氣，返回所有數據是傳統的服務器端交互機制和原來的FORM提交機制的應用方式。使用Ajax后，我們只提交且只獲得關于天氣的新數據。具體地進行分析一下它們的區別：在傳統的Web應用同步交互方式中，用戶首先發送一個 請求到Web服務器，然后Web服務器根據用戶請示的內容，相應的任務，對其

24、進行處理后再返回一個新的HTML頁到客戶端,如圖所示。這是一種不連貫的用戶體驗，每當服務器處理客戶端提交的請求時,客戶都只能空閑等待, 此時瀏覽器顯示的頁面是空白的，這也就是通常所說的“白屏”現象，并且哪怕只是一次很小的交互、只需從服務器端得到很簡單的一個數據,都要返回一個完整的HTML頁,而用戶每次都要浪費時間和帶寬去重新讀取整個頁面。 圖1同步的工作方式自采用HTML進行Web傳輸和呈現以來，無論是基于哪種服務器技術(ASP、ASP.NET、JSP或PHP)，Web應用中采用的都是如圖中所示的處理模式。當頁面內容比較少，或者服務器處理時間較短時，采用這種模式似乎沒有什么不妥。但是，如果頁面

25、內容較多，服務器的響應時間較長，對于用戶來說就難以接受了。根據調查，一個網頁加載的時間如果超過45秒，那么大多數用戶將不會等待，可能會選擇切換到其他窗口或者直接關閉該頁面。此外，用戶在某些時候僅僅需要改變頁面中的某部分的數據，但是他不得不刷新整個頁面。尤其在人機交互較為頻繁的應用系統中，這種現象屢見不鮮，這顯然是和人性化的軟件設計原則相違背的。減少用戶的等待時間，提高系統的可用性的途徑除了優化代碼、調整服務器配置之外，還可以選擇使用Ajax技術。使用Ajax后，用戶感覺幾乎所有的操作都會很快響應沒有頁面重載的等待。因為與傳統的Web應用不同，Ajax采用了異步交互方式。它在用戶和服務器之間引入

26、了一個中間媒介，從而改變了同步交互過程中的“處理等待處理等待“模式。用戶的瀏覽器在執行任務時即裝載了Ajax引擎。該引擎是用JavaScript語言編寫的，通常位于一個隱藏的框架中，負責轉發用戶界面和服務器之間的交互。Ajax引擎允許用戶和應用系統之間的交互以異步的方式進行，獨立于用戶與Web服務器之間的交互?，F在，可以用JavaScript調用Ajax引擎來產生一個 的用戶請求，數據編輯、頁面導航和數據驗證等操作不再需要重新加載整個頁面，可以通過Ajax引擎向Web服務器發送請求?；贏jax的Web應用模式如圖所示：圖2異步工作方式3 流行的原因Ajax技術是從2005年2月誕生，到現在已

27、非常流行，另外它并不是一門新技術，業內人士稱其為“新瓶裝舊酒”，那為什么它會這樣流行？我們從環境角度和技術角度來兩個方面來分別分析一下Ajax技術流行起來的原因。3.1 環境角度闡述分析(1)Web的發展歷程的需要Web的發展經歷了純靜態頁面的時代，應用“CMS+數據庫”模式的時代，然后到了由用戶導向的社會化網絡為特征的時代。Web即純靜態頁面時代，Web的主要技術是數據庫加上頁面生成機制。這兩個時代的特點是頁面上的信息是由人來不斷在后臺的更新，沒有一種把所有的信息推到你面前的機制。在Web2.0時代，出現了一種很好的方法可以把這些信息取過來放在面前：比如說，一個用戶每天要看博客堂的博客，要上

28、BBC的新聞，要看一下E-mail信箱的郵件，看一些相關的專業的網站，而且每天的工作就這幾個網站。傳統的方式使用戶不得不打開N個瀏覽器窗口，一一輸入網址進行查詢。但是在Web2.0時代我們不需要這種單調重復的操作了。例如我們只需使用Google的個性化界面，就可以定制自己所需的內容。另外，以前我們登錄網站，看到的是一些靜態的文本或是動態生成的數據，這些大量的數據需要我們人工來選擇。如果想查詢某一項內容,必須通過搜索引擎,進行分類搜索。比如說喜歡體育欄目，那可以去新浪或是TOM的體育頻道,但這些大的門戶網站不僅提供體育信息，也提供大量關于經濟、金融信息。你要想找到你所需要的，往往需要費點精力。傳

29、統的網頁開發方式中，這些信息是靠后臺的編輯們每天不停地搜索信息，然后做成網頁，發布到服務器上，不僅增加了訪客的操作量，同時也增加了后臺人員的工作量。這是Web2.0以前的客戶體驗及后臺操作情況。如圖下表所示：Web1.0 (19932003)通過瀏覽器瀏覽大量網頁 Web2.0（2003）網頁，加上很多通過Web分享的其他內容，更加互動，更像一個應用程序而非一個網頁模式“讀”“寫”和貢獻主要單元內容“網頁”“貼子/記錄”形態“靜態”“動態”瀏覽方式瀏覽器瀏覽器、RSS閱讀器、其他體系結構“客戶端服務器”“Web Services”內容創建者網頁編寫者任何人 主導者少數人“大量業余人士”也就是說

30、，Web1.0時代，網站是以編輯為特征，網站提供給用戶的內容是網站編輯進行編輯處理后提供的，用戶閱讀網站提供的內容。這個過程是網站到用戶的單向行為，Web1.0時代的代表站點為新浪，搜狐，網易三大門戶。到了Web2.0則是以加強了網站與用戶之間的互動，網站內容基于用戶提供，網站的諸多功能也由用戶參與建設，實現了網站與用戶雙向的交流與參與,Web2.0不同于Web1.0的最大之處在于它的交互性。這個時期的典型代表有：博客中國、億友交友、聯絡家等。從2003年開始，具有特征的Blog流行起來，發展到現在，幾乎所有的門戶網站都有自己的Blog。Blog的流行是因為它是人們可以自由表達自己的思想的一種

31、方式，也就是說，Blog提供了表現個人思想的一種平臺。 和Web1.5時代，我們需要自己去找自己想要的信息，而在Web2.0時代是將東西推到你面前，讓你選擇你來看什么?？梢园褎e處的信息拿過來聚集在一起放。讓我們可以很容易地從各種網站拿到最想要的信息，這是Ajax最大的魅力所在。時代的互聯網有了更專業網站，這些站點的開發人員只需將這些原來編好的東西整合在一起，也就是利用Ajax技術將互聯網上各類資源網站的內容整合起來，就可以在互聯網上廣泛使用。（2）Web發展趨勢的必然結果業內人士進行這種預測：隨著Web的發展，有一天，你瀏覽網站時不需要進行任何搜索，只使用一個類似副表現形式客戶端，就可在桌面上

32、看到平時需要登陸各個網站看到的東西，從后臺獲取你需要的信息。Web的發展趨勢更注重智能化和人性化，它將向以下幾方面的趨勢進行發展：（1）用戶操作非常友好，注重用戶體驗。（2）去中心化,用戶主導，用戶參與，用戶建設。（3）社會化網絡，內容開放和共享，支持API。（4）內容通過聚合來組織。（5）分散化的微內容網站受歡迎。Web2.0時代的來臨使Ajax這項技術更能其發展的巨大潛力和空間，Web的發展趨勢也讓我們看到了Ajax應用的前景。Web2.0時代的優越性是促使Ajax流行的主要原因之一。32 技術實現角度闡述分析321 Ajax的特性圖3傳統的與基于Ajax的Web開發模式上圖右邊顯示了使用

33、Ajax技術后的開發模式，原來的網上應用模型即左邊的那一部分，客戶端和Web服務器是直接進行交互的。當你請求一個數據返回的時候，會將整個頁面全都發回去從用戶那里收到的所有數據，經過處理，再把所有的數據都發回來，不論你想刷新頁面的哪一個部分，整個頁面都需要刷新，使用Ajax技術后，情況不一樣了，中間有一個XML數據緩沖區，這個緩沖區和Ajax引擎負責處理一部分數據。當需要和服務器端再次發送數據時，只需要發送一小部分請求，而服務器端只需要返回那一小部分請求就可以了。相比把所有請求發過去，所有頁面發回來的那種傳統的方式，大大的提高了性能。322 Web與Ajax的技術結合點（1）Ajax通過RSS/

34、ATOM同步數據；通過RSS/ATOM聚合數據；使用友好的URL（即好記的域名，比如 ：/ State Transfer）的API或者XML的Web Service；具有社會性；能把東西分享給朋友等；（2）Ajax使用CSS+XHTML的方式控制網頁元素，這樣做的好處是頁面更小，加載更快；頁面更規范，減少了和程序的交互；而且可以輕松支持多種樣式，提供更個性化服務。但這種技術也存在一定的局限，它還沒有好的可視化編輯器，從加大了美術設計師的工作。（3）使用格式化輸出的一個規范即XML格式。在Web與Ajax的技術結合點方面，因為Ajax是一種客戶端請求通過異步調整服務器數據,實現頁面無刷新操作的技

35、術，所以在基于Ajax技術的Web應用程序中，它的好處主要表現在用戶不需要刷新頁面就可以完成異步的數據交換，在Smart Client技術成熟之前，可以比較完美地實現富客戶端（RIA）。3.3 綜述使用Ajax可以帶來的好處有以下幾個方面：（1）服務器的負擔。Ajax的原則是“按需取數據“，可以最大程度地減少冗余請求，減輕服務器的負擔。（2）無需刷新頁面，減少用戶心理和實際的等待時間。特別是在讀取大量數據時，不會像刷新頁面那樣出現白屏的情況，Ajax使用XML Request對象發送請求并且得到服務器響應，在不重新載入整個頁面的情況下，用JavaScript操作DOM更新頁面。因此在讀取數據的

36、過程中，用戶所面對的不是白屏，是原來的頁面內容(也可以加一個“正在讀取中”的提示框讓用戶知道目前正在讀取數據)只有在數據接收完畢之后才更新相應部分的內容。這種更新是瞬間的，用戶幾乎感覺不到。（3）帶來更好的用戶體驗。（4）可以把以前的一些服務器負擔的工作轉嫁到客戶端，利用客戶端閑置的能力來處理，減輕服務器負擔，充分利用帶寬資源，節約空間和寬帶租用成本。（5）可以調用外部數據。（6）基于標準化的并被廣泛支持的技術，不需要下載插件或者小程序。（7）進一步促進頁面呈現與數據的分離。4目前的應用4.1 應用場景Ajax的特點在于異步交互、動態更新Web頁面，因此客觀存在的適用范圍是交互較多、頻繁讀取數

37、據的Web應用。它在以下幾個場景中經常使用。（1）數據驗證。在填寫表單內容時，需要保證數據的惟一性(例如新用戶注冊填寫的用戶名)，因此必須對用戶輸入的內容進行數據給以驗證。數據驗證通常有兩種方式：一種是直接填寫，然后提交表單，這種方式需要將整個頁面提交到服務器端進行驗證，整個過程不僅時間長而且造成了服務器不必要的負擔。第二種方式是改進了的驗證過程，用戶可以通過點擊相應的驗證按鈕，打開新窗口查看驗證結果，是這樣需要新開一個瀏覽器窗口或者對話框，還需要專門編寫驗證的頁面，比較耗費系統資源。而使用Ajax技術，可以由XML Request對象發出驗證請求，根據返回的 響應判斷驗證是否成功，整個過程不

38、需要彈出新窗口，也不需要將整個頁面提交到服務器，快速而又不加重服務器負擔。（2）按需取數據。分類樹或樹形結構在Web應用系統中使用得非常廣泛，例如部門結構、文檔的分類結構常常使用樹形控件呈現。以前每次對分類樹的操作引起頁面重載，為了避免這種情況出現，一般不采用每次調用后臺的方式，而是一次性將分類結構中的數據全部讀取出來并寫入數組，然后根據用戶的操作，用JavaScript來控制節點的呈現，這樣雖然解決了操作響應速度、不重載頁面以及避免向服務器頻繁發送請求的問題，如果用戶不對分類樹進行操作或者只對分類樹中的一部分數據進行操作的話，那么讀取的數據中就會有相當大的冗余，浪費了用戶的資源。特別是在分類

39、結構復雜、數據量龐大的情況下，這種弊端就更加明顯了。現在應用Ajax改進分類樹的實現機制。在初始化頁面時，只獲取第一級子分類的數據并且顯示；當用戶點開一級分類的某一節點時，頁面會通過Ajax向服務器請示當前分類所屬的二級子分類的所有數據；如果再繼續請求已經呈現的二級分類的某一節點時，再次向服務器請求當前分類所屬的三級子分類的所有數據，以此類推。頁面會根據用戶的操作向服務器請求它所需要的數據，這樣就不會存在數據的冗余，減少了數據下載總量。同時，更新頁面時不需要重載所有內容，只更新的那部分內容即可，相對于以前后臺處理并且重載的方式，大大縮減了用戶的等待時間。（3）自動更新頁面在Web應用中有很多數

40、據的變化是十分迅速的，例如最新的熱點新聞、天氣預報以及聊天室的聊天內容等。在Ajax出現之前，用戶為了及時了解相關的內容必須不斷刷新頁面，查看是否有新的內容變化，或者頁面本身實現定時刷新的功能。有可能會發生這種情況：有一段時間網頁的內容沒有發生任何變化。但是用戶并不知道仍然不斷地刷新頁面；或者用戶失去了耐心，放棄了刷新頁面，卻很有可能在此時有新消息出現，這樣就錯過了第一時間得知消息的機會。應用Ajax可以改善這種狀況，頁面加載后，會通過Ajax引擎在后臺進行定時的輪詢，向服務器發送請求，查看是否有最新的消息。如果有則將新的數據（不是所有數據）下載并且在頁面上進行動態的更新，通過一定的方式通知用

41、戶（實現這樣的功能正是下載并且在頁面上進行動態的更新，通過一定的方式通知用戶（實現這樣的功能正是JavaScript的強項）。這樣既避免了用戶不斷手工刷新頁面的不便，也不會因為重復刷新頁面造成資源浪費。4.2 網頁中的Ajax應用Ajax針對網站開發起著更重要的作用，而且目前應用最廣是網站開發。下面我們來分析一下它在網頁中的簡單應用：即基于MVC架構的應用。4.2.1 Ajax的MVC三個部分在網頁應用中，我們要解決的問題是如何在網頁中設定真正有效的Ajax應用，即在Ajax中如何設計M，V，C。Ajax的MVC架構分為M，V，C三個部分：(1) M：（modal）即實體，是Ajax中用來傳載

42、數據或承載的的一個基礎部分。我們在Ajax網頁設計中，如果要涉及到一些特殊的東西，比如需要建立一個 XMLRequest 對象，那就需要一個實體來承載它。(2) V：（View）即視圖，主要介紹用戶界面如何顯示。在顯示網頁時，一般不建議使用HTML來做，而使用XHTML+CSS+JavaScript這樣一個方式來做。網頁上有什么內容，只需用XML來表示出有什么內容，具體這些內容的位置，顯示效果如何，并不需要用網頁內部的HTML語言來實現。簡單的說，首先不用使用TABLE來做定位，而是使用CSS來做定位。所有的顯示外觀和效果都不使用HTML來實現，而是需要使用CSS來實現，即用CSS來定義網頁顯

43、示的效果。如果實在需要某種元素的顯示繪制，也使用JavaScript添加，而不是一次性的早早的把它繪制好，因此這種方式比較靈活。(3)C：（Controller），即控制器。如果在頁面上有一個元素，需要對它做出響應時，我們如何的獲取它，不是簡單地使用一個Document的對象，而是使用JavaScript將它封裝起來，并且最好是一個封裝的事件，那么就使用的Lessoner模式，即監視者或監聽的模式，用它來主動監聽這種事件，并用它來進行處理。.2 Web中的MVC傳統模式的MVC架構：數據流是傳統MVC的視圖部分，CGI或者其他交互性的Web應用就是傳統MVC的控制器部分。我們現在看到的大多數的

44、Web應用都是傳統模式的，比如ASP，PHP，JSP。MVC是三個英文字母的縮寫，即Model，View，Controller。MVC是將網頁應用分成三個部分來做介紹，以便開發時好分工。在傳統的MVC架構中，網頁就是視圖，控制器是中間的數據流，后臺有服務器。它們的傳輸模式如圖所示。圖4傳統的MVC在傳統的MVC的開發過程中，前臺人員只負責定義一些模板頁的模式，所有的數據都是通過ASP后臺生成的。在這種情況下，當需要客戶端與服務器交互時，一定要把數據傳到后臺去，后臺接收數據后做響應然后再傳回來。Ajax中的MVC與傳統的大不一樣，瀏覽器中的MVC圖如下：圖5瀏覽器中的MVC在這種模式下，View

45、負責顯示HTML代碼和一些特效,它的主要應用是：提供可視化界面，負責監視界面的操作；提供通過和Controller交互更新Model的數據并傳送顯示。Controller負責監視視圖上呈現的各種控件的動作，一旦有動作以后，它便會處理。Server傳出一些模型的原型，傳給控制器，由控制器根據這些模型的原形傳給視圖。Ajax在設計時一定要按照MVC架構來設計網頁這一段，這樣的好處是：首先它會對性能有很好的提高。其次它在開發過程中的分工特別明確。對開發人員的要求比較明確，對美工等各方面的人要求比較明確。而且對復用性有很好的支持。從軟件工程的角度來講，MVC的架構是符合正確的開發道路的。在傳統的開發模

46、式中，經常會出現美工人員，編輯和技術人員意見不統一，而原來開發方式要求這些人必須要協作，必須按同步的思維來做。美工人員進行設計多從藝術性和創造性考慮，編輯更多地是希望內容吸引人的眼球，程序員則希望循規蹈矩，后臺數據庫卻希望實現更容易一些，這樣就使協調起來比較麻煩。使用MVC架構后，將View視圖分開了。美工只需和編輯去溝通就可以了，不需要與程序員做任何溝通，而程序員只需拿到需求文檔就可以了，因此按照MVC架構進行更有助于分工。 設計實例下面通過一個虛擬音樂鍵盤的實例來加深對MVC架構的認識。我們要實現的效果是如圖6所示，頁面中有不同顏色的方框，用鼠標點擊不同的方框，會在下邊的框中出現do，ra

47、，mi，fa，等不同的字符，就是一個虛擬的音樂鍵盤。圖6 音樂鍵盤實例下面我們來看一下這個實例的代碼部分：表示層的代碼如下：music.html：1 2 3 Keyboard4 5 6 7window.onload=assignKeys;8 9 10 1112131415161718192021222324代碼解釋：我們在表示層里定義了界面，你會發現顯示全部是用CSS完成的。avaScript程序,它在MVC中屬于控制器那一部分的內容。11行至19行顯示視圖部分的代碼，僅僅幾行簡潔的代碼，便添加了musicalButton。然后我們在CSS中定義了一個顯示模式：/*CSS Document*/

48、 1 body2 background-color=white;3 4 .musicalKeys5 background-color:#ffe0e0;6 border:solid maroan 2px;7 width:536px;8 height:68px;9 top:24px;10 left:24px;11 margin:4px;12 position:absolute;13 overflow:auto;1415.musicalButton16 border:solid navy 1px;17 width:60px;18 height:68px;19 margin:2px;20 positi

49、on:relative;21 float:left;2223.dobackground-color:red;24.rabackground-color:orange;25.mibackground-color:yellow;26.fabackground-color:green;27.sobackground-color:blue;28.labackground-color:indigt;29.xibackground-color: violet;30 div.console31 font-family:Arial,helvetisa;32 font-size:1px;33 color:nav

50、y;34 background-color:white;35 border:solid navy 2px;36 width:536px;37 height:320px;38 top:108px;39 left:24px;40 margin:4px;41 position:absolute;42 overflow:auto;43 代碼解釋：15至22行對musicalButton又做了一次具體的定義。沒有將其定義在HTML中的好處有兩個：一是定義在單獨的文件里閱讀比較方便，另外一個就是可以復用。另外，可以把這一段給一個專業的美工去做，就可以非常方便地進行修改，而且，顯示代碼簡潔，一目了然。然后我

51、們來分析一下應用層（腳本）的代碼：/JavaScript Document1 function assignKeys()2 var keyboard=document.getElementById(keyboard);3 var keys=keyboard.getElemnentByTagName(div);4 if(keys) 5 for(var i=0;i=2&classes1=musical)9 var note=classes0;10 key.note=note;11 key.onclick=playNote;12 13 14 1516function playNote(event)1

52、7 var note=this.note;18 var console=document.getElementById(console);19 if(note&console)20 console.innerHTML+=note+ ;21 22代碼解釋：在腳本代碼中定了兩個函數。一個是assignKeys，我們來分析一下它的功能：首先通過getElementById獲得keyboard，keyboard就是在musical.html文件中的第11行代碼中的id。之所以先用div定義一個keyboard，然后再定義musicalButton。是因為我們需要對每個Button使用不同的JavaSc

53、ript方式進行綁定。assignKeys的工作就是將事件與對象做綁定，它將八個鍵分別綁定到不同的JavaScript事件里。但無論怎樣，我們最后要做的都是一樣的，即當我們單擊不同的按鈕時，需要顯示對應的字符。最好的方法是我們先定義一個根元素，然后Button做為子元素，按圖索，我們就可以把子元素找到，并且由于它的子元素綁定的方式是完全一樣的，而且處理的函數完全可以根據getElementById進行相應的判斷。首先在2行代碼取根結點的元素，然后將根結點中所有子結點全部取到。3行代碼中，getElementByTagName的意思是我們用元素的標記名稱來獲得這個元素，這里的子元素的標記名稱都是

54、div。4行至13行代碼是一個標準的遍歷算法，這段遍歷寫法是首先將每個元素單獨取出來，獲得keys元素以后，把keys元素的名字用split函數把它切開，split是一個將字符串進行切分的函數，切分的結果是一個數組。4行進行判斷，keys是子元素的一個集合，或者說是子元素的一個數組。如果8行中的條件成立，即取得的keys 值是我們需要的do，ra，mi等字符，就對這個子元素進行一下綁定。另一個函數是playNote，它是一個標準的事件觸發函數，當我們觸發它時，就會我們從頁面中獲得console這個控件，然后在console.innerHTML+=note+ ;里輸出。43 應用實例431 Go

55、ogle MapsGoogle Maps 地圖搜索的Web應用。在地圖展示區中，用戶可以鼠標拖動地圖，或者用滾輪放大、縮小地圖。在這個操作過程中用戶可以看到，原來沒有展示的區域會暫時處于空白狀態，不久從服務器端傳回的數據就可以將空白部分填滿。但是整個下載數據的過程并不影響用戶，用戶可以繼續其他的操作。Google Maps中還有一個很有趣的功能就是動態的信息提示，如圖所示。當鼠標移到相應位置上時，會出現有關該位置的詳細信息注意，這此信息是取出時獲取的，而不是事先下載到本地的，這實際上這也是Ajax按需取數據原則的一個體現。圖7 Google Maps 432 GmailGmail是Google

56、推出的電子郵件系統，它從布之日起，就受到了業內極大的關注，原因之一是其超大的容量（，并在不斷的增長中），另一個重要原因則是該系統廣泛使用了Ajax技術，給用戶帶來了很多便利，同時也引起了Web開發人員的廣泛關注。在以往的郵件系統中寫郵件時，如果出現錯誤或者操作失誤導致瀏覽器關閉，那么郵件的內容就會丟失。如果遇到這樣的問題，人們以后再寫比較長的郵件會先在其他編輯器中寫好，再復制到郵件系統中去?，F在使用Gmail則不會出現這個問題，人們以后再寫比較長的郵件會先在其他編輯器中寫好,再復制到郵件系統中去?，F在使用Gmail則不會再出現這種問題，因為它會定時自動保存郵件的內容，即使是被關閉也沒有關系，郵

57、件的內容已經在服務器上保存了。在桌面的電子郵件客戶端程序中，收件人地址填寫的提示功能是很方便的，而傳統基于WEB的郵件系統則不會具有這種便利。但是在Gmail中，只需輸入一部分郵件地址，就可以得到相應的提示，既快速又準確。Gmail電子郵件系統中還有很多細微而貼心的小功能，雖然是一些小的改進，但是意義卻是重大的。大多數功能的實現是基于Ajax技術的，在Gmail電子郵件系統中，由于大量使用了AJAX技術，瀏覽器不再僅僅是呈現頁面內容，更重要的是承載了一個功能豐富的應用系統。圖8 Gmail圖例1圖8 Gmail圖例2433 Amazon的搜索引擎，其特點是搜索選項可以隨時增加、去除。如圖所示是

58、僅搜索“Web頁”和“圖像”的結果，如果這時用戶還想看一看當前的搜索詞在“圖書”中有哪些結果，只需勾上“BOOKS”選項，頁面會自動變為如圖所示，及時加載“圖書”相關的搜索結果。由于應用了Ajax技術，原有的搜索結果仍然在網頁上保留，只是添加了在“圖書”范圍內搜索并返回的結果，同時頁面的布局發生了相應改變。當然所有這些過程中，頁面只是局部更新，而不是刷新整個頁面。44 綜述通過上面的應用實例，我們可以體驗到這些網站無論是從視覺效果還是易用性方面來講都對我們產生了巨大的沖擊力，其中Ajax技術功不可沒?；贏jax技術的Web應用程序可以實現Web瀏覽者更高的、全方位的體驗要求，利用Ajax技術

59、可以創建具有高度互動性和豐富用戶體驗的網絡應用程序。5 結論Ajax是Web2.0時代的核心技術之一，而它的優勢讓我們看到了它在Web開發中的重要作用，這些作用中，最重要的便是它實現了胖客戶端的技術，改變了傳統的關于Web應用程序都是瘦客戶端的思維。綜合Ajax技術的特征，我們可得出這樣的結論：Ajax是一種新的胖客戶端開發技術。5.1 胖客戶端與瘦客戶端的概念及比較。（1）概念在WEB應用中，按照通常的三層架構來區分，包含數據庫操作的應用可分為：表示層，中間層（包括數據庫訪問層和事務層）和數據庫層。如果把表示層和中間層混在一起寫出來的程序就是胖客戶端，和數據庫關聯起來就叫C/S（客戶/服務器

60、）,如果把表示層和中間層分開寫成兩個程序，表示層所在的程序就叫瘦客戶端，這種劃分標準本來和瀏覽器沒什么關系，因為瀏覽器中的網頁只能是表示層而不含中間層，加上非常流行，傳統概念中的基于Web的應用程序就成了瘦客端的代名詞。 “胖客戶端”是相對于“瘦客戶端”而言的，它是在客戶機器上安裝配置的一個功能豐富的交互式的用戶界面。九十年代末以來，基于Web的應用程序得到了廣泛的使用，這主要是因為它們可以很容易地被終端用戶使用，終端用戶只要一臺能夠上網的電腦就行。然而，對于高交互性的程序接口來說，基于Web的接口很難滿足要求。編寫復雜的在終端用戶瀏覽器中執行的客戶端腳本不是一個可行的增強交互性的方法。開發人