互聯(lián)網(wǎng)ajax基礎(chǔ)教程

1、 Ajax 基礎(chǔ)教程 制作：badnewfish 聯(lián)系： 1.2 瀏覽器歷史 提到 Web 瀏覽器，大多數(shù)人都會(huì)想到無(wú)處不在的Microsoft Internet Explorer ，直到最 像 Firefox 、Safari 和 Opera 之類(lèi)的瀏覽器日益興起，這種情況才稍有改觀。許多新手可能會(huì) 誤認(rèn)為 IE 是市場(chǎng)上的第一個(gè)瀏覽器，其實(shí)不然。實(shí)際上，第一個(gè)Web 瀏覽器出自Berners Lee 之手，這是他為NeXT 計(jì)算機(jī)創(chuàng)建的（這個(gè) Web 瀏覽器原來(lái)取名叫WorldWideWeb ，后 來(lái)改名為Nexus ），并在 1990 年發(fā)布給 CERN 的人員使用。Berners-Lee

2、 和 Jean-Francois Groff 將 WorldWideWeb 移植到 C，并把這個(gè)瀏覽器改名為libwww 。20 世紀(jì) 90 年代初出現(xiàn) 了許多瀏覽器，包括Nicola Pellow 編寫(xiě)的行模式瀏覽器（這個(gè)瀏覽器允許任何系統(tǒng)的用戶(hù)都 能訪(fǎng)問(wèn)Internet ，從Unix 到Microsoft DOS 都涵蓋在內(nèi)），還有 Samba，這是第一個(gè)面向 Macintosh 的瀏覽器。 1993 年 2 月，伊利諾伊大學(xué)Urbana-Champaign 分校美國(guó)國(guó)家超級(jí)計(jì)算應(yīng)用中心的Marc Andreessen 和 Eric Bina 發(fā)布了Unix 版本的 Mosaic 。幾個(gè)月

3、之后，Aleks Totic 發(fā)布了Mosaic 的Macintosh 版本，這使得 Mosaic 成為第一個(gè)跨平臺(tái)瀏覽器，它很快得到普及，并成為最流 行的 Web 瀏覽器1。這項(xiàng)技術(shù)后來(lái)賣(mài)給了Spyglass ，最后又歸入Microsoft 的門(mén)下，并應(yīng)用 在 Internet Explorer 中。 1993 年，堪薩斯大學(xué)的開(kāi)發(fā)人員編寫(xiě)了一個(gè)基于文本的瀏覽器，叫做 Lynx ，它成為了 字符終端的標(biāo)準(zhǔn)。1994 年，挪威奧斯陸的一個(gè)小組開(kāi)發(fā)了 Opera，到 1996 年這個(gè)瀏覽器得 到了廣泛使用。1994 年 12 月，Netscape 發(fā)布了Mozilla 的 1.0 版，第一個(gè)盈利

4、性質(zhì)的瀏覽器 從此誕生。2002 年又發(fā)布了一個(gè)開(kāi)源的版本，這最終發(fā)展為 2004 年 11 月發(fā)布的、現(xiàn)在十分 流行的 Firefox 瀏覽器。 當(dāng)Microsoft 發(fā)布Windows 95 時(shí)，IE 1.0 是作為Microsoft Plus!包的一部分同時(shí)發(fā)布的。 盡管這個(gè)瀏覽器與操作系統(tǒng)集成在一起，但大多數(shù)人還是堅(jiān)持使用Netscape 、Lynx 或 Opera 。IE 2.0 有了很大起色，增加了對(duì) cookie、安全套接字層（Secure Socket Layer ，SSL ） 和其他新興標(biāo)準(zhǔn)的支持。2.0 版還可以用于 Macintosh ，從而成為Microsoft 的第一

5、個(gè)跨平臺(tái) 瀏覽器。不過(guò)，大多數(shù)用戶(hù)還是很執(zhí)著，仍然堅(jiān)持使用他們習(xí)用的瀏覽器。 不過(guò)到了 1996 年夏天，Microsoft 發(fā)布了 IE 3.0 版。幾乎一夜之間，人們紛紛擁向 IE 。 當(dāng)時(shí)，Netscape 的瀏覽器是要收費(fèi)的，Microsoft 則免費(fèi)提供IE 。關(guān)于瀏覽器領(lǐng)域誰(shuí)主沉浮， 因特網(wǎng)社區(qū)發(fā)生了兩極分化，很多人擔(dān)心Microsoft 會(huì)像在桌面領(lǐng)域一樣，在Web 領(lǐng)域也一 統(tǒng)天下。有些人則考慮到安全因素果然不出所料，發(fā)布3.0 版 9 天之后就報(bào)告了第一個(gè) 安全問(wèn)題。但是到 1999 年發(fā)布 IE 5 時(shí)，它已經(jīng)成為使用最廣的瀏覽器。 1.3 Web 應(yīng)用的發(fā)展歷程 最初，所

6、有 Web 頁(yè)面都是靜態(tài)的，用戶(hù)請(qǐng)求一個(gè)資源，服務(wù)器再返回這個(gè)資源。什么都不 動(dòng)，什么都不閃。坦率地講，對(duì)于許多Web 網(wǎng)站來(lái)說(shuō)，這樣也是可以的，這些網(wǎng)站的Web 頁(yè)面只是電子形式的文本，在一處生成，內(nèi)容固定，再發(fā)布到多處。在瀏覽器發(fā)展的最初階 段，Web 頁(yè)面的這種靜態(tài)性不成問(wèn)題，科學(xué)家只是使用因特網(wǎng)來(lái)交換研究論文，大學(xué)院校也 只是通過(guò)因特網(wǎng)在線(xiàn)發(fā)布課程信息。企業(yè)界還沒(méi)有發(fā)現(xiàn)這個(gè)新 “渠道”會(huì)提供什么商機(jī)。實(shí) 際上，以前公司主頁(yè)顯示的信息通常很少，無(wú)非是一些聯(lián)系信息或者只是一些文檔。不過(guò)沒(méi) 過(guò)多久，Web 用戶(hù)就開(kāi)始有新的要求了，希望能得到更動(dòng)態(tài)的網(wǎng)上體驗(yàn)。個(gè)人計(jì)算機(jī)成為企 業(yè)不可或缺的資源

7、，而且從個(gè)人宿舍到住家辦公室開(kāi)始出現(xiàn)越來(lái)越多的計(jì)算機(jī)。隨著 Windows 95 的問(wèn)世，隨著人們已經(jīng)領(lǐng)教了 Corel WordPerfect 和 Microsoft Excel 豐富的功能， 用戶(hù)的期望也越來(lái)越高。 1.3.1 CGI 要讓W(xué)eb 更為動(dòng)態(tài)，第一個(gè)辦法是公共網(wǎng)關(guān)接口 （Common Gateway Interface ，CGI ）。 與靜態(tài)的Web 獲取不同，使用 CGI 可以創(chuàng)建程序，當(dāng)用戶(hù)發(fā)出請(qǐng)求時(shí)就會(huì)執(zhí)行這個(gè)程序。 假設(shè)要在 Web 網(wǎng)站上顯示銷(xiāo)售的商品，你可以利用 CGI 腳本來(lái)訪(fǎng)問(wèn)商品數(shù)據(jù)庫(kù)，并顯示結(jié) 果。通過(guò)使用簡(jiǎn)單的HTML 表單和 CGI 腳本，可以創(chuàng)建簡(jiǎn)單

8、的網(wǎng)上店面，這樣別人就可以 通過(guò)瀏覽器來(lái)購(gòu)買(mǎi)商品。編寫(xiě)CGI 腳本可以用多種語(yǔ)言，從Perl 到Visual Basic 都可以，這 使得掌握不同編程語(yǔ)言的人都能編寫(xiě)CGI 腳本。 不過(guò)，要?jiǎng)?chuàng)建動(dòng)態(tài)的Web 頁(yè)面，CGI 并不是最安全的方法。如果采用 CGI，將允許別人 在你的系統(tǒng)上執(zhí)行程序。大多數(shù)情況下這可能沒(méi)有問(wèn)題，但是倘若某個(gè)用戶(hù)有惡意企圖，則 很可能會(huì)利用這一點(diǎn)，讓系統(tǒng)運(yùn)行你本來(lái)不想運(yùn)行的程序。盡管存在這個(gè)缺陷，到如今CGI 仍在使用。 1.3.2 applet 很顯然，CGI 可以有所改進(jìn)。1995 年 5 月，Sun 公司的John Gage 和 Andreessen （目前在 N

9、etscape 通信公司）宣布一種新的編程語(yǔ)言誕生，這就是Java 。Netscape Navigator 為這種新 語(yǔ)言提供了支持，最初是為了支持機(jī)頂盒。（你可能原認(rèn)為最早涉足智能家居的公司是 Microsoft 和 Sony 其實(shí)不然。）就像所有革命都機(jī)緣巧合一樣，Java 和因特網(wǎng)的出現(xiàn)恰到好 處，在適當(dāng)?shù)臅r(shí)間、適當(dāng)?shù)牡攸c(diǎn)橫空出世，Java 在 Web 上發(fā)布僅幾個(gè)月，就已經(jīng)有成千上 萬(wàn)的人下載。由于Netscape 的Navigator 支持 Java ，動(dòng)態(tài)Web 頁(yè)面掀開(kāi)了新的一頁(yè)：applet 時(shí)代到來(lái)了。 applet 允許開(kāi)發(fā)人員編寫(xiě)可嵌入在 Web 頁(yè)面上的小應(yīng)用程序。只要

10、用戶(hù)使用支持 Java 的 瀏覽器，就可以在瀏覽器的 Java 虛擬機(jī)（Java Virtual Machine ，JVM ）中運(yùn)行 applet 。盡管 applet 可以做很多事情，但它也存在一些限制：通常不允許它讀寫(xiě)文件系統(tǒng)，它也不能加載 本地庫(kù)，而且可能無(wú)法啟動(dòng)客戶(hù)端上的程序。除了這些限制外，applet 是在一個(gè)沙箱安全模 型中運(yùn)行的，這是為了有助于防止用戶(hù)運(yùn)行惡意代碼。 對(duì)許多人來(lái)說(shuō)，最初接觸Java 編程語(yǔ)言就是從 applet 開(kāi)始的，當(dāng)時(shí)這是創(chuàng)建動(dòng)態(tài)Web 應(yīng) 用的一種絕好的方法。applet 允許你在瀏覽器中創(chuàng)建一個(gè)胖客戶(hù)應(yīng)用，不過(guò)要在平臺(tái)的安全 限制范圍內(nèi)。當(dāng)時(shí)，在很多領(lǐng)

11、域都廣泛使用了applet，但是，Web 社區(qū)并沒(méi)有完全被applet“ 征服”2。胖客戶(hù)的開(kāi)發(fā)人員都很熟悉一個(gè)問(wèn)題：必須在客戶(hù)端上部署適當(dāng)?shù)腏ava 版本。 因?yàn)閍pplet 在瀏覽器的虛擬機(jī)中運(yùn)行，所以開(kāi)發(fā)人員必須確?？蛻?hù)端安裝了適當(dāng)版本的 Java 。盡管這個(gè)問(wèn)題也可以解決，但它確實(shí)妨礙了applet 技術(shù)的進(jìn)一步推廣。而且如果 applet 寫(xiě)得不好，很可能對(duì)客戶(hù)主機(jī)造成影響，這使許多客戶(hù)對(duì)于是否采用基于 applet 的解 決方案猶豫不定。如果你還不太熟悉applet，請(qǐng)看圖1-1，圖中顯示了Sun 公司提供的時(shí)鐘 applet 。 圖1-1Sun 的時(shí)鐘applet 1.3.3 J

12、avaScript 與此同時(shí)，Netscape 創(chuàng)建了一種腳本語(yǔ)言，并最終命名為 JavaScript （建立原型時(shí)叫做 Mocha ，正式發(fā)布之前曾經(jīng)改名為L(zhǎng)iveWire 和 LiveScript ，不過(guò)最后終于確定為 JavaScript ）。設(shè)計(jì) JavaScript 是為了讓不太熟悉Java 的Web 設(shè)計(jì)人員和程序員能夠更輕松 地開(kāi)發(fā) applet （當(dāng)然，Microsoft 也推出了與JavaScript 相對(duì)應(yīng)的腳本語(yǔ)言，稱(chēng)為 VBScript ）。Netscape 請(qǐng)Brendan Eich 來(lái)設(shè)計(jì)和實(shí)現(xiàn)這種新語(yǔ)言，他認(rèn)為市場(chǎng)需要的是一種 動(dòng)態(tài)類(lèi)型腳本語(yǔ)言。由于缺乏開(kāi)發(fā)工具，

13、缺少有用的錯(cuò)誤消息和調(diào)試工具，JavaScript 很受 非議，但盡管如此，JavaScript 仍然是一種創(chuàng)建動(dòng)態(tài)Web 應(yīng)用的強(qiáng)大方法。 最初，創(chuàng)建 JavaScript 是為了幫助開(kāi)發(fā)人員動(dòng)態(tài)地修改頁(yè)面上的標(biāo)記，以便為客戶(hù)提供 更豐富的體驗(yàn)。人們?cè)絹?lái)越認(rèn)識(shí)到，頁(yè)面也可以當(dāng)作對(duì)象，因此文檔對(duì)象模型 （Document Object Model ，DOM ）應(yīng)運(yùn)而生。剛開(kāi)始，JavaScript 和 DOM 緊密地交織在一起，但最后它 們還是 “分道揚(yáng)鑣”，并各自發(fā)展。DOM 是頁(yè)面的一個(gè)完全面向?qū)ο蟮谋硎?，該?yè)面可以 用某種腳本語(yǔ)言 （如JavaScript 或VBScript ）進(jìn)行修改

14、。 最后，萬(wàn)維網(wǎng)協(xié)會(huì)（World Wide Web Consortium ，W3C ）介入，并完成了 DOM 的標(biāo)準(zhǔn) 化，而歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA ）批準(zhǔn) JavaScript 作為 ECMAScript 規(guī)約。根據(jù)這些標(biāo) 準(zhǔn)編寫(xiě)的頁(yè)面和腳本，在遵循相應(yīng)原則的任何瀏覽器上都應(yīng)該有相同的外觀和表現(xiàn)。 在最初的幾年中，JavaScript 的發(fā)展很是坎坷，這是許多因素造成的。首先，瀏覽器支持 很不一致，即使是今天，同樣的腳本在不同瀏覽器上也可能有不同的表現(xiàn)；其次，客戶(hù)可以 自由地把 JavaScript 關(guān)閉，由于存在一些已知的安全漏洞，往往鼓勵(lì)用戶(hù)把 JavaScript 關(guān)掉。 由于開(kāi)

15、發(fā)JavaScript 很有難度 （你會(huì)用 alert 嗎？），許多開(kāi)發(fā)人員退避三舍，有些開(kāi)發(fā)人員 干脆不考慮 JavaScript ，認(rèn)為這是圖形設(shè)計(jì)人員使用的一種 “玩具”語(yǔ)言。許多人曾試圖使 用、 試和調(diào)試復(fù)雜的JavaScript ，并為此身心俱疲，所以大多數(shù)人在經(jīng)歷了這種痛苦之后， 最終只能滿(mǎn)足于用JavaScript 創(chuàng)建簡(jiǎn)單的基于表單的應(yīng)用。 1.3.4 servlet、ASP 和 PHP哦，太多了！ 盡管 applet 是基于Web 的，但胖客戶(hù)應(yīng)用存在的許多問(wèn)題在 applet 上也有所體現(xiàn)。在大 量使用撥號(hào)連接的年代（就算是今天，撥號(hào)連接也很普遍），要下載一個(gè)復(fù)雜apple

16、t 的完整 代碼，要花很多時(shí)間，用戶(hù)不能承受。開(kāi)發(fā)人員還要考慮客戶(hù)端上的 Java 版本，有些虛擬 機(jī)還有更多的要求3。理想情況下只需提供靜態(tài)的Web 頁(yè)面就夠了，畢竟，這正是設(shè)計(jì)因 特網(wǎng)的本來(lái) 目的。當(dāng)然，盡管靜態(tài)頁(yè)面是靜態(tài)的，但是如果能在服務(wù)器上動(dòng) 態(tài) 地生成內(nèi)容， 再把靜態(tài)的內(nèi)容返回，這就太好了。 在 Java 問(wèn)世一年左右，Sun 引入了 servlet 。現(xiàn)在Java 代碼不用再像 applet 那樣在客戶(hù)端 瀏覽器中運(yùn)行了，它可以在你控制的一個(gè)應(yīng)用服務(wù)器上運(yùn)行。這樣，開(kāi)發(fā)人員就能充分利用 現(xiàn)有的業(yè)務(wù)應(yīng)用，而且，如果需要升級(jí)為最新的Java 版本，只需要考慮服務(wù)器就行了。Java 推

17、崇 “一次編寫(xiě)，到處運(yùn)行”，這一點(diǎn)使得開(kāi)發(fā)人員可以選擇最先進(jìn)的應(yīng)用服務(wù)器和服務(wù)器 環(huán)境，這也是這種新技術(shù)的另一個(gè)優(yōu)點(diǎn)。servlet 還可以取代 CGI 腳本。 servlet 向前邁出了很大一步。servlet 提供了對(duì)整個(gè) Java 應(yīng)用編程接口 （API ）的完全訪(fǎng) 問(wèn)，而且提供了一個(gè)完備的庫(kù)可以處理HTTP 。不過(guò)，servlet 不是十全十美的。使用 servlet 設(shè)計(jì)界面可能很困難。在典型的servlet 交互中，先要從用戶(hù)那里得到一些信息，完成某種業(yè) 務(wù)邏輯，然后使用一些“打印行”創(chuàng)建 HTML ，為用戶(hù)顯示結(jié)果。代碼清單1-1 所示的代碼 就相當(dāng)常見(jiàn)。 代碼清單1-1簡(jiǎn)單的s

18、ervlet 代碼 response.setContentType(text/html;charset=UTF 8); PrintWriter out = response.getWriter(); out.println(); out.println(); out.println(Servlet SimpleServlet); out.println(); out.println(); out.println(Hello World); out.println(Imagine if this were more complex.); out.println(); out.println();

19、 out.close(); 以上這一小段代碼可以生成圖1-2 所示的一個(gè)相當(dāng)簡(jiǎn)單的Web 頁(yè)面。 圖1-2代碼清單1-1 中簡(jiǎn)單servlet 的輸出 servlet 不 僅容易出錯(cuò)，很難生成可視化顯示，而且還無(wú)法讓開(kāi)發(fā)者盡展其才。一般地， 編寫(xiě)服務(wù)器端代碼的人往往是軟件開(kāi)發(fā)人員，他們只是對(duì)算法和編譯器很精通，但不是 能 設(shè)計(jì)公司精美網(wǎng)站的圖形設(shè)計(jì)人員。業(yè)務(wù)開(kāi)發(fā)人員不僅要編寫(xiě)業(yè)務(wù)邏輯，還必須考慮怎么創(chuàng) 建一致的設(shè)計(jì)。因此，很有必要將表示與業(yè)務(wù)邏輯分離。因此JSP （JavaServer Pages ）出現(xiàn) 了。 在某種程度上，JSP 是對(duì) Microsoft 的 Active Server P

20、ages (ASP ）做出的回應(yīng)。Microsoft 從 Sun 在 servlet 規(guī)約上所犯的錯(cuò)誤汲取了教訓(xùn)，并創(chuàng)建了ASP 來(lái)簡(jiǎn)化動(dòng)態(tài)頁(yè)面的開(kāi)發(fā)。 Microsoft 增加了非常好的工具支持，并與其 Web 服務(wù)器緊密集成。JSP 和 ASP 的設(shè)計(jì) 目的 都是為了將業(yè)務(wù)處理與頁(yè)面外觀相分離，從這個(gè)意義上講，二者是相似的。雖然存在一些技 術(shù)上的差別 （Sun 也從Microsoft 那里學(xué)到了教訓(xùn)），但它們有一個(gè)最大的共同點(diǎn)，即Web 設(shè)計(jì)人員能夠?qū)Ｐ脑O(shè)計(jì)頁(yè)面外觀，而軟件開(kāi)發(fā)人員可以專(zhuān)心開(kāi)發(fā)業(yè)務(wù)邏輯。代碼清單1-2 顯 示了一個(gè)簡(jiǎn)單的JSP 。 代碼清單1-2簡(jiǎn)單的JSP Hello W

21、orld Hello World This code is more familiar for Web developers. 這個(gè)代碼會(huì)生成圖1-3 所示的輸出。 圖1-3簡(jiǎn)單JSP 的輸出 當(dāng)然，Microsoft 和 Sun 并沒(méi)有壟斷服務(wù)器端解決方案。還有許多其他的方案在這個(gè)領(lǐng)域 都有一席之地，如PHP 和 ColdFusion 等等。有些開(kāi)發(fā)人員喜歡新奇的工具，還有一些則傾 向于更簡(jiǎn)單的語(yǔ)言。目前來(lái)看，所有這些解決方案完成的任務(wù)都是一樣的，它們都是要?jiǎng)討B(tài) 生成HTML 。在服務(wù)器端生成內(nèi)容可以解決發(fā)布問(wèn)題。不過(guò)，與使用胖客戶(hù)或 applet 所做的 工作相比，用戶(hù)從原始HTML 得到

22、的體驗(yàn)就太過(guò)單調(diào)和蒼白了。下面幾節(jié)將介紹幾種力圖 提供更豐富用戶(hù)體驗(yàn)的解決方案。 1.3.5 Flash 并不是只有 Microsoft 和 Sun 在努力尋找辦法來(lái)解決動(dòng)態(tài)Web 頁(yè)面問(wèn)題。1996 年夏天， FutureWave 發(fā)布了一個(gè)名叫FutureSplash Animator 的產(chǎn)品。這個(gè)產(chǎn)品起源于一個(gè)基于 Java 的 動(dòng)畫(huà)播放器，F(xiàn)utureWave 很快被Macromedia 兼并，Macromedia 則將這個(gè)產(chǎn)品改名為 Flash 。 利用 Flash ，設(shè)計(jì)人員可以創(chuàng)建令人驚嘆的動(dòng)態(tài)應(yīng)用。公司可以在Web 上發(fā)布高度交互 性的應(yīng)用，幾乎與胖客戶(hù)應(yīng)用相差無(wú)幾（見(jiàn)圖1-4

23、）。不同于applet、servlet 和 CGI 腳本， Flash 不需要編程技巧，很容易上手。在 20 世紀(jì) 90 年代末期，掌握Flash 是一個(gè)很重要的特 長(zhǎng)，因?yàn)樵S多老板都非常需要有這種技能的員工。不過(guò)，這種易用性也是有代價(jià)的。 圖1-4Flash 應(yīng)用 像許多解決方案一樣，F(xiàn)lash 需要客戶(hù)端軟件。盡管許多流行的操作系統(tǒng)和瀏覽器上都內(nèi) 置有所需的Shockwave 播放器插件，但并非普遍都有。雖然能免費(fèi)下載，但由于擔(dān)心感染病 毒，使得許多用戶(hù)都拒絕安裝這個(gè)軟件。Flash 應(yīng)用可能還需要大量網(wǎng)絡(luò)帶寬才能正常地工 作，另外，由于沒(méi)有廣泛的寬帶連接，F(xiàn)lash 的推廣受到局限 （因

24、此產(chǎn)生了 “跳過(guò)本頁(yè)”之 類(lèi)的鏈接）。雖然確有一些網(wǎng)站選擇建立多個(gè)版本的Web 應(yīng)用，分別適應(yīng)于不同的連接速 度，但是許多公司都無(wú)法承受支持兩個(gè)或更多網(wǎng)站所增加的開(kāi)發(fā)開(kāi)銷(xiāo)。 總之，創(chuàng)建 Flash 應(yīng)用需要專(zhuān)用的軟件和瀏覽器插件。applet 可以用文本編輯器編寫(xiě)，而 且有一個(gè)免費(fèi)的 Java 開(kāi)發(fā)包，F(xiàn)lash 則不同，使用完整的Flash 工具包需要按用戶(hù)數(shù)付費(fèi)，每 個(gè)用戶(hù)需要數(shù)百美元。盡管這些因素不是難以逾越的障礙，但它們確實(shí)減慢了Flash 在動(dòng)態(tài) Web 應(yīng)用道路上的前進(jìn)腳步。 1.3.6 DHTML 革命 當(dāng)Microsoft 和Netscape 發(fā)布其各自瀏覽器的第4 版時(shí)，We

25、b 開(kāi)發(fā)人員有了一個(gè)新的選擇： 動(dòng)態(tài)HTML （Dynamic HTML ，DHTML ）。與有些人想像的不同 DHTML 不是一個(gè)W3C 標(biāo) 準(zhǔn)，它更像是一種營(yíng)銷(xiāo)手段。實(shí)際上，DHTML 結(jié)合了HTML 、層疊樣式表 （Cascading Style Sheets ，CSS ）、JavaScript 和 DOM 。這些技術(shù)的結(jié)合使得開(kāi)發(fā)人員可以動(dòng)態(tài)地修改 Web 頁(yè)面的內(nèi)容和結(jié)構(gòu)。 最初 DHTML 的反響很好。不過(guò)，它需要的瀏覽器版本還沒(méi)有得到廣泛采用。盡管 IE 和 Netscape 都支持DHTML ，但是它們的實(shí)現(xiàn)大相徑庭，這要求開(kāi)發(fā)人員必須知道他們的客戶(hù) 使用什么瀏覽器。而這通常意

26、味著需要大量代碼來(lái)檢查瀏覽器的類(lèi)型和版本，這就進(jìn)一步增 加了開(kāi)發(fā)的開(kāi)銷(xiāo)。有些人對(duì)于嘗試這種方法很是遲疑，因?yàn)镈HTML 還沒(méi)有一個(gè)官方的標(biāo)準(zhǔn)。 不過(guò)，將來(lái)新標(biāo)準(zhǔn)有可能會(huì)出現(xiàn)。 1.3.7 XML 衍生語(yǔ)言 20 世紀(jì) 90 年代中期，基于SGML 衍生出了W3C 的可擴(kuò)展標(biāo)記語(yǔ)言 （eXtensible Markup Language ，XML ），自此以后，XML 變得極為流行。許多人把XML 視為解決所有計(jì)算機(jī) 開(kāi)發(fā)問(wèn)題的靈丹妙藥，以至于XML 幾乎無(wú)處不在。實(shí)際上，Microsoft 就已經(jīng)宣布，Office 12 將支持 XML 文件格式。 如今，我們至少有 4 種 XML 衍生語(yǔ)言可

27、以用來(lái)創(chuàng)建Web 應(yīng)用（W3C 的XHTML 不包括 在內(nèi)）：Mozilla 的XUL ；XAMJ ，這是結(jié)合Java 的一種開(kāi)源語(yǔ)言；Macromedia 的MXML ； Microsoft 的XAML 。 XUL ：XUL （讀作 “zool” ）代表XML 用戶(hù)界面語(yǔ)言 （XML User Interface Language ），由Mozilla 基金會(huì)推出。流行的Firefox 瀏覽器和 Thunderbird 郵件客戶(hù)端都 是用XUL 編寫(xiě)的。利用XUL ，開(kāi)發(fā)人員能構(gòu)建功能很豐富的應(yīng)用，這個(gè)應(yīng)用可以與因 特網(wǎng)連接，也可以不與因特網(wǎng)連接。為了方便那些熟悉DHTML 的開(kāi)發(fā)人員使用，

28、XUL 設(shè)計(jì)為可以跨平臺(tái)支持諸如窗口和按鈕等標(biāo)準(zhǔn)界面部件。雖然XUL 本身不是標(biāo)準(zhǔn)，但 它是基于各種標(biāo)準(zhǔn)的，如HTML 4.0 、CSS、DOM、XML 和 ECMAScript 等等。XUL 應(yīng) 用可以在瀏覽器上運(yùn)行，也可以安裝在客戶(hù)端主機(jī)上。 當(dāng)然，XUL 也不是沒(méi)有缺點(diǎn)。它需要 Gecko 引擎，而且目前IE 還沒(méi)有相應(yīng)的插件。 盡管 Firefox 在瀏覽器市場(chǎng)中已經(jīng)有了一定的份額，但少了IE 的支持還是影響很大，大 多數(shù)應(yīng)用都無(wú)法使用XUL 。目前開(kāi)展的很多項(xiàng)目都是力圖在多個(gè)平臺(tái)上使用 XUL ，包 括 Eclipse 。 XAML ：XAML （讀作 “zammel” ）是Micr

29、osoft 即將推出的操作系統(tǒng)（名為 Windows Vista ）的一個(gè)組件。XAML 是可擴(kuò)展應(yīng)用標(biāo)記語(yǔ)言 （eXtensible Application Markup Language ）的縮寫(xiě)，它為使用Vista 創(chuàng)建用戶(hù)界面定義了標(biāo)準(zhǔn)。與HTML 類(lèi)似， XAML 使用標(biāo)記來(lái)創(chuàng)建標(biāo)準(zhǔn)元素，如按鈕和文本框等。XAML 建立在 Microsoft 的 .NET 平臺(tái)之上，而且可以編譯為 .NET 類(lèi)。 XAML 的局限應(yīng)當(dāng)很清楚。作為Microsoft 的產(chǎn)品，它要求必須使用 Microsoft 的操 作系統(tǒng)。多數(shù)情況下特別是在大公司中，這可能不成問(wèn)題，但是有些小公司使用的不是 Micr

30、osoft 的操作系統(tǒng)，總不能削足適履吧，就像是沒(méi)有哪家公司會(huì)因?yàn)橘I(mǎi)家沒(méi)有開(kāi)某種 牌子的車(chē)來(lái)就把他拒之門(mén)外。Vista 交付的日期一再推遲，與此同時(shí)XAML 也有了很大 變化，不再只是一個(gè)播放器。據(jù)說(shuō)，在未來(lái)幾年內(nèi)，我們可能會(huì)看到一個(gè)全新的 XAML 。 MXML ：Macromedia 創(chuàng)建了 MXML ，作為與其Flex 技術(shù)一同使用的一種標(biāo)記語(yǔ)言。 MXML 是最佳體驗(yàn)標(biāo)記語(yǔ)言 （Maximum eXperience Markup Language ）的縮寫(xiě)，它與 HTML 很相似，可以以聲明的方式來(lái)設(shè)計(jì)界面。與XUL 和 XAML 類(lèi)似，MXML 提供了 更豐富的界面組件，如DataG

31、rid 和 TabNavigator，利用這些組件可以創(chuàng)建功能豐富的因 特網(wǎng)應(yīng)用。不過(guò)，MXML 不能獨(dú)立使用，它依賴(lài)于Flex 和 ActionScript 編程語(yǔ)言來(lái)編寫(xiě) 業(yè)務(wù)邏輯。 MXML 與Flash 有同樣的一些限制。它是專(zhuān)用的，而且依賴(lài)于價(jià)格昂貴的開(kāi)發(fā)和部 署環(huán)境。盡管將來(lái).NET 可能會(huì)對(duì) MXML 提供支持，但現(xiàn)在 Flex 只能在J2EE 應(yīng)用服務(wù) 器上運(yùn)行，如Tomcat 和 IBM 的WebSphere ，這就進(jìn)一步限制了 MXML 的廣泛采用。 XAMJ ：讓人欣喜的是，開(kāi)源社區(qū)又向有關(guān)界面設(shè)計(jì)的 XML 衍生語(yǔ)言領(lǐng)域增加了新 的成員。XAMJ 作為另一種跨平臺(tái)的語(yǔ)言

32、，為Web 應(yīng)用開(kāi)發(fā)人員又提供了一個(gè)工具。這 種衍生語(yǔ)言基于 Java ，而Java 是當(dāng)前最流行的面向?qū)ο笳Z(yǔ)言之一，XAMJ 也因此獲得了 面向?qū)ο笳Z(yǔ)言的強(qiáng)大功能。XAMJ 實(shí)際上想要替代基于 XAML 或HTML 的應(yīng)用，力圖 尋找一種更為安全的方法，既不依賴(lài)于某種特定的框架，也不需要高速的因特網(wǎng)連接。 XAMJ 是一種編譯型語(yǔ)言，建立在 “clientlet” （小客戶(hù)端）體系結(jié)構(gòu)之上，盡管基于 XAMJ 的程序也可以是獨(dú)立的應(yīng)用，但通常都是基于Web 的應(yīng)用。在撰寫(xiě)本書(shū)時(shí)， XAMJ 還太新，我們還沒(méi)有聽(tīng)到太多批評(píng)的聲音。不過(guò)，批評(píng)是肯定會(huì)有的，讓我們拭 目以待。 當(dāng)談到 “以X 開(kāi)頭

33、的東西”時(shí)，別忘了W3C XForms 規(guī)約。XForms 設(shè)計(jì)為支持更豐富 的用戶(hù)界面，而且能夠?qū)?shù)據(jù)與表示解耦合。毋庸置疑，XForms 數(shù)據(jù)是XML ，這樣你就能 使用現(xiàn)有的XML 技術(shù)，如XPath 和 XML Schema 。標(biāo)準(zhǔn)HTML 能做的，XForms 都能做，而 且XForms 還有更多功能，包括動(dòng)態(tài)檢查域值、與Web 服務(wù)集成等等。不同于其他的許多 W3C 規(guī)約，XForms 不需要新的瀏覽器，你可以使用現(xiàn)在已有的許多瀏覽器去實(shí)現(xiàn)。與大多 數(shù)XML 衍生語(yǔ)言一樣，XForms 是一種全新的方法，所以它要得到采納尚需時(shí)日。 1.3.8 基本問(wèn)題 有了以上了解，你怎么想？即使

34、是要求最苛刻的客戶(hù)應(yīng)用，也已經(jīng)把 Web 作為首選平臺(tái)。 很顯然，基于 Web 的應(yīng)用很容易部署，這種低門(mén)檻正是Web 應(yīng) 用最耀眼的地方。由于瀏覽 器無(wú)處不在，而且無(wú)需下載和安裝新的軟件，用戶(hù)利用基于瀏覽器的客戶(hù)端就能很輕松地嘗 試新的應(yīng)用。用戶(hù)只需點(diǎn)擊一個(gè)鏈接就能運(yùn)行 你的應(yīng)用程序，而不用先下載幾兆比特的安 裝程序才行?；跒g覽器的應(yīng)用也不考慮操作系統(tǒng)是什么，也就是說(shuō)，不僅使用不同操作系 統(tǒng)（如Linux 和 Mac OS X ）的人能運(yùn)行你的應(yīng)用程序，而且你也不必考慮針對(duì)不同的操作 系統(tǒng)開(kāi)發(fā)和維護(hù)多個(gè)安裝包。 既然基于 Web 的應(yīng)用是前所未有的好東西，那我們?yōu)槭裁催€要寫(xiě)這本書(shū)？如果回頭

35、看看 因特網(wǎng)的起源就可以知道，最初因特網(wǎng)實(shí)際上就是為了科學(xué)家們和學(xué)術(shù)機(jī)構(gòu)間交換文章和研 究成果，這是一種簡(jiǎn)單的請(qǐng)求/ 響應(yīng)模式。那時(shí)不需要會(huì)話(huà)狀態(tài)，也不需要購(gòu)物車(chē)，人們只 是在交換文檔。但現(xiàn)在你有很多辦法來(lái)創(chuàng)建動(dòng)態(tài)的Web 應(yīng)用，如果想讓?xiě)?yīng)用真正深入人心， 贏得大量的用戶(hù)，就必須在瀏覽器上大做文章，這說(shuō)明，因特網(wǎng)以請(qǐng)求/ 響應(yīng)模式作為基礎(chǔ)， 由此帶來(lái)的同步性對(duì)你造成了妨礙。 與Microsoft Word 或 Intuit Quicken 之類(lèi)的胖客戶(hù)應(yīng)用相比，Web 模型當(dāng)然只能根據(jù)一般 用戶(hù)需要做折中考慮。不過(guò)，由于Web 應(yīng)用很容易部署，而且瀏覽器的發(fā)展相當(dāng)迅速，這 意味著大多數(shù)用戶(hù)都已

36、經(jīng)學(xué)會(huì)了適應(yīng)。但是，還是有許多人認(rèn)為 Web 應(yīng)用只能算 “二等公 民”，給人的用戶(hù)體驗(yàn)不是太好。因?yàn)橐蛱鼐W(wǎng)是一個(gè)同步的請(qǐng)求/ 響應(yīng)系統(tǒng)，所以瀏覽器中 的整個(gè)頁(yè)面會(huì)進(jìn)行刷新。最初，這種簡(jiǎn)單的請(qǐng)求并沒(méi)有什么問(wèn)題。如果用戶(hù)做了一兩處修改， 就必須向服務(wù)器發(fā)回整個(gè)文檔，而且要重新繪制整個(gè)頁(yè)面。盡管這樣是可行的，但是這種完 全刷新的局限，意味著應(yīng)用確實(shí)還很粗糙。 這并不是說(shuō)開(kāi)發(fā)人員只是袖手旁觀，全然接受這種狀況。Microsoft 對(duì)于交互式應(yīng)用有一 定了解，而且對(duì)于這種標(biāo)準(zhǔn)請(qǐng)求/ 響應(yīng)模式的限制一直都不滿(mǎn)意，因此提出了遠(yuǎn)程腳本 （remote scripting ）的概念。遠(yuǎn)程腳本看似神奇，其實(shí)很簡(jiǎn)

37、單：它允許開(kāi)發(fā)人員創(chuàng)建以異步 方式與服務(wù)器交互的頁(yè)面。例如，顧客可以從下拉列表中選擇狀態(tài)，這樣就會(huì)在服務(wù)器上運(yùn) 行一個(gè)腳本，計(jì)算顧客的運(yùn)費(fèi)。更重要的是，顯示這些運(yùn)費(fèi)時(shí)無(wú)需刷新整個(gè)面！當(dāng)然， Microsoft 的方案只適用于它自己的技術(shù)，而且需要 Java ，但有了這個(gè)進(jìn)步，說(shuō)明更豐富的瀏 覽器應(yīng)用并不是海市蜃樓。 對(duì)于同步頁(yè)面刷新問(wèn)題還有其他一些解決方案。針對(duì) Microsoft 的遠(yuǎn)程腳本，Brent Ashley 在創(chuàng)建 JavaScript 遠(yuǎn)程腳本（JavaScript Remote Scripting ，JSRS ）時(shí)開(kāi)發(fā)了一個(gè)平臺(tái) 中立 （獨(dú)立于平臺(tái)）的方案。JSRS 依賴(lài)于一個(gè)

38、客戶(hù)端 JavaScript 庫(kù)和 DHTML ，可以向服務(wù) 器做異步的調(diào)用。與此同時(shí)，許多人利用了 IFRAME 標(biāo)記，可以只加載頁(yè)面中的某些部分， 或者向服務(wù)器做 “隱藏”的調(diào)用。盡管這是一個(gè)可行的方法，而且也為很多人所用，但它肯 定不是最理想的，還有待改善。 1.3.9 Ajax 終于談到這里了：客戶(hù)希望得到一個(gè)功能更完備的應(yīng)用，而開(kāi)發(fā)人員想避開(kāi)繁瑣的部署 工作，不想把可執(zhí)行文件逐個(gè)地部署到數(shù)以千計(jì)的工作站上。我們已經(jīng)做過(guò)很多嘗試，但是 任何方法都不像它原來(lái)標(biāo)榜的那么完美。不過(guò)，最近一個(gè)極其強(qiáng)大的工具橫空出世了。 是的，我們又有了一個(gè)新的選擇，新的工具，可以創(chuàng)建的確豐富的基于瀏覽器的應(yīng)用

39、。 這就是Ajax 。Ajax 不只是一個(gè)特定的技術(shù)，更應(yīng)算是一種技巧，不過(guò)前面提到的 JavaScript 是其主要組件。我們知道，你可能會(huì)說(shuō)“JavaScript 根本不值一提”，但是由于Ajax 的出現(xiàn)， 人們對(duì)這種語(yǔ)言又有了新的興趣，應(yīng)用和 試框架再加上更優(yōu)秀的工具支持，減輕了開(kāi)發(fā)人 員肩頭的重?fù)?dān)。隨著 Atlas 的引入，Microsoft 對(duì) Ajax 投入了大力支持，而名聲不太好的 Rails Web 框架也預(yù)置了充分的Ajax 支持。在 Java 世界中，Sun 已經(jīng)在其 BluePrints Solutions Catalog 中增加了許多Ajax 組件。 坦率地講，Ajax

40、 并不是什么新鮮玩藝。實(shí)際上，與這個(gè)詞相關(guān)的 “最新”術(shù)語(yǔ)就是 XMLHttpRequest 對(duì)象 （XHR ），它早在 IE 5 （于1999 年春天發(fā)布）中就已經(jīng)出現(xiàn)了，是作 為 Active X 控件露面的。不過(guò)，最近出現(xiàn)的新現(xiàn)象是瀏覽器的支持。原先，XHR 對(duì)象只在 IE 中得到支持（因此限制了它的使用），但是從 Mozilla 1.0 和 Safari 1.2 開(kāi)始，對(duì)XHR 對(duì)象 的支持開(kāi)始普及。這個(gè)很少使用的對(duì)象和相關(guān)的基本概念甚至已經(jīng)出現(xiàn)在W3C 標(biāo)準(zhǔn)中： DOM Level 3 加載和保存規(guī)約 （DOM Level 3 Load and Save Specification

41、）?，F(xiàn)在，特別是 隨著 Google Maps、Google Suggest 、Gmail、Flickr 、Netflix 和 A9 等應(yīng)用變得越來(lái)越炙手可 熱，XHR 也已經(jīng)成為事實(shí)上的標(biāo)準(zhǔn)。 與前面幾頁(yè)提到的方法不同，Ajax 在大多數(shù)現(xiàn)代瀏覽器中都能使用，而且不需要任何專(zhuān) 門(mén)的軟件或硬件。實(shí)際上，這種方法的一大優(yōu) 就是開(kāi)發(fā)人員不需要學(xué)習(xí)一種新的語(yǔ)言，也 不必完全丟掉他們?cè)日莆盏姆?wù)器端技術(shù)。Ajax 是一種客戶(hù)端方法，可以與 J2EE 、.NET 、PHP 、Ruby 和 CGI 腳本交互，它并不關(guān)心服務(wù)器是什么。盡管存在一些很小 的安全限制，你還是可以現(xiàn)在就開(kāi)始使用Ajax ，而且能

42、充分利用你原有的知識(shí)。 你可能會(huì)問(wèn)： “誰(shuí)在使用 Ajax ？”前面已經(jīng)提到，Google 顯然是最早采用 Ajax 的公司 之一，而且已經(jīng)用在很多技術(shù)上，隨便說(shuō)幾個(gè)應(yīng)用，如Google Maps、Google Suggest 和 Gmail 。Yahoo!也開(kāi)始引入Ajax 控件，另外Amazon 提供了一個(gè)簡(jiǎn)潔的搜索工具，其中大量 使用了這個(gè)技術(shù)，例如，在鉆石的某一方面上移動(dòng)滑塊，這會(huì)帶來(lái)動(dòng)態(tài)更新的結(jié)果 （見(jiàn)圖1 5 ）。并不是每次改變你的查詢(xún)標(biāo)準(zhǔn)時(shí)都會(huì)更新頁(yè)面，而是在移動(dòng)滑塊時(shí)就會(huì)查詢(xún)服務(wù)器， 從而更快、更容易地縮小你的選擇范圍。 圖1-5Amazon 的鉆石搜索頁(yè)面 Netflix 是

43、一家很有名的DVD 租借公司，它也使用了Ajax 。當(dāng)用戶(hù)瀏覽影片時(shí)，可以得 到更詳細(xì)的信息。當(dāng)顧客把鼠標(biāo)放在一個(gè)影片的圖片上時(shí)，這個(gè)影片的ID 就會(huì)發(fā)送到中心 服務(wù)器，然后會(huì)出現(xiàn)一個(gè) “氣泡”，提供這個(gè)影片的更多細(xì)節(jié) （見(jiàn)圖1-6）。同樣，頁(yè)面并 不會(huì)刷新，每個(gè)影片的詳細(xì)信息并不是放在隱藏的表單域中。利用這種方法，Netflix 可以提 供影片的更多信息，而不會(huì)把頁(yè)面弄亂。顧客瀏覽起來(lái)也更容易，他們不必點(diǎn)擊影片，看完 影片詳細(xì)信息后再點(diǎn)擊回到影片列表頁(yè)面；他們只需把鼠標(biāo)停在影片上，就這么簡(jiǎn)單！我們 想要強(qiáng)調(diào)的是，Ajax 并不限于.com之類(lèi)的網(wǎng)站使用，普通公司的開(kāi)發(fā)人員也開(kāi)始涉足這個(gè) 技術(shù)

44、，有些人已經(jīng)在使用 Ajax 來(lái)改善原來(lái)很丑陋的驗(yàn)證方案，或者用于動(dòng)態(tài)地獲取數(shù)據(jù)了。 圖1-6Netflix 的瀏覽頁(yè)面特性 關(guān)鍵在于，因特網(wǎng)默認(rèn)的請(qǐng)求/ 響應(yīng)模式有了重大轉(zhuǎn)變，這正是Ajax 的核心所在，盡管 這并非全新的內(nèi)容。Web 應(yīng) 用開(kāi)發(fā)人員現(xiàn)在可以自由地與服務(wù)器異步交互，這說(shuō)明他們可 以完成許多原本只能在胖客戶(hù)上完成的任務(wù)。例如，當(dāng)用戶(hù)輸入郵政編碼時(shí)，可以驗(yàn)證它是 否正確，然 后自動(dòng)用相應(yīng)的城市名和州名填充到表單中的其他部分；或者，當(dāng)用戶(hù)選擇美 國(guó)時(shí)，可以引入美國(guó)各個(gè)州的一個(gè)下拉列表。以前也可以用其他方式模擬這些工作，但 是 使用Ajax 的話(huà)，這些工作會(huì)更加簡(jiǎn)單。 那么，是誰(shuí)發(fā)明

45、了Ajax ？要找出真正的源頭，總免不了一場(chǎng)爭(zhēng)論。不過(guò)有一點(diǎn)是確定的， 2005 年 2 月，Adaptive Path 的Jesse James Garrett 最早創(chuàng)造了這個(gè)詞。在他的文章Ajax: A New Approach to Web Applications （Ajax ：Web 應(yīng)用的一種新方法）中，Garrett 討論了如何 消除胖客戶(hù)（或桌面）應(yīng)用與瘦客戶(hù)（或 Web ）應(yīng)用之間的界限。當(dāng)然，當(dāng)Google 在 Google Labs 發(fā)布 Google Maps 和 Google Suggest 時(shí)，這個(gè)技術(shù)才真正為人所認(rèn)識(shí)，而且此前 已經(jīng)有許多這方面的文章了。但確實(shí)是

46、Garrett 最早提出了這個(gè)好名字，否則我們就得啰啰 嗦嗦地說(shuō)上一大堆：異步 （Asynchronous ）、XMLHttpRequest 、JavaScript 、CSS、DOM 等 等。盡管原來(lái)把Ajax 認(rèn)為是 Asynchronous JavaScript + XML （異步JavaScript + XML ）的縮 寫(xiě)，但如今，這個(gè)詞的覆蓋面有所擴(kuò)展，把允許瀏覽器與服務(wù)器通信而無(wú)需刷新當(dāng)前頁(yè)面的 技術(shù)都涵蓋在內(nèi)。 你可能會(huì)說(shuō)： “哦，那有什么大不了的？”這么說(shuō)吧，使用XHR 而且與服務(wù)器異步通 信，就能創(chuàng)建更加動(dòng)態(tài)的Web 應(yīng)用。例如，假設(shè)你有一個(gè)下拉列表，它是根據(jù)另外一個(gè)域 或下拉

47、列表的輸入來(lái)填寫(xiě)的。在正常情況下，必須在加載第一個(gè)頁(yè)面時(shí)把所有數(shù)據(jù)都發(fā)送給 客戶(hù)端，然后使用 JavaScript 根據(jù)輸入來(lái)填寫(xiě)下拉列表。這么做并不困難，但是會(huì)讓頁(yè)面變 得很臃腫，取決于這個(gè)下拉列表到底有多 “動(dòng)態(tài)”，頁(yè)面有可能膨脹得過(guò)大，從而出現(xiàn)問(wèn)題。 利用Ajax ，當(dāng)作為觸發(fā)源的域有變化，或者失去了輸入焦點(diǎn)，就可以向服務(wù)器發(fā)一個(gè)簡(jiǎn)單的 請(qǐng)求，只要求得到更新下拉列表所需的部分信息即可。 來(lái)單獨(dú)考慮一下驗(yàn)證。你寫(xiě)過(guò)多少次JavaScript 驗(yàn)證邏輯？用 Java 或 C#編寫(xiě)驗(yàn)證邏輯可 能很簡(jiǎn)單，但是由于JavaScript 缺乏很好的調(diào)試工具，再加上它是一種弱類(lèi)型語(yǔ)言，所以用 Java

48、Script 編寫(xiě)驗(yàn)證邏輯實(shí)在是一件讓人頭疼的事情，而且很容易出錯(cuò)。服務(wù)器上還很有可 能重復(fù)這些客戶(hù)端驗(yàn)證規(guī)則。使用XHR ，可以對(duì)服務(wù)器做一個(gè)調(diào)用，觸發(fā)某一組驗(yàn)證規(guī)則。 這些規(guī)則可能比你用 JavaScript 編寫(xiě)的任何規(guī)則都更豐富、更復(fù)雜，而且你還能得到功能強(qiáng) 大的調(diào)試工具和集成開(kāi)發(fā)環(huán)境 （IDE ）。 你現(xiàn)在可能又會(huì)說(shuō)： “這些事情我早已經(jīng)用 IFRAME 或隱藏框架做到了?！蔽覀兩踔吝€ 使用這種技術(shù)來(lái)提交或刷新過(guò)頁(yè)面的一部分，而不是整個(gè)瀏覽器（頁(yè)面）。不能不承認(rèn)，這 確實(shí)可行。不過(guò)，許多人認(rèn)為這種方法只是一種修補(bǔ)手段，以彌補(bǔ)XHR 原來(lái)缺乏對(duì)跨瀏覽 器的支持。作為 Ajax 的核心，

49、XHR 對(duì)象設(shè)計(jì)為允許從服務(wù)器異步地獲取任意的數(shù)據(jù)。 我們討論過(guò)，傳統(tǒng)的Web 應(yīng)用遵循一種請(qǐng)求/ 響應(yīng)模式。如果沒(méi)有Ajax ，對(duì)于每個(gè)請(qǐng)求 都會(huì)重新加載整個(gè)頁(yè)面（或者利用 IFRAME ，則是部分頁(yè)面）。原來(lái)查看的頁(yè)面會(huì)放到瀏覽 器的歷史棧中（不過(guò)，如果使用了 IFRAME ，點(diǎn)擊 “后退”按鈕不一定能得到用戶(hù)期望的歷 史頁(yè)面）。與此不同，用XHR 做出的請(qǐng)求不會(huì)記錄在瀏覽器的歷史中。如果你的用戶(hù)習(xí)慣 于使用 “后退”按鈕在 Web 應(yīng)用中進(jìn)行導(dǎo)航，就可能會(huì)產(chǎn)生問(wèn)題。 1.4 可用性問(wèn)題 前面談到的都是用戶(hù)的期望，除此以外，可用性也不能不提。Ajax 方法相當(dāng)新，還沒(méi)有多少 成熟的最佳實(shí)踐

50、。不過(guò)，標(biāo)準(zhǔn)Web 設(shè)計(jì)原則還是適用的。隨著時(shí)間推移，當(dāng)越來(lái)越多的人 開(kāi)始嘗試這種方法時(shí)，就會(huì)發(fā)現(xiàn)可能存在哪些限制，并建立適當(dāng)?shù)闹笇?dǎo)原則。也就是說(shuō)，你 應(yīng)該讓用戶(hù)來(lái)指導(dǎo)你。根據(jù)在應(yīng)用中使用 Ajax 的方式，你可能會(huì)動(dòng)態(tài)地改變頁(yè)面中的某些 部分，習(xí)慣于整個(gè)瀏覽器刷新的用戶(hù)可能不會(huì)注意到與以前相比有什么變化。這個(gè)問(wèn)題引出 了一些新的特性，如37signals 所普及的黃褪技術(shù)（Yellow Fade Technique ，YFT ），這個(gè)特 性已經(jīng)用在 Ajax 的招牌應(yīng)用 Basecamp 中了。 基本說(shuō)來(lái)，YFT 是指 “取頁(yè)面中有變化的部分，并置為黃色”。假設(shè)你的應(yīng)用原本沒(méi)有 大量使用黃色

51、，用戶(hù)就很可能會(huì)注意到這種改變。過(guò)一段時(shí)間后，再讓黃色逐漸褪色，直到 恢復(fù)為原來(lái)的背景色。當(dāng)然，你也可以選用你喜歡的其他顏色，只要能把用戶(hù)的注意力吸引 到有變化的部分。 可能YTF 并不適用于你的應(yīng)用，你也可以選擇用一種不那么張揚(yáng)但仍很有用的方式來(lái)提 醒用戶(hù)。Gmail 在右上角顯示了一個(gè)閃動(dòng)的紅色 “Loading”加載記號(hào)，提醒用戶(hù)正在獲取數(shù) 據(jù) （見(jiàn)圖1-7）。 圖1-7Gmail 的 “Loading”記號(hào) 究竟要使用YFT 還是其他類(lèi)似的技術(shù)，實(shí)際上取決于你的用戶(hù)。最簡(jiǎn)單的方法是讓一組 用戶(hù)代表來(lái)進(jìn)行 試。可以通過(guò)文字問(wèn)卷，也可以使用基于Web 的原型應(yīng)用，這要看你處 在設(shè)計(jì)過(guò)程的哪

52、個(gè)階段。但是不論如何 試，在真正采用 Ajax 完成復(fù)雜設(shè)計(jì)之前都應(yīng)該取 得一些用戶(hù)反饋。 而且要從小處做起。在剛開(kāi)始使用Ajax 時(shí)，不應(yīng)該馬上就創(chuàng)建一個(gè)可調(diào)整列的動(dòng)態(tài)門(mén)戶(hù) 網(wǎng)站，而是應(yīng)該先試著處理客戶(hù)端驗(yàn)證，逐步轉(zhuǎn)向服務(wù)器端。待有所了解后，可以再?lài)L試更 動(dòng)態(tài)的使用，如填寫(xiě)一個(gè)下拉列表，或者設(shè)置某些默認(rèn)文本。 不管你要如何應(yīng)用Ajax ，記住別做稀奇古怪的事情。我們知道，這不算是一個(gè)學(xué)術(shù)性的 建議。不過(guò)，目前這方面還沒(méi)有嚴(yán)格的規(guī)則。先聽(tīng)聽(tīng)用戶(hù)怎么說(shuō)，部署之前一定要先做 試， 而且要記住，如果太過(guò)古怪，用戶(hù)很快就會(huì)點(diǎn)擊 “跳過(guò)本頁(yè)”鏈接跳過(guò)你精心設(shè)計(jì)的這些部 分。 要知道使用Ajax 時(shí)有幾個(gè)

53、常犯的錯(cuò)誤。我們已經(jīng)討論過(guò)，有變化時(shí)如何向用戶(hù)提供可視 化的提示，不僅如此，Ajax 還會(huì)以其他方式改變標(biāo)準(zhǔn)的 Web 方法。首先，不同于IFRAME 和隱藏框架，通過(guò)XHR 做出請(qǐng)求不會(huì)修改瀏覽器的歷史棧。在許多情況下這沒(méi)有什么問(wèn)題 （你可能會(huì)點(diǎn)擊后退箭頭，只是要看看是不是什么都沒(méi)有改變，但這么做能有幾次呢？）， 不過(guò)，如果你的用戶(hù)確實(shí)想用后退按鈕，就有問(wèn)題了。 其次，與其他基于瀏覽器的方法不同，Ajax 不會(huì)修改地址欄中顯示的鏈接，這表明你不 能輕松地為一個(gè)頁(yè)面建立書(shū)簽，或者向朋友發(fā)送一個(gè)鏈接。對(duì)于許多應(yīng)用來(lái)說(shuō)，可能沒(méi)有這 個(gè)要求，但是如果你的網(wǎng)站專(zhuān)門(mén)為人提供行車(chē)路線(xiàn)之類(lèi)的東西，就要針對(duì)這

54、個(gè)問(wèn)題提供一個(gè) 解決方案。 有一點(diǎn)很重要，使用Ajax 不要過(guò)度。記住，JavaScript 會(huì)在客戶(hù)端的瀏覽器上運(yùn)行，如 果有數(shù)千行 JavaScript 代碼，可能會(huì)讓用戶(hù)感覺(jué)速度太慢。如果腳本編寫(xiě)不當(dāng)，就會(huì)很快失 去控制，特別是當(dāng)通信量增加時(shí)。 Ajax 允許你異步地完成操作，這個(gè)最大的優(yōu)點(diǎn)同時(shí)也是它最突出的缺點(diǎn)。我們以前總是 告訴用戶(hù)，Web 應(yīng)用是以一種請(qǐng)求/ 響應(yīng)模式完成操作的，用戶(hù)也已經(jīng)接受了這種思想。但 是用了Ajax ，就不再有這個(gè)限制。我們可以只修改頁(yè)面的一部分，如果用戶(hù)沒(méi)想到這一點(diǎn)， 他們很可能會(huì)被搞糊涂。所以，你要注意一定要讓用戶(hù)明白這一點(diǎn)，不要想當(dāng)然地以為他們 知道。

55、記住，只要有疑問(wèn)，就要請(qǐng)用戶(hù)代表進(jìn)行 試！ 1.5 相關(guān)技術(shù) 當(dāng)你看到本書(shū)時(shí)，可能已經(jīng)了解了在應(yīng)用中實(shí)現(xiàn)Ajax 所需的大多數(shù)技術(shù)。重申一句，我 們想強(qiáng)調(diào)的是，Ajax 是一個(gè)客戶(hù)端技術(shù)，不論你現(xiàn)在使用何種服務(wù)器端技術(shù)，都能使用 Ajax ，而不管使用的是Java 、.NET 、Ruby 、PHP 還是 CGI 。實(shí)際上，在這本書(shū)中我們并不 考慮服務(wù)器端，而且假設(shè)你已經(jīng)很清楚如何結(jié)合日常工作中使用的服務(wù)器端技術(shù)。在后面的 幾百頁(yè)中，我們強(qiáng)調(diào)的重點(diǎn)是客戶(hù)端技術(shù)和方法，創(chuàng)建豐富的基于瀏覽器的應(yīng)用時(shí)需要用到 這些技術(shù)。 盡管可以使用你喜歡的任何服務(wù)器端技術(shù)，但當(dāng)使用 Ajax 時(shí)還是需要轉(zhuǎn)變一下思想

56、。在 一般的Web 應(yīng)用中，服務(wù)器端代碼會(huì)呈現(xiàn)一個(gè)完整的頁(yè)面，并涉及一個(gè)完整的工作單元。 利用Ajax ，可能只返回一點(diǎn)點(diǎn)文本，而且只涉及一個(gè)業(yè)務(wù)應(yīng)用的很小子集。對(duì)于大多數(shù)有經(jīng) 驗(yàn)的Web 開(kāi)發(fā)人員來(lái)說(shuō)，理解起來(lái)沒(méi)有什么問(wèn)題，但是一定要記住這一點(diǎn)。 一些新興的框架有助于開(kāi)發(fā)人員跳出Ajax 的一些細(xì)節(jié)。不過(guò)，你還是要對(duì) JavaScript 有 所了解。我們知道，JavaScript 用起來(lái)可能很費(fèi)勁。但很遺憾，對(duì)此沒(méi)有什么辦法。我們大 多數(shù)人都學(xué)過(guò)這么一招，把 “alert”作為一種系統(tǒng)類(lèi)型輸出來(lái)幫助調(diào)試，糟糕的是，這種技 術(shù)使用得還很廣。不過(guò)，現(xiàn)在我們有了新的利器。 除了JavaScrip

57、t ，你還要熟悉其他一些與表示相關(guān)的技術(shù)，如HTML 、DOM 和 CSS 。你 不必是這方面的專(zhuān)家，但是基本了解還是必要的。本書(shū)中我們會(huì)談到你需要知道的大多數(shù)內(nèi) 容，沒(méi)有談到的內(nèi)容可以參考網(wǎng)上的資源。 關(guān)于 試驅(qū)動(dòng) （你肯定寫(xiě)過(guò)單元 試，對(duì)不對(duì)？），我們會(huì)介紹JsUnit 和 Selenium （見(jiàn) 圖1-8）。利用這些工具，可以先開(kāi)發(fā)JavaScript 試，并檢查瀏覽器兼容性 試。通常認(rèn)為， 下一代開(kāi)發(fā)環(huán)境會(huì)對(duì) JavaScript 提供更好的支持，另外一些與Ajax 相關(guān)的技術(shù)會(huì)進(jìn)一步減輕 開(kāi)發(fā)人員的負(fù)擔(dān)。正在不斷出現(xiàn)的腳本和框架也會(huì)使開(kāi)發(fā)變得更為簡(jiǎn)單。 圖1-8Selenium 1.

58、6 使用場(chǎng)合 既然你已經(jīng)對(duì) Ajax 產(chǎn)生了興趣，還要知道重要的一點(diǎn)，即什么時(shí)候應(yīng)該使用Ajax 技術(shù)， 而什么時(shí)候不該用。首先，不要害怕在應(yīng)用中嘗試新的方法。我們相信，幾乎每個(gè) Web 應(yīng) 用都能從 Ajax 技術(shù)中獲益，只不過(guò)不要矯枉過(guò)正，過(guò)于離譜就行了。從驗(yàn)證開(kāi)始就很合適， 但是不要限制你的主動(dòng)性。你當(dāng)然可以使用Ajax 提交數(shù)據(jù)，但也許不能把它作為提交數(shù)據(jù) 的主要方法。 其次，惟一會(huì)影響你應(yīng)用 Ajax 的就是瀏覽器問(wèn)題。如果大量用戶(hù)（或者特別重要的用戶(hù)） 還在使用比較舊的瀏覽器，如IE 5 、Safari 1.2 或Mozilla 1.0 之前的版本，Ajax 技術(shù)就不能奏 效。如果

59、這是一些很重要的用戶(hù)，你就要使用針對(duì) 目標(biāo)用戶(hù)的跨瀏覽器的方法，而放棄 Ajax ，或者開(kāi)發(fā)一個(gè)可以妥善降級(jí)的網(wǎng)站。瀏覽器支持可能不是一個(gè)重要因素，因?yàn)?Netscape Navigator 4 在市場(chǎng)上的份額很小。不過(guò)，還是應(yīng)該查看Web 日志，看看你的應(yīng)用適 用什么技術(shù)。 如前所述，驗(yàn)證和表單填寫(xiě)就非常適合采用 Ajax 實(shí)現(xiàn)。還可以使用DOM 的 “拖”技術(shù) 建立真正動(dòng)態(tài)的網(wǎng)站，如Google 的個(gè)性化主頁(yè) （見(jiàn)圖1-9）。 圖1-9Google 的個(gè)性化主頁(yè) 可以看到，Ajax 為Web 應(yīng)用開(kāi)發(fā)提供了新的機(jī)會(huì)。你不會(huì)再因?yàn)橐酝膶?zhuān)用技術(shù)或技 術(shù)折中方案而受到妨礙。利用Ajax ，胖客

60、戶(hù)與瘦客戶(hù)之間的界限不再分明，真正的贏家則是 你的用戶(hù)。 1.7 設(shè)計(jì)考慮 既然對(duì)在哪里使用Aj ax 已經(jīng)有所認(rèn)識(shí)，下面再來(lái)談?wù)剳?yīng)用 Aj ax 的一些設(shè)計(jì)考慮。許多 原則與Web 應(yīng)用的原則并無(wú)不同，不過(guò)還是有必要強(qiáng)調(diào)一下。要盡力減少客戶(hù)和服務(wù)器之 間的通信量。如果應(yīng)用得當(dāng)，Aj ax 會(huì)使你的應(yīng)用響應(yīng)更快，但是如果每次用戶(hù)從一個(gè)域移到 另一個(gè)域時(shí)你都來(lái)回傳遞超量的數(shù)據(jù)，用戶(hù)肯定不會(huì)滿(mǎn)意。如果有疑問(wèn)，按標(biāo)準(zhǔn)約定行事。 如果大多數(shù)應(yīng)用都那么做，可能你也應(yīng)該那么做。如果還有問(wèn)題，可以看看Web 桌面應(yīng)用 的有關(guān)標(biāo)準(zhǔn)。為此已經(jīng)建立了一些模式，而且以后還會(huì)有更多的模式 （）。 在剛開(kāi)始使用Ajax