 |
級別: 初級 Chris Laffra (laffrac@us.ibm.com), 性能工程團(tuán)隊主管, IBM 2006 年 9 月 11 日 最近對 Ajax（Asynchronous JavaScript and XML）的興趣高漲了起來。種種 Ajax 應(yīng)用程序提供了比傳統(tǒng) Web 頁面更高的交互性和更豐富的用戶體驗(yàn)。使用 Ajax 可以前所未有地部署新的、革命性的聚合和表示技術(shù)。受到 Alex Bosworth 列舉的 Ajax 錯誤的觸動，Chris Laffra 匯集了每位開發(fā)人員在考慮使用 Ajax 技術(shù)之前都應(yīng)該認(rèn)真思考的一些問題，分為兩部分闡述。一些是潛在的問題，多數(shù)強(qiáng)調(diào)了 Ajax 的巨大潛力。 最近風(fēng)險資本日程表和開發(fā)人員博客上最熱門的話題是 Ajax。Ajax 的主要成分已經(jīng)存在了十年，因此 Ajax 實(shí)際上沒有多少新東西。但是 Ajax 這個名字，代表 Asynchronous JavaScript and XML（異步 JavaScript 和 XML），是全新的，Adaptive Path 的 Jesse James Garrett 在 2005 年創(chuàng)造了這個詞。以 Dynamic HTML (DHTML) 為榜樣，Ajax 也想避免與服務(wù)器之間的往復(fù)通信。Ajax 應(yīng)用程序更新某些信息時，它不是替換 Web 瀏覽器中的整個頁面。相反，JavaScript 代碼向服務(wù)器發(fā)送一個 XML 請求，然后替換選擇的 DOM 子集來更新當(dāng)前頁面。
在發(fā)明 Ajax 之前，DHTML 通常僅限于實(shí)現(xiàn)菜單或目錄表、有限的動畫形式和帶標(biāo)簽的文件夾。要在不同的瀏覽器之間移植 DHTML Web 站點(diǎn)很困難。這就為 Bindows? 這樣提供開發(fā)有趣的豐富客戶機(jī)的完善抽象的公司制造了一個市場，Eclipse? FAQs 的在線版本就是一個很好的例子（相關(guān)鏈接請參閱 參考資料）。 可以說，到目前為止最有影響的 Ajax 應(yīng)用程序是 Google? Maps。它已經(jīng)建立了一套全新的計算機(jī)科學(xué)法則。（在 Google 上搜索 “Hacking Google Map” 返回了 200 多萬個結(jié)果，如圖所示。）模仿 Google Map 成功的例子包括 transparent maps、Bus Monster 和 HousingMaps.com。就個人而言，我最感興趣的是 Google 的個性化特點(diǎn)，您可以用 DHTML 將已有的和新的內(nèi)容拖放到個性化的主頁上。自定義 mashup（即混合應(yīng)用程序）似乎暗示用戶可以執(zhí)行任何 Google 搜索并將選擇的主機(jī)添加到自己的主頁上。 如果正在考慮建立自己的 Ajax 應(yīng)用程序，不可避免地要思考一下這兩篇文章中討論的問題。本文介紹了這種新技術(shù)固有的潛在能力和缺陷。要注意，本文不適合 Ajax 初學(xué)者，比方說這不是關(guān)于如何使用 XmlHTTPRequest 的教程。它的目標(biāo)是那些熟悉該技術(shù)的基礎(chǔ)但希望就如何使用 Ajax 特性實(shí)現(xiàn)網(wǎng)站得到更多指導(dǎo)的讀者。參考資料 給出了 Ajax 入門資料的一些鏈接。 要是我有一把錘子…… “小的時候，大人們說 ‘人家都這么做’ 是做某件事最愚蠢的理由。現(xiàn)在卻成了選擇某個軟件包的標(biāo)準(zhǔn)理由?！薄?Barry Gehm 決策的時候，一種很強(qiáng)的認(rèn)知偏見是跟風(fēng)效果，即一種眾所周知的心理現(xiàn)象（請參閱 參考資料）。意思是說僅僅因?yàn)槠渌芏嗳诉@么做人們就這樣做或者考慮問題。說服自己不得不 使用 Ajax 之后，仔細(xì)看看有沒有人為制造的理由。對一些人來說，Ajax 就是最新的公認(rèn)的錘子，會想出各種理由來給自己找合適的釘子。要記住 Ajax 是一種工具，不是一種玩具，本身也不是目標(biāo)。 當(dāng)新技術(shù)出現(xiàn)時，人們總是試驗(yàn)和測試它的燃點(diǎn)。比如，彩色顯示器剛出現(xiàn)的時候（多數(shù) Web 開發(fā)人員很年輕，可能不記得），出現(xiàn)了一股應(yīng)用程序爭先恐后改變字體和顏色的風(fēng)潮，僅僅是因?yàn)樗麄兡茏龅健]有人真正需要鼠標(biāo)示蹤器，但仍然有很多 Web 設(shè)計者認(rèn)為必須加到他們的網(wǎng)站上。如果不小心的話，Ajax 也會出現(xiàn)同樣的情況。 Ajax 還給風(fēng)險投資的烈火上澆了油。技術(shù)項(xiàng)目的投資氣候似乎再次變得適宜了，近來其中一個魔法般的關(guān)鍵詞就是 Ajax。大量使用 Ajax 的合作項(xiàng)目 Zimbra? 已經(jīng)獲得了 1600 萬美元。其他項(xiàng)目也紛紛宣稱自己是基于 Ajax 的，以便賣出更多的產(chǎn)品和引起投資商的關(guān)注。 如果發(fā)現(xiàn)自己想使用 Ajax，一定要考慮好哪些地方合適哪些地方不合適。希望這兩期文章能夠幫助您正確地決策。
Frameworkitis 瀏覽器的實(shí)現(xiàn)在幾個關(guān)鍵的地方有所不同：
長期以來，這些不兼容性阻止了 JavaScript 在瀏覽器中的廣泛使用。到處編寫測試語句以便讓用戶，比方說，能夠拖動 div。Google 開辟了一條道路，它表明只要有足夠的耐心，就可以開發(fā)出真正跨平臺的、支持多數(shù)瀏覽器（盡管不是全部，比如 Google 的 Ajax 應(yīng)用程序目前不支持 Opera）的合適框架。 受 Google 成功的啟發(fā)，出現(xiàn)了幾十種 Ajax 框架。最值得一提的是 Microsoft? 的 Atlas，不僅僅是因?yàn)樵O(shè)計完善和外形美觀，而且因?yàn)樗幻鞔_定位成瀏覽器中立的 Ajax 框架。它改造了 JavaScript 語言，包括定義了更豐富的基類庫、增加了繼承和接口、通過定義名稱空間使得組合更容易。Atlas 實(shí)際應(yīng)用的例子包括 Virtual Earth、Outlook Web 訪問和 Start.com（鏈接參見 參考資料）。圖 1 顯示了 Start.com 網(wǎng)站的截圖，它說明了一個真正的革新：Atlas 是第一個在 Firefox? 中比在 Internet Explorer? 中運(yùn)行得更好的 Microsoft 應(yīng)用程序。 圖 1. Atlas 瀏覽器（注意陰影圖片在 Firefox 中比在 Internet Explorer 中對齊得更好）  抗拒自己編寫框架的誘惑。這是一項(xiàng)痛苦而枯燥的工作。 現(xiàn)有 Ajax 框架的完整列表請參閱 參考資料。
健忘癥 Web 瀏覽器需要跟蹤超鏈接、建立訪問過的頁面的歷史記錄，允許用戶回到訪問過的頁面。Web 瀏覽器中最明顯、最常用的按鈕就是后退按鈕（如 圖 2 所示），這是有原因的。 圖 2. “后退” 是瀏覽器中最突出的按鈕 但是隨著 Ajax 技術(shù)的發(fā)明，開發(fā)人員越來越對設(shè)計所謂的單頁 HTML 應(yīng)用程序感興趣：沒有歷史記錄的健忘癥頁面。很多 Ajax 應(yīng)用程序自己啟動，從不改變其 URL。如果這樣的網(wǎng)站不支持后退、停止和刷新按鈕以及收藏夾，用戶可能要經(jīng)過漫長的導(dǎo)航才能回到需要的狀態(tài)，而且很難與別人共享網(wǎng)站。 對于尋求各種成功解決方法的用戶來說，Google Maps 直到最近也沒有嘗試回憶起自己的歷史，后退按鈕毫無希望地被放棄了。感謝不斷更新的模型 —— 這是 Web 應(yīng)用程序的特點(diǎn)，某個時候 Google 悄悄地解決了這個問題：現(xiàn)在再試一試就會發(fā)現(xiàn)后退和前進(jìn)按鈕能用了。但是仍然很難收藏 Google Maps 隨機(jī)搜索的結(jié)果。盡管支持導(dǎo)航歷史，Google Maps 仍然沒有在瀏覽器的地址欄中更新 URL。相反，它提供了 “連接到此頁” 的宏來改變文檔的基準(zhǔn) URL 以便創(chuàng)建書簽。Wiki 也有同樣的問題，通常包含 “永久鏈接” 按鈕。 總之，Ajax 應(yīng)用程序應(yīng)該特別注意如何正確維護(hù)瀏覽器的歷史?；疽?guī)則是：如果允許別人單擊鏈接，就必須在瀏覽器歷史中增加一個對象，以便后退按鈕能夠正常工作。另外，可以通過永久鏈接實(shí)現(xiàn)對收藏的支持。
反饋 用戶觸發(fā)某個 Ajax 動作后，應(yīng)用程序必須立刻給出直觀的線索向用戶反饋，以便他們知道是否點(diǎn)對了地方。由于 Internet 上的 HTTP 請求不可靠，要特別注意達(dá)到一般公認(rèn)的用戶界面（UI）的響應(yīng)時間：
如果停頓是不可避免的，盡量使用 Gmail? 中那樣的 Loading 圖標(biāo)，如 圖 3 所示。 圖 3. Gmail 的 Loading 圖標(biāo) 有一種簡單的辦法：啟動定時器每 100 毫秒通知一次。如果等待的異步結(jié)果返回了，對 DOM 作必要的修改并顯示然后再處理結(jié)果。如果更新完成之后到達(dá) 100 毫秒，則忽略它。否則說明請求未完成，在屏幕上顯示反饋信息。將這些邏輯抽象并隱藏在 XmlHttpRequest 服務(wù)中，當(dāng)然要支持多個并發(fā)的請求。 盡可能提供本地反饋。Gmail 給出的反饋實(shí)際上總的來說并不是一個好榜樣，在鼠標(biāo)位置和反饋結(jié)果之間可能有很大距離。這種情況下使用等待鼠標(biāo)指針可能比較明智。或者展開樹中的節(jié)點(diǎn)時，最好先顯示一個子節(jié)點(diǎn)說明 “正在提取報價……”，然后在查詢從服務(wù)器上返回時用最終的結(jié)果代替這個臨時節(jié)點(diǎn)。
突然之間連不上網(wǎng)絡(luò)了 上個月，我去拜訪一位朋友。天很黑，我迷了路，我想從計算機(jī)上找到他的地址。他在當(dāng)天發(fā)給我的郵件中說明了他家的位置。不幸的是，電子郵件發(fā)送到了我的 GMail 帳戶上，由于無法連接 Internet，我陷入苦惱之中。轉(zhuǎn)瞬之間，零安裝、漂亮的 UI、標(biāo)簽、廣告過濾、好用的搜索引擎、平臺獨(dú)立性等種種優(yōu)點(diǎn)都煙消云散了，由于離開了 Wi-Fi 的熱點(diǎn)區(qū)域，我就是找不到朋友的地址了。 對于企業(yè)應(yīng)用程序，或者 Google 搜索這樣的應(yīng)用程序，斷開網(wǎng)絡(luò)連接還不是問題，實(shí)際上沒有離線的替代工具。但是那些替換了已有豐富客戶機(jī)的應(yīng)用程序，斷開連接可能會造成比使用老應(yīng)用程序還糟糕的體驗(yàn)。 Gmail 有 POP 支持，因此用戶可以事先使用 Microsoft Outlook? 或其他 POP 客戶機(jī)閱讀郵件，即使在離線的情況下。這種變化沒有痛苦，但需要有先見之明的用戶的配合。主要的問題是 Ajax 沒有明顯的支持離線瀏覽的解決方案。
讓我想想 Web 成功的主要原因在于其 UI 模型的可預(yù)見性和簡單性。簡言之，任何人都能移動鼠標(biāo)、點(diǎn)擊鏈接、移動滾動條點(diǎn)擊后退按鈕。隨著 Ajax 日漸流行，存在著現(xiàn)實(shí)的危險，開發(fā)人員有可能走上極端，將一切都變成可點(diǎn)擊的，以無法預(yù)料的、異步的方式改變 UI。最后一點(diǎn)可能迫使您的用戶去思考。對于那些對 Web 應(yīng)用程序的可用性感興趣的人來說，不應(yīng)錯過 Steve Krug 的 Don‘t Make Me Think（請參閱 參考資料）。這本書沒有專門論述 Ajax，但是上了重要的一課，告訴我們良好的設(shè)計對于網(wǎng)站是多么關(guān)鍵。 Ajax 無疑屬于程序員的領(lǐng)域，程序員在設(shè)計 UI 方面的差勁是出了名的。無論程序員多么努力，他們的 UI 看起來都像是滑稽演員設(shè)計的。隨著基于 Ajax 的應(yīng)用程序日漸成熟，必須讓界面設(shè)計人員和平面藝術(shù)師來用 HTML、CSS 和 Ajax 設(shè)計前端，表示層不需要程序員的幫助。解決這個問題的關(guān)鍵在于 Ajax 開發(fā)工具 —— 下一個要討論的問題。
開發(fā)工具 Ajax 本身不是一種技術(shù)，而是幾個關(guān)鍵概念的組合。這些概念的融合使得 Ajax 非常特別。Ajax 只是最近才引起人們的興趣，集成開發(fā)環(huán)境（IDE）廠商仍然落后半拍。因次，Ajax 開發(fā)工具零零散散，通常僅涉及到整個 Ajax 開發(fā)場景的某個方面：
（這些工具的鏈接可以在 參考資料 中找到）。 最先占據(jù)市場的將是那些考慮到這些不同的方面并組成一個完善環(huán)境的 IDE，便于平面設(shè)計師、業(yè)務(wù)分析人員、Java 編碼人員和數(shù)據(jù)庫管理員的使用。我期望 Eclipse Ajax Tooling Framework 能夠擔(dān)任這個角色。
并發(fā)性 Ajax 的第一個字母代表異步 通信。之所以稱為異步，是因?yàn)檎埱箜憫?yīng)不是立刻發(fā)生的，而是要等一段時間?？赡芑ê荛L時間才能到達(dá)（參見 反饋 中的討論），事實(shí)上請求可能根本沒有回答。Web 是一個不可靠的世界，應(yīng)對意外事件是任何 Ajax 應(yīng)用程序的一部分。由于可能同時調(diào)度多個并發(fā)的 XML HTTP 請求，應(yīng)用程序本質(zhì)上變成了一個并發(fā)程序，而并發(fā)很難實(shí)現(xiàn)。 而拯救大多數(shù)開發(fā)人員的是 JavaScript 解釋程序本身是單線程的。換句話說，任何時點(diǎn)上都只能有一個事件處理程序或者 XML HTTP 事件處理程序能夠運(yùn)行?；卣{(diào)永遠(yuǎn)不能并行運(yùn)行。因此，不需要復(fù)雜的鎖定機(jī)制來保證對 DOM（比方說）的協(xié)調(diào)訪問。JavaScript 不理解線程的概念，因此也沒有睡眠功能。一切都是在前端運(yùn)行的，因此睡眠功能很容易阻塞整個瀏覽器。 Ajax 應(yīng)用程序有一個總是不斷變化的狀態(tài)。正確地管理這個狀態(tài)很重要，將其分解成很多無關(guān)的全局變量顯然是錯誤的。此外，必須讓用戶能夠馬上跳到某個給定的狀態(tài) —— 比如一個用戶需要停止工作并在一周后返回到當(dāng)前狀態(tài)。最后，在持續(xù)時間長的編輯會話中，如果能夠?qū)崿F(xiàn)自動保存（如 圖 4 所示）用戶將非常高興。 圖 4. 自動保存可以給用戶一個驚喜 總之， Ajax 應(yīng)用程序中管理狀態(tài)變化應(yīng)避免使用戶不愉快、打斷應(yīng)用程序或者造成調(diào)試?yán)щy。
“開放源代碼”（默認(rèn)） JavaScript 應(yīng)用程序在瀏覽器中運(yùn)行，很容易被篡改。通過在需要時才加載 JavaScript 文件可以欺騙 Internet Explorer 用戶，但是其他瀏覽器，如 Firefox，通過上下文菜單的 View Selection Source（查看選定的源代碼）選項(xiàng)熱心地把當(dāng)前整個 DOM 顯示給用戶。如果有人確實(shí)想查看和分析應(yīng)用程序的全部 JavaScript 源代碼，用 Mozilla? Greasemonkey 擴(kuò)展編寫的一段簡單腳本、Venkman 這樣的調(diào)試程序，或者自定義的 Internet Explorer 工具欄就能做到。 要知道 JavaScript 和伴隨的 HTML 一樣不安全，一定要把應(yīng)用程序的價值放在數(shù)據(jù)復(fù)合領(lǐng)域和易用性上。在 Internet 上發(fā)布應(yīng)用程序時，要避免把過多的業(yè)務(wù)邏輯放在 Ajax 中而不是服務(wù)器上。對于 intranet 應(yīng)用程序這不是個大問題，可以把更多的邏輯放在客戶機(jī)上，以減輕公司服務(wù)器的負(fù)擔(dān)。
深度偏執(zhí)狂 至于安全問題，Ajax 沒有改變什么。Ajax 所依賴的技術(shù)已經(jīng)存在很長時間了。隱藏框架，即所謂的 iframes，已經(jīng)出現(xiàn)十年了，Microsoft 一直支持遠(yuǎn)程腳本的概念。如果有什么安全風(fēng)險威脅到 Ajax 的發(fā)展，大量已有的網(wǎng)站已經(jīng)深受其害了。 網(wǎng)站開發(fā)人員應(yīng)該小心發(fā)送給他們的 GET 和 POST 請求受到欺騙。隨著 Greasemonkey 這類技術(shù)的出現(xiàn)，用戶可以徹底修改發(fā)送到服務(wù)器上的內(nèi)容以及如何在瀏覽器中表示。Ajax 使用與一般 Web 瀏覽相同的安全機(jī)制，不多也不少。如果要通過 XmlHTTPRequest 發(fā)送敏感數(shù)據(jù)，需要使用適當(dāng)?shù)纳矸蒡?yàn)證和安全通道。 當(dāng)然，Ajax 所要改進(jìn)的就是把 Web 應(yīng)用程序組件化 為更小的功能或服務(wù)塊。這種趨勢稱為原子化。Web 開發(fā)人員要對付的是將他們的應(yīng)用程序變成一組小的組件。這些片段可能以未預(yù)料的順序訪問，可能是有敵意的，也可能是無敵意的。形式化的工作流模型越來越重要。
結(jié)束語 在審視 Ajax 的這一期中，我討論了環(huán)繞著這種技術(shù)的不實(shí)之詞。您還看到可靠的框架仍然沒有完成，此外還應(yīng)該考慮導(dǎo)航歷史、書簽功能、反饋、持久性、并發(fā)和安全等問題。 本系列的下一期中，我們將討論其他 Ajax 主題，比如處理文檔重繪、測試、發(fā)布和訂閱模型、性能、可訪問性、對老版本瀏覽器的支持和聲明我們的目標(biāo)。我還將提到 Ajax 帶來的一種有趣的可能性：在網(wǎng)站中開發(fā)網(wǎng)站。 參考資料 學(xué)習(xí)
獲得產(chǎn)品和技術(shù)
關(guān)于作者
|
||||||||||||||||||||||||||||||||||||||||||||
