畢業(yè)論文：一種新的胖客戶端技術(shù)——Ajax

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

47、，mi，fa，等不同的字符，就是一個虛擬的音樂鍵盤。圖6 音樂鍵盤實例下面我們來看一下這個實例的代碼部分：表示層的代碼如下：music.html：1 2 3 Keyboard4 5 6 7window.onload=assignKeys;8 9 10 1112131415161718192021222324代碼解釋：我們在表示層里定義了界面，你會發(fā)現(xiàn)顯示全部是用CSS完成的。avaScript程序,它在MVC中屬于控制器那一部分的內(nèi)容。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中的好處有兩個：一是定義在單獨的文件里閱讀比較方便，另外一個就是可以復(fù)用。另外，可以把這一段給一個專業(yè)的美工去做，就可以非常方便地進(jìn)行修改，而且，顯示代碼簡潔，一目了然。然后我

51、們來分析一下應(yīng)用層（腳本）的代碼：/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代碼解釋：在腳本代碼中定了兩個函數(shù)。一個是assignKeys，我們來分析一下它的功能：首先通過getElementById獲得keyboard，keyboard就是在musical.html文件中的第11行代碼中的id。之所以先用div定義一個keyboard，然后再定義musicalButton。是因為我們需要對每個Button使用不同的JavaSc

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

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

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

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

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

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

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

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