Web2.0時代的核心應用：Ajax簡介

ajax|web|web2

作為J2EE開發人員，我們似乎經常關注“後端機制（backend mechanics）”。我們通常會忘記，J2EE的主要成功之處在Web應用程式方面；許多原因使得人們喜歡利用Web開發應用程式，但主要還是因為其易於部署的特點允許網站以儘可能低的成本擁有上百萬的使用者。

遺憾的是，在過去幾年中，我們在後端投入了太多的時間，而在使我們的Web使用者介面對使用者自然和響應靈敏方面卻投入不足。

本文介紹一種方法，Ajax，使用它可以構建更為動態和響應更靈敏的Web應用程式。該方法的關鍵在於對瀏覽器端的JavaScript、DHTML和與伺服器非同步通訊的組合。本文也示範了啟用這種方法是多麼簡單：利用一個Ajax架構（指DWR）構造一個應用程式，它直接從瀏覽器與後端服務進行通訊。如果使用得當，這種強大的力量可以使應用程式更加自然和響應靈敏，從而提升使用者的瀏覽體驗。

該應用程式中所使用的範例程式碼已打包為單獨的WAR檔案，可供下載。

簡介

術語Ajax用來描述一組技術，它使瀏覽器可以為使用者提供更為自然的瀏覽體驗。在Ajax之前，Web網站強制使用者進入提交/等待/重新顯示範例，使用者的動作總是與伺服器的“考慮時間”同步。Ajax提供與伺服器非同步通訊的能力，從而使使用者從請求/響應的迴圈中解脫出來。藉助於Ajax，可以在使用者單擊按鈕時，使用JavaScript和DHTML立即更新UI，並向伺服器發出非同步請求，以執行更新或查詢資料庫。當請求返回時，就可以使用JavaScript和CSS來相應地更新UI，而不是重新整理整個頁面。最重要的是，使用者甚至不知道瀏覽器正在與伺服器通訊：Web網站看起來是即時響應的。

雖然Ajax所需的基礎架構已經出現了一段時間，但直到最近非同步請求的真正威力才得到利用。能夠擁有一個響應極其靈敏的Web網站確實激動人心，因為它最終允許開發人員和設計人員使用標準的HTML/CSS/JavaScript堆棧建立“案頭風格的（desktop-like）”可用性。

通常，在J2EE中，開發人員過於關注服務和持久性層的開發，以至於使用者介面的可用性已經落後。在一個典型的J2EE開發週期中，常常會聽到這樣的話，“我們沒有可投入UI的時間”或“不能用HTML實現”。但是，以下Web網站證明，這些理由再也站不住腳了：

• BackPack
• Google Suggest
• Google Maps
• PalmSphere

所有這些Web網站都告訴我們，Web應用程式不必完全依賴於從伺服器重新載入頁面來向使用者呈現更改。一切似乎就在瞬間發生。簡而言之，在涉及到使用者介面的響應靈敏度時，基準設得更高了。

定義Ajax

Adaptive Path公司的Jesse James Garrett這樣定義Ajax：

Ajax不是一種技術。實際上，它由幾種蓬勃發展的技術以新的強大方式組合而成。Ajax包含：

• 基於XHTML和CSS標準的表示；
• 使用Document Object Model進行動態顯示和互動；
• 使用XMLHttpRequest與伺服器進行非同步通訊；
• 使用JavaScript綁定一切。

這非常好，但為什麼要以Ajax命名呢？其實術語Ajax是由Jesse James Garrett創造的，他說它是“Asynchronous JavaScript + XML的簡寫”。

Ajax的工作原理

Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支援非同步請求的技術。簡而言之，XmlHttpRequest使您可以使用JavaScript向伺服器提出請求並處理響應，而不阻塞使用者。

在建立Web網站時，在用戶端執行螢幕更新為使用者提供了很大的靈活性。下面是使用Ajax可以完成的功能：

• 動態更新購物車的物品總數，無需使用者單擊Update並等待伺服器重新發送整個頁面。
• 提升網站的效能，這是通過減少從伺服器下載的資料量而實現的。例如，在Amazon的購物車頁面，當更新籃子中的一項物品的數量時，會重新載入整個頁面，這必須下載32K的資料。如果使用Ajax計算新的總量，伺服器只會返回新的總量值，因此所需的頻寬僅為原來的百分之一。
• 消除了每次使用者輸入時的頁面重新整理。例如，在Ajax中，如果使用者在分頁列表上單擊Next，則伺服器資料只重新整理列表而不是整個頁面。
• 直接編輯表格式資料，而不是要求使用者導航到新的頁面來編輯資料。對於Ajax，當使用者單擊Edit時，可以將靜態表格重新整理為內容可編輯的表格。使用者單擊Done之後，就可以發出一個Ajax請求來補救伺服器，並重新整理表格，使其包含靜態、唯讀資料。

一切皆有可能！但願它能夠激發您開始開發自己的基於Ajax的網站。然而，在開始之前，讓我們介紹一個現有的Web網站，它遵循傳統的提交/等待/重新顯示的範例，我們還將討論Ajax如何提升使用者體驗。

Ajax可用於那些情境？——一個例子：MSN Money頁面

前幾天，在瀏覽MSN Money頁面的時候，有一篇關於房地產投資的文章引起了我的好奇心。我決定使用網站的“Rate this article”（評價本文）功能，鼓勵其他的使用者花一點時間來閱讀這篇文章。在我單擊vote按鈕並等待了一會兒之後，整個頁面被重新整理，在原來投票問題所在的地方出現了一個漂亮的感謝畫面。

而Ajax能夠使使用者的體驗更加愉快，它可以提供響應更加靈敏的UI，並消除頁面重新整理所帶來的閃爍。目前，由於要重新整理整個頁面，需要傳送大量的資料，因為必須重新發送整個頁面。如果使用Ajax，伺服器可以返回一個包含了感謝函息的500位元組的訊息，而不是發送26,813位元組的訊息來重新整理整個頁面。即使使用的是高速Internet，傳送26K和1/2K的差別也非常大。同樣重要的是，只需要重新整理與投票相關的一小節，而不是重新整理整個螢幕。

讓我們利用Ajax實現自己的基本投票系統。

[1] [2] [3]  下一頁