Ajax簡介

ajax 作為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實現自己的基本投票系統。

原始的Ajax：直接使用XmlHttpRequest

　　如上所述，Ajax的核心是JavaScript對象XmlHttpRequest。下面的樣本文章評價系統將帶您熟悉Ajax的底層基本知識：http://tearesolutions.com/ajax-demo/raw-ajax.html。註：如果您已經在本地WebLogic容器中安裝了ajax-demo.war，可以導航到http://localhost:7001/ajax-demo/raw-ajax.html，

　　瀏覽應用程式，參與投票，並親眼看它如何運轉。熟悉了該應用程式之後，繼續閱讀，進一步瞭解其工作原理細節。

　　首先，您擁有一些簡單的錨點標記，它串連到一個JavaScriptcastVote(rank)函數。

function castVote(rank) {  var url = "/ajax-demo/static-article-ranking.html";  var callback = processAjaxResponse;  executeXhr(callback, url);}

　　該函數為您想要與之通訊的伺服器資源建立一個URL並調用內建函式executeXhr，提供一個回調JavaScript函數，一旦伺服器響應可用，該函數就被執行。由於我希望它運行在一個簡單的Apache環境中，“cast vote URL”只是一個簡單的HTML頁面。在實際情況中，被調用的URL將記錄票數並動態地呈現包含投票總數的響應。

　　下一步是發出一個XmlHttpRequest請求：

function executeXhr(callback, url) {  // branch for native XMLHttpRequest object  if (window.XMLHttpRequest) {    req = new XMLHttpRequest();    req.onreadystatechange = callback;    req.open("GET", url, true);    req.send(null);  } // branch for IE/Windows ActiveX version  else if (window.ActiveXObject) {    req = new ActiveXObject("Microsoft.XMLHTTP");    if (req) {      req.onreadystatechange = callback;      req.open("GET", url, true);      req.send();    }  }}

　　如您所見，執行一個XmlHttpRequest並不簡單，但非常直觀。和平常一樣，在JavaScript領域，大部分的工作量都花在確保瀏覽器安全色方面。在這種情況下，首先要確定XmlHttpRequest是否可用。如果不能用，很可能要使用Internet Explorer，這樣就要使用所提供的ActiveX實現。

executeXhr()方法中最關鍵的部分是這兩行：

req.onreadystatechange = callback;req.open("GET", url, true);

　　第一行定義了JavaScript回呼函數，您希望一旦響應就緒它就自動執行，而req.open()方法中所指定的“true”標誌說明您想要非同步執行該請求。

　　一旦伺服器處理完XmlHttpRequest並返回給瀏覽器，使用req.onreadystatechange指派所設定的回調方法將被自動調用。

function processAjaxResponse() {  // only if req shows "loaded"  if (req.readyState == 4) {    // only if "OK"    if (req.status == 200) {      502 502'votes').innerHTML = req.responseText;    } else {      alert("There was a problem retrieving the XML data:" +      req.statusText);    }  }} 

　　該代碼相當簡潔，並且使用了幾個幻數，這使得難以一下子看出發生了什麼。為了弄清楚這一點，下面的表格（引用自http://developer.apple.com/internet/webcontent/xmlhttpreq.html）列舉了常用的XmlHttpRequest對象屬性。

屬性	描述
onreadystatechange	每次狀態改變所觸發事件的事件處理常式
readyState	對象狀態值： 0 = 未初始化（uninitialized） 1 = 正在載入（loading） 2 = 載入完畢（loaded） 3 = 互動（interactive） 4 = 完成（complete）
responseText	從伺服器處理序返回的資料的字串形式
responseXML	從伺服器處理序返回的DOM相容的文檔資料對象
status	從伺服器返回的數字代碼，比如404（未找到）或200（就緒）
statusText	伴隨狀態代碼的字串資訊

　　現在processVoteResponse()函數開始顯示出其意義了。它首先檢查XmlHttpRequest的整體狀態以保證它已經完成（readyStatus == 4），然後根據伺服器的設定詢問請求狀態。如果一切正常（status == 200）,就使用innerHTML 屬性重寫DOM的“votes”節點的內容。

　　既然您親眼看到了XmlHttpRequest對象是如何工作的，就讓我們利用一個旨在簡化JavaScript與Java應用程式之間的非同步通訊的架構來對具體的細節進行抽象。

Ajax: DWR方式

　　按照與文章評價系統相同的流程，我們將使用Direct Web Remoting（DWR）架構實現同樣的功能。

　　假定文章和投票結果儲存在一個資料庫中，使用某種對象/關係映射技術來完成抽取工作。為了部署起來儘可能地簡單，我們不會使用資料庫進行持久性儲存。此外，為使應用程式儘可能通用，也不使用Web架構。相反，應用程式將從一個靜態HTML檔案開始，可以認為它由伺服器動態地呈現。除了這些簡化措施，應用程式還應該使用Spring Framework關聯一切，以便輕鬆看出如何在一個“真實的”應用程式中使用DWR。

　　現在應該下載應用程式範例並熟悉它。該應用程式被壓縮為標準的WAR檔案，因此您可以把它放置到任何一個Web容器中——無需進行配置。部署完畢之後，就可以導航到http://localhost:7001/ajax_demo/dwr-ajax.html來運行程式。

　　可以查看HTML 原始碼，瞭解它如何工作。給人印象最深的是，代碼如此簡單——所有與伺服器的互動都隱藏在JavaScript對象ajaxSampleSvc的後面。更加令人驚訝的是，ajaxSampleSvc服務不是由手工編寫而是完全自動產生的！讓我們繼續，看看這是如何做到的。

引入DWR

　　如同在“原始的Ajax”一節所示範的那樣，直接使用XmlHttpRequest建立非同步請求非常麻煩。不僅JavaScript代碼冗長，而且必須考慮伺服器端為定位Ajax請求到適當的服務所需做的工作，並將結果封送到瀏覽器。

　　設計DWR的目的是要處理將Web頁面安裝到後端服務上所需的所有資訊管道。它是一個Java架構，可以很輕鬆地將它插入到Web應用程式中，以便JavaScript代碼可以調用伺服器上的服務。它甚至直接與Spring Framework整合，從而允許使用者直接向Web客戶機公開bean。

　　DWR真正的巧妙之處是，在使用者配置了要向客戶機公開的服務之後，它使用反射來產生JavaScript對象，以便Web頁面能夠使用這些對象來訪問該服務。然後Web頁面只需接合到產生的JavaScript對象，就像它們是直接使用服務一樣；DWR無縫地處理所有有關Ajax和請求定位的瑣碎細節。

　　讓我們仔細分析一下範例程式碼，弄清它是如何工作的。

應用程式細節：DWR分析

　　關於應用程式，首先要注意的是，它是一個標準的Java應用程式，使用分層架構（Layered Architecture）設計模式。使用DWR通過JavaScript公開一些服務並不影響您的設計。

　　下面是一個簡單的Java服務，我們將使用DWR架構直接將其向JavaScript代碼公開：

package com.tearesolutions.service;public interface AjaxSampleSvc {   Article castVote(int rank);}

　　這是一個被簡化到幾乎不可能的程度的例子，其中只有一篇文章可以投票。該服務由Spring管理，它使用的bean名是ajaxSampleSvc，它的持久性需求則依賴於ArticleDao。詳情請參見applicationContext.xml。

　　為了把該服務公開為JavaScript對象，需要配置DWR，添加dwr.xml檔案到WEB-INF目錄下：

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 0.4//EN" "http://www.getahead.ltd.uk/dwr/dwr.dtd"><dwr> <allow>  <create creator="spring" javascript="ajaxSampleSvc">   <param name="beanName" value="ajaxSampleSvc" />  </create>  <convert converter="bean" match="com.tearesolutions.model.Article"/>  <exclude method="toString"/>  <exclude method="setArticleDao"/> </allow></dwr>

　　dwr.xml檔案告訴DWR哪些服務是要直接向JavaScript代碼公開的。注意，已經要求公開Spring bean ajaxSampleSvc。DWR將自動找到由應用程式設定的SpringApplicationContext。為此，必須使用標準的servlet過濾器ContextLoaderListener來初始化Spring ApplicationContext。

　　DWR被設定為一個servlet，所以把它的定義添加到web.xml：

<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD  Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd"><web-app> <display-name>Ajax Examples</display-name> <listener>  <listener-class>      org.springframework.web.context.ContextLoaderListener  </listener-class> </listener> <servlet>  <servlet-name>ajax_sample</servlet-name>  <servlet-class>com.tearesolutions.web.AjaxSampleServlet</servlet-class>  <load-on-startup>1</load-on-startup> </servlet> <servlet>  <servlet-name>dwr-invoker</servlet-name>  <display-name>DWR Servlet</display-name>  <description>Direct Web Remoter Servlet</description>  <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>  <init-param>   <param-name>debug</param-name>   <param-value>true</param-value>  </init-param> </servlet> <servlet-mapping>  <servlet-name>ajax_sample</servlet-name>  <url-pattern>/ajax_sample</url-pattern> </servlet-mapping> <servlet-mapping>  <servlet-name>dwr-invoker</servlet-name>  <url-pattern>/dwr/*</url-pattern> </servlet-mapping></web-app>

　　做完這些之後，可以載入http://localhost:7001/ajax-demo/dwr，看看哪些服務可用。結果如下：

圖3. 可用的服務

　　單擊ajaxSampleSvc連結，查看有關如何在HTML頁面內直接使用服務的樣本實現。其中包含的兩個JavaScript檔案完成了大部分的功能：

<script type='text/javascript'    src='/ajax-demo/dwr/interface/ajaxSampleSvc.js'></script><script type='text/javascript'    src='/ajax-demo/dwr/engine.js'></script>

ajaxSampleSvc.js是動態產生的：

function ajaxSampleSvc() { }ajaxSampleSvc.castVote = function(callback, p0){   DWREngine._execute(callback, '/ajax-demo/dwr',  'ajaxSampleSvc', 'castVote', p0);}

　　現在可以使用JavaScript對象ajaxSampleSvc替換所有的XmlHttpRequest代碼，從而重構raw-ajax.html檔案。可以在dwr-ajax.html檔案中看到改動的結果；下面是新的JavaScript函數：

function castVote(rank) {  ajaxSampleSvc.castVote(processResponse, rank);}function processResponse(data) { var voteText = "
Thanks for Voting!
"    + "
Current ranking: " + data.voteAverage     + " out of 5
"     + "
Number of votes placed: "     + data.numberOfVotes + "
"; 502 502'votes').innerHTML = voteText;       }

　　驚人地簡單，不是嗎？由ajaxSampleSvc對象返回的Article域對象序列化為一個JavaScript對象，允許在它上面調用諸如numberOfVotes()和voteAverage()之類的方法。在動態產生並插入到DIV元素“votes”中的HTML代碼內使用這些資料。

下一步工作

　　　在後續文章中，我將繼續有關Ajax的話題，涉及下面這些方面：

• Ajax最佳實務

　　像許多技術一樣，Ajax是一把雙刃劍。對於一些用例，其應用程式其實沒有必要使用Ajax，使用了反而有損可用性。我將介紹一些不適合使用的模式，突出說明Ajax的一些消極方面，並展示一些有助於緩和這些消極方面的機制。例如，對Netflix電影瀏覽器來說，Ajax是合適的解決方案嗎？或者，如何提示使用者確實出了一些問題，而再次單擊按鈕也無濟於事？

• 管理跨請求的狀態

　　在使用Ajax時，最初的文檔DOM會發生一些變化，並且有大量的頁面狀態資訊儲存在用戶端變數中。當使用者跟蹤一個連結到應用程式中的另一個頁面時，狀態就丟失了。當使用者按照慣例單擊Back按鈕時，呈現給他們的是緩衝中的初始頁面。這會使使用者感到非常迷惑！

• 調試技巧

　　使用JavaScript在用戶端執行更多的工作時，如果事情不按預期方式進行，就需要一些調試工具來協助弄清出現了什麼問題。

結束語

　　本文介紹了Ajax方法，並展示了如何使用它來建立一個動態且響應靈敏的Web應用程式。通過使用DWR架構，可以輕鬆地把Ajax融合到網站中，而無需擔心所有必須執行的實際管道工作。

　　特別感謝Getahead IT諮詢公司的Joe Walker和他的團隊開發出DWR這樣神奇的工具。感謝你們與世界共用它！

下載

　　本文中示範的應用程式原始碼可供下載：ajax-demo.war（1.52 MB）。

參考資料

• http://www.getahead.ltd.uk/dwr——Getahead IT諮詢公司。
• Jesse James Garrett所撰寫的“Ajax: A New Approach to Web Applications”（Adaptive Path，2005年二月）。
• “Dynamic HTML and XML: The XMLHttpRequest Object”（Apple Developer Connection）。

原文出處

An Introduction To Ajax

http://dev2dev.bea.com/pub/a/2005/08/ajax_introduction.html