Java Votary

轉(zhuǎn)自http://dev2dev.bea.com.cn/techdoc/2005110103.html


Ajax簡(jiǎn)介

時(shí)間：2005-11-01 作者：David Teare 瀏覽次數(shù)： 1786 本文關(guān)鍵字：ajax, dhtml, dwr,  javascript

文章工具  推薦給朋友  打印文章

　　作為J2EE開發(fā)人員，我們似乎經(jīng)常關(guān)注“后端機(jī)制（backend mechanics）”。我們通常會(huì)忘記，J2EE的主要成功之處在Web應(yīng)用程序方面；許多原因使得人們喜歡利用Web開發(fā)應(yīng)用程序，但主要還是因?yàn)槠? 易于部署的特點(diǎn)允許站點(diǎn)以盡可能低的成本擁有上百萬的用戶。遺憾的是，在過去幾年中，我們?cè)诤蠖送度肓颂嗟臅r(shí)間，而在使我們的Web用戶界面對(duì)用戶自然 和響應(yīng)靈敏方面卻投入不足。

　　本文介紹一種方法，Ajax，使用它可以構(gòu)建更為動(dòng)態(tài)和響應(yīng)更靈敏的Web應(yīng)用程序。該方法的關(guān)鍵在于對(duì)瀏覽器端的JavaScript、 DHTML和與服務(wù)器異步通信的組合。本文也演示了啟用這種方法是多么簡(jiǎn)單：利用一個(gè)Ajax框架（指DWR）構(gòu)造一個(gè)應(yīng)用程序，它直接從瀏覽器與后端服 務(wù)進(jìn)行通信。如果使用得當(dāng)，這種強(qiáng)大的力量可以使應(yīng)用程序更加自然和響應(yīng)靈敏，從而提升用戶的瀏覽體驗(yàn)。

　　該應(yīng)用程序中所使用的示例代碼已打包為單獨(dú)的WAR文件，可供下載。

簡(jiǎn)介

　　術(shù)語Ajax用來描述一組技術(shù)，它使瀏覽器可以為用戶提供更為自然的瀏覽體驗(yàn)。在Ajax之前，Web站點(diǎn)強(qiáng)制用戶進(jìn)入提交/等待/重新顯示范 例，用戶的動(dòng)作總是與服務(wù)器的“思考時(shí)間”同步。Ajax提供與服務(wù)器異步通信的能力，從而使用戶從請(qǐng)求/響應(yīng)的循環(huán)中解脫出來。借助于Ajax，可以在 用戶單擊按鈕時(shí)，使用JavaScript和DHTML立即更新UI，并向服務(wù)器發(fā)出異步請(qǐng)求，以執(zhí)行更新或查詢數(shù)據(jù)庫。當(dāng)請(qǐng)求返回時(shí)，就可以使用 JavaScript和CSS來相應(yīng)地更新UI，而不是刷新整個(gè)頁面。最重要的是，用戶甚至不知道瀏覽器正在與服務(wù)器通信：Web站點(diǎn)看起來是即時(shí)響應(yīng) 的。

　　雖然Ajax所需的基礎(chǔ)架構(gòu)已經(jīng)出現(xiàn)了一段時(shí)間，但直到最近異步請(qǐng)求的真正威力才得到利用。能夠擁有一個(gè)響應(yīng)極其靈敏的Web站點(diǎn)確實(shí)激動(dòng)人 心，因?yàn)樗罱K允許開發(fā)人員和設(shè)計(jì)人員使用標(biāo)準(zhǔn)的HTML/CSS/JavaScript堆棧創(chuàng)建“桌面風(fēng)格的（desktop-like）”可用性。

　　通常，在J2EE中，開發(fā)人員過于關(guān)注服務(wù)和持久性層的開發(fā)，以至于用戶界面的可用性已經(jīng)落后。在一個(gè)典型的J2EE開發(fā)周期中，常常會(huì)聽到這樣的話，“我們沒有可投入U(xiǎn)I的時(shí)間”或“不能用HTML實(shí)現(xiàn)”。但是，以下Web站點(diǎn)證明，這些理由再也站不住腳了：

• BackPack
• Google Suggest
• Google Maps
• PalmSphere

　　所有這些Web站點(diǎn)都告訴我們，Web應(yīng)用程序不必完全依賴于從服務(wù)器重新載入頁面來向用戶呈現(xiàn)更改。一切似乎就在瞬間發(fā)生。簡(jiǎn)而言之，在涉及到用戶界面的響應(yīng)靈敏度時(shí)，基準(zhǔn)設(shè)得更高了。

定義Ajax

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

　　Ajax不是一種技術(shù)。實(shí)際上，它由幾種蓬勃發(fā)展的技術(shù)以新的強(qiáng)大方式組合而成。Ajax包含：

• 基于XHTML和CSS標(biāo)準(zhǔn)的表示；
• 使用Document Object Model進(jìn)行動(dòng)態(tài)顯示和交互；
• 使用XMLHttpRequest與服務(wù)器進(jìn)行異步通信；
• 使用JavaScript綁定一切。

　　這非常好，但為什么要以Ajax命名呢？其實(shí)術(shù)語Ajax是由Jesse James Garrett創(chuàng)造的，他說它是“Asynchronous JavaScript + XML的簡(jiǎn)寫”。

Ajax的工作原理

　　Ajax的核心是JavaScript對(duì)象XmlHttpRequest。該對(duì)象在Internet Explorer 5中首次引入，它是一種支持異步請(qǐng)求的技術(shù)。簡(jiǎn)而言之，XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請(qǐng)求并處理響應(yīng)，而不 阻塞用戶。

　　在創(chuàng)建Web站點(diǎn)時(shí)，在客戶端執(zhí)行屏幕更新為用戶提供了很大的靈活性。下面是使用Ajax可以完成的功能：

• 動(dòng)態(tài)更新購(gòu)物車的物品總數(shù)，無需用戶單擊Update并等待服務(wù)器重新發(fā)送整個(gè)頁面。
• 提升站點(diǎn)的性 能，這是通過減少?gòu)姆?wù)器下載的數(shù)據(jù)量而實(shí)現(xiàn)的。例如，在Amazon的購(gòu)物車頁面，當(dāng)更新籃子中的一項(xiàng)物品的數(shù)量時(shí)，會(huì)重新載入整個(gè)頁面，這必須下載 32K的數(shù)據(jù)。如果使用Ajax計(jì)算新的總量，服務(wù)器只會(huì)返回新的總量值，因此所需的帶寬僅為原來的百分之一。
• 消除了每次用戶輸入時(shí)的頁面刷新。例如，在Ajax中，如果用戶在分頁列表上單擊Next，則服務(wù)器數(shù)據(jù)只刷新列表而不是整個(gè)頁面。
• 直接編輯表格數(shù)據(jù)，而不是要求用戶導(dǎo)航到新的頁面來編輯數(shù)據(jù)。對(duì)于Ajax，當(dāng)用戶單擊Edit時(shí)，可以將靜態(tài)表格刷新為內(nèi)容可編輯的表格。用戶單擊Done之后，就可以發(fā)出一個(gè)Ajax請(qǐng)求來更新服務(wù)器，并刷新表格，使其包含靜態(tài)、只讀的數(shù)據(jù)。

　　一切皆有可能！但愿它能夠激發(fā)您開始開發(fā)自己的基于Ajax的站點(diǎn)。然而，在開始之前，讓我們介紹一個(gè)現(xiàn)有的Web站點(diǎn)，它遵循傳統(tǒng)的提交/等待/重新顯示的范例，我們還將討論Ajax如何提升用戶體驗(yàn)。

Ajax可用于那些場(chǎng)景？——一個(gè)例子：MSN Money頁面

　　前幾天，在瀏覽MSN Money頁面的時(shí)候，有一篇關(guān)于房地產(chǎn)投資的文章引起了我的好奇心。我決定使用站點(diǎn)的“Rate this article”（評(píng)價(jià)本文）功能，鼓勵(lì)其他的用戶花一點(diǎn)時(shí)間來閱讀這篇文章。在我單擊vote按鈕并等待了一會(huì)兒之后，整個(gè)頁面被刷新，在原來投票問題所在的地方出現(xiàn)了一個(gè)漂亮的感謝畫面。

　　而Ajax能夠使用戶的體驗(yàn)更加愉快，它可以提供響應(yīng)更加靈敏的UI，并消除頁面刷新所帶來的閃爍。目前，由于要刷新整個(gè)頁面，需要傳送大量的 數(shù)據(jù)，因?yàn)楸仨氈匦掳l(fā)送整個(gè)頁面。如果使用Ajax，服務(wù)器可以返回一個(gè)包含了感謝信息的500字節(jié)的消息，而不是發(fā)送26,813字節(jié)的消息來刷新整個(gè) 頁面。即使使用的是高速Internet，傳送26K和1/2K的差別也非常大。同樣重要的是，只需要刷新與投票相關(guān)的一小節(jié)，而不是刷新整個(gè)屏幕。

　　讓我們利用Ajax實(shí)現(xiàn)自己的基本投票系統(tǒng)。

原始的Ajax：直接使用XmlHttpRequest

　　如上所述，Ajax的核心是JavaScript對(duì)象XmlHttpRequest。下面的示例文章評(píng)價(jià)系統(tǒng)將帶您熟悉Ajax的底層基本知識(shí)：http://tearesolutions.com/ajax-demo/raw-ajax.html。注：如果您已經(jīng)在本地WebLogic容器中安裝了ajax-demo.war，可以導(dǎo)航到http://localhost:7001/ajax-demo/raw-ajax.html，

　　瀏覽應(yīng)用程序，參與投票，并親眼看它如何運(yùn)轉(zhuǎn)。熟悉了該應(yīng)用程序之后，繼續(xù)閱讀，進(jìn)一步了解其工作原理細(xì)節(jié)。

　　首先，您擁有一些簡(jiǎn)單的定位點(diǎn)標(biāo)記，它連接到一個(gè)JavaScriptcastVote(rank)函數(shù)。

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

　　該函數(shù)為您想要與之通信的服務(wù)器資源創(chuàng)建一個(gè)URL并調(diào)用內(nèi)部函數(shù)executeXhr，提供一個(gè)回調(diào)JavaScript函數(shù)，一旦服務(wù)器響 應(yīng)可用，該函數(shù)就被執(zhí)行。由于我希望它運(yùn)行在一個(gè)簡(jiǎn)單的Apache環(huán)境中，“cast vote URL”只是一個(gè)簡(jiǎn)單的HTML頁面。在實(shí)際情況中，被調(diào)用的URL將記錄票數(shù)并動(dòng)態(tài)地呈現(xiàn)包含投票總數(shù)的響應(yīng)。

　　下一步是發(fā)出一個(gè)XmlHttpRequest請(qǐng)求：

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();
    }
  }
}

　　如您所見，執(zhí)行一個(gè)XmlHttpRequest并不簡(jiǎn)單，但非常直觀。和平常一樣，在JavaScript領(lǐng)域，大部分的工作量都花在確保瀏 覽器兼容方面。在這種情況下，首先要確定XmlHttpRequest是否可用。如果不能用，很可能要使用Internet Explorer，這樣就要使用所提供的ActiveX實(shí)現(xiàn)。

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

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

　　第一行定義了JavaScript回調(diào)函數(shù)，您希望一旦響應(yīng)就緒它就自動(dòng)執(zhí)行，而req.open()方法中所指定的“true”標(biāo)志說明您想要異步執(zhí)行該請(qǐng)求。

　　一旦服務(wù)器處理完XmlHttpRequest并返回給瀏覽器，使用req.onreadystatechange指派所設(shè)置的回調(diào)方法將被自動(dòng)調(diào)用。

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);
    }
  }
} 

　　該代碼相當(dāng)簡(jiǎn)潔，并且使用了幾個(gè)幻數(shù)，這使得難以一下子看出發(fā)生了什么。為了弄清楚這一點(diǎn)，下面的表格（引用自http://developer.apple.com/internet/webcontent/xmlhttpreq.html）列舉了常用的XmlHttpRequest對(duì)象屬性。

屬性	描述
onreadystatechange	每次狀態(tài)改變所觸發(fā)事件的事件處理程序
readyState	對(duì)象狀態(tài)值： 0 = 未初始化（uninitialized） 1 = 正在加載（loading） 2 = 加載完畢（loaded） 3 = 交互（interactive） 4 = 完成（complete）
responseText	從服務(wù)器進(jìn)程返回的數(shù)據(jù)的字符串形式
responseXML	從服務(wù)器進(jìn)程返回的DOM兼容的文檔數(shù)據(jù)對(duì)象
status	從服務(wù)器返回的數(shù)字代碼，比如404（未找到）或200（就緒）
statusText	伴隨狀態(tài)碼的字符串信息

　　現(xiàn)在processVoteResponse()函數(shù)開始顯示出其意義了。它首先檢查XmlHttpRequest的整體狀態(tài)以保證它已經(jīng)完成 （readyStatus == 4），然后根據(jù)服務(wù)器的設(shè)定詢問請(qǐng)求狀態(tài)。如果一切正常（status == 200）,就使用innerHTML屬性重寫DOM的“votes”節(jié)點(diǎn)的內(nèi)容。

　　既然您親眼看到了XmlHttpRequest對(duì)象是如何工作的，就讓我們利用一個(gè)旨在簡(jiǎn)化JavaScript與Java應(yīng)用程序之間的異步通信的框架來對(duì)具體的細(xì)節(jié)進(jìn)行抽象。

Ajax: DWR方式

　　按照與文章評(píng)價(jià)系統(tǒng)相同的流程，我們將使用Direct Web Remoting（DWR）框架實(shí)現(xiàn)同樣的功能。

　　假定文章和投票結(jié)果存儲(chǔ)在一個(gè)數(shù)據(jù)庫中，使用某種對(duì)象/關(guān)系映射技術(shù)來完成抽取工作。為了部署起來盡可能地簡(jiǎn)單，我們不會(huì)使用數(shù)據(jù)庫進(jìn)行持久性 存儲(chǔ)。此外，為使應(yīng)用程序盡可能通用，也不使用Web框架。相反，應(yīng)用程序?qū)囊粋€(gè)靜態(tài)HTML文件開始，可以認(rèn)為它由服務(wù)器動(dòng)態(tài)地呈現(xiàn)。除了這些簡(jiǎn)化措 施，應(yīng)用程序還應(yīng)該使用Spring Framework關(guān)聯(lián)一切，以便輕松看出如何在一個(gè)“真實(shí)的”應(yīng)用程序中使用DWR。

　　現(xiàn)在應(yīng)該下載示例應(yīng)用程序并熟悉它。該應(yīng)用程序被壓縮為標(biāo)準(zhǔn)的WAR文件，因此您可以把它放置到任何一個(gè)Web容器中——無需進(jìn)行配置。部署完畢之后，就可以導(dǎo)航到http://localhost:7001/ajax_demo/dwr-ajax.html來運(yùn)行程序。

　　可以查看HTML 源代碼，了解它如何工作。給人印象最深的是，代碼如此簡(jiǎn)單——所有與服務(wù)器的交互都隱藏在JavaScript對(duì)象ajaxSampleSvc的后面。更加令人驚訝的是，ajaxSampleSvc服務(wù)不是由手工編寫而是完全自動(dòng)生成的！讓我們繼續(xù)，看看這是如何做到的。

引入DWR

　　如同在“原始的Ajax”一節(jié)所演示的那樣，直接使用XmlHttpRequest創(chuàng)建異步請(qǐng)求非常麻煩。不僅JavaScript代碼冗長(zhǎng)，而且必須考慮服務(wù)器端為定位Ajax請(qǐng)求到適當(dāng)?shù)姆?wù)所需做的工作，并將結(jié)果封送到瀏覽器。

　　設(shè)計(jì)DWR的目的是要處理將Web頁面安裝到后端服務(wù)上所需的所有信息管道。它是一個(gè)Java框架，可以很輕松地將它插入到Web應(yīng)用程序中， 以便JavaScript代碼可以調(diào)用服務(wù)器上的服務(wù)。它甚至直接與Spring Framework集成，從而允許用戶直接向Web客戶機(jī)公開bean。

　　DWR真正的巧妙之處是，在用戶配置了要向客戶機(jī)公開的服務(wù)之后，它使用反射來生成JavaScript對(duì)象，以便Web頁面能夠使用這些對(duì)象 來訪問該服務(wù)。然后Web頁面只需接合到生成的JavaScript對(duì)象，就像它們是直接使用服務(wù)一樣；DWR無縫地處理所有有關(guān)Ajax和請(qǐng)求定位的瑣 碎細(xì)節(jié)。

　　讓我們仔細(xì)分析一下示例代碼，弄清它是如何工作的。

應(yīng)用程序細(xì)節(jié)：DWR分析

　　關(guān)于應(yīng)用程序，首先要注意的是，它是一個(gè)標(biāo)準(zhǔn)的Java應(yīng)用程序，使用分層架構(gòu)（Layered Architecture）設(shè)計(jì)模式。使用DWR通過JavaScript公開一些服務(wù)并不影響您的設(shè)計(jì)。

　　下面是一個(gè)簡(jiǎn)單的Java服務(wù)，我們將使用DWR框架直接將其向JavaScript代碼公開：

package com.tearesolutions.service;

public interface AjaxSampleSvc { 
  Article castVote(int rank);
}

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

　　為了把該服務(wù)公開為JavaScript對(duì)象，需要配置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哪些服務(wù)是要直接向JavaScript代碼公開的。注意，已經(jīng)要求公開Spring bean ajaxSampleSvc。DWR將自動(dòng)找到由應(yīng)用程序設(shè)置的SpringApplicationContext。為此，必須使用標(biāo)準(zhǔn)的servlet 過濾器ContextLoaderListener來初始化Spring ApplicationContext。

　　DWR被設(shè)置為一個(gè)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，看看哪些服務(wù)可用。結(jié)果如下：

圖3. 可用的服務(wù)

　　單擊ajaxSampleSvc鏈接，查看有關(guān)如何在HTML頁面內(nèi)直接使用服務(wù)的示例實(shí)現(xiàn)。其中包含的兩個(gè)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是動(dòng)態(tài)生成的：

function ajaxSampleSvc() { }

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

　　現(xiàn)在可以使用JavaScript對(duì)象ajaxSampleSvc替換所有的XmlHttpRequest代碼，從而重構(gòu)raw-ajax.html文件。可以在dwr-ajax.html文件中看到改動(dòng)的結(jié)果；下面是新的JavaScript函數(shù)：

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;       
}

　　驚人地簡(jiǎn)單，不是嗎？由ajaxSampleSvc對(duì)象返回的Article域?qū)ο笮蛄谢癁橐粋€(gè)JavaScript對(duì)象，允許在它上面調(diào)用諸 如numberOfVotes()和voteAverage()之類的方法。在動(dòng)態(tài)生成并插入到DIV元素“votes”中的HTML代碼內(nèi)使用這些數(shù) 據(jù)。

下一步工作

　　　在后續(xù)文章中，我將繼續(xù)有關(guān)Ajax的話題，涉及下面這些方面：

• Ajax最佳實(shí)踐

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

• 管理跨請(qǐng)求的狀態(tài)

　　在使用Ajax時(shí)，最初的文檔DOM會(huì)發(fā)生一些變化，并且有大量的頁面狀態(tài)信息存儲(chǔ)在客戶端變量中。當(dāng)用戶跟蹤一個(gè)鏈接到應(yīng)用程序中的另一個(gè)頁面時(shí)，狀態(tài)就丟失了。當(dāng)用戶按照慣例單擊Back按鈕時(shí)，呈現(xiàn)給他們的是緩存中的初始頁面。這會(huì)使用戶感到非常迷惑！

• 調(diào)試技巧

　　使用JavaScript在客戶端執(zhí)行更多的工作時(shí)，如果事情不按預(yù)期方式進(jìn)行，就需要一些調(diào)試工具來幫助弄清出現(xiàn)了什么問題。

結(jié)束語

　　本文介紹了Ajax方法，并展示了如何使用它來創(chuàng)建一個(gè)動(dòng)態(tài)且響應(yīng)靈敏的Web應(yīng)用程序。通過使用DWR框架，可以輕松地把Ajax融合到站點(diǎn)中，而無需擔(dān)心所有必須執(zhí)行的實(shí)際管道工作。

　　特別感謝Getahead IT咨詢公司的Joe Walker和他的團(tuán)隊(duì)開發(fā)出DWR這樣神奇的工具。感謝你們與世界共享它！

下載

　　本文中演示的應(yīng)用程序源代碼可供下載：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

     摘要: 在Java2平臺(tái)企業(yè)版中應(yīng)用異步JavaScript技術(shù)和XML（AJAX） ...  閱讀全文

轉(zhuǎn)載自TheServerSide網(wǎng)站，介紹使用Spring來創(chuàng)建Observer模式。
http://www.theserverside.com/articles/article.tss?l=SpringLoadedObserverPattern
 

This article describes an easy process of implementing the observer pattern in the Spring framework (Spring Core). Also discussed in this article are a few of the Spring Core classes as well as an easy way to start the Spring Framework in any project. Finally, this article shows developers and designers that the Spring framework is a great reason to continue design pattern advocacy in your projects.

Recently, it seems when developers use the Spring framework to improve their projects they focus only on simple object oriented design techniques. Unfortunately some of the more brilliantly researched patterns are forgotten in place of a brilliant framework (Spring). Although the Factory Pattern and the Singleton Pattern are built into Spring, other patterns such as the Decorator Pattern, the Adapter Pattern, and the Observer Pattern are often forgotten because of the new ideas Spring has to offer. Fortunately, design patterns and the Spring framework can exist in the same application. In this article I show how the commonly used Observer Pattern fits nicely in the Spring Framework.

Observer Pattern

The Observer Pattern is also known as a publisher and subscriber design pattern. The pattern is useful when you have one publisher and many subscribers (one-to-many) that are interested in the publisher's state or messages. Additionally, interested subscribers have the ability to register and unregister as they please. Lastly, subscribers are notified of the publisher's messages automatically (that is, by no effort of their own). Figure 1 is an example of a typical observer pattern.

Figure 1. Observer Pattern

I chose to use a more widely accepted diagram to describe the Observer Pattern so you will notice that the aforementioned publisher is actually the Subject in this diagram. The subscriber is the Observer in the diagram. The intimate details of the Observer Pattern are far outside of the scope of this article, but a note worthy topic is how the Spring framework can be used to leverage good object oriented design techniques while creating the concrete classes of this pattern.

A normal concreteObserver class is required to have code similar to this constructor (or a similar “setter” method to achieve the registering of the Observer with the Subject):

public concreteObserver(Subject s) {
	s.addListener(this);
}

Below you will see how the Spring framework wires the two concrete classes together with XML and not with code inside the classes. Ultimately, this allows the developer to avoid any unnecessary coupling of the concrete classes.

Spring Considerations

Since this article covers only the most simple implementation of the observer pattern, I utilize only the required Spring framework jars. At a minimum you need to have the spring-core.jar, the spring-context.jar, and the spring-beans.jar from the Spring framework distribution. Also to avoid any run time errors you need the commons-logging.jar from the Apache Commons project in your class path.

Each of these jars provide a specific role that make using the Spring framework possible. First is the spring-core.jar; this jar is required for all Spring applications. It includes Spring's dependency injection classes as well as other classes that are used to create Spring beans. The spring-context.jar contains the ApplicationContext interface. This interface is used to start the Spring framework in my included example project.

The last Spring jar is the spring-beans.jar. It contains the DesposibleBean interface which the FileSystemXmlApplicationContext bean sub-interfaces. I do not directly use the DesposibleBean interface but I use the FileSystemXmlApplicationContext bean to located the XML file used to configure the Spring framework. The code that implements these classes is shown in Listing 6.

Wiring The Observer Pattern with Spring

To illustrate the Observer Pattern concretely, I chose to create a Town Crier class that sends messages to any registered Town Resident class. To keep this example simple, I developed the same interfaces shown in Figure 1, but the concrete classes are TownCrier and TownResident. All four of these classes are shown in Listings 1 through 4.

After I created the TownCrier (Listing 3) and two TownResident (Listing 4) classes I created an incomplete version the ObserverContext.xml file (Listing 5). This file contains the Spring definitions of the concrete implementation beans. Since this example is simple, I chose not to use any of the more complex attributes of the bean tag.

Typical Bean tags for the shown classes:

	<bean id="townCrier" class="springobserver.TownCrier"/>
	<bean id="townResident1" class="springobserver.TownResident"/>
	<bean id="townResident1" class="springobserver.TownResident2"/>

At this point, I was able to run my ExampleRun class (Listing 6), but nothing eventful actually happened. This is because the TownResident classes were not “wired” into the TownCrier class.

To perform the wiring of the Observer Pattern I chose to use Spring's MethodInvokingFactoryBean class. This process is a very simple way of calling a method on a class and ultimately passing a parameter into method. In this example, the parameter is the bean definition of a townResident. A snapshot of this bean definition is:

<bean id="registerTownResident1" 
class="org.springframework.beans.factory.config.MethodInvokingFactoryBean">
    <property name="targetObject"><ref local="townCrier"/></property>
    <property name="targetMethod"><value>addListener</value></property>
    <property name="arguments">
    <list>
      <ref bean="townResident1"/>
    </list>
    </property>
</bean>

As you can see, the targetObject is the townCrier bean, the targetMethod is the addListener method and the argument is the townResident1 bean. This configuration is the only code needed to compose the concrete implementations of the TownCrier with TownResident class.

Now that I have the beans wired together using the MethodInvokingFactoryBean class, I can run my ExampleRun class and see that my TownResident classes are receiving messages from the TownCrier class. Results shown in Example 1.

Conclusion

A few lessons learned in this article include a simple way to start the Spring framework, how to use the MethodInvokingFactoryBean, and an efficient implementation the Observer Pattern in the Spring framework. Since this is a minimal approach to the Spring framework, I was able to show the relationship between the ApplicationContext and it's implementation FileSystemXmlApplicationContext class. This process for starting Spring applications is a very easy way to leverage an incredible framework.

Part of this framework is the MethodInvokingFactoryBean. When using it you are free to employ any parameter available to you such as an Integer, a String, or in our case, another Spring bean. By allowing you to expose methods in your context xml files you can be as flexible as you can dream. This article has covered the addListener() method of the Observer Pattern. I would like to extend a challenge to you to figure out how to implement the removeListener() method using strictly the Spring framework.

Lastly, the Observer Pattern is a common and very useful pattern. The practices shown in this article provide an example of how the concrete implementation of the Observer interface can be developed with no additional coupling to the concrete implementation of the Subject interface. This feature of Spring encourages good object oriented design techniques. As a final note, there is really no reason developers and designers can not find ways to marry proven design patterns with beautifully developed frameworks.

Listing 1. The Observer Interface

package springobserver;
public interface Observer {
  public void update(String messageText);
}

Listing 2. The Subject Interface

package springobserver;
public interface Subject {
  public void addListener(Observer o);
  public void removeListener(Observer o);
  public void notifyListeners();
}

Listing 3. The Town Crier

package springobserver;

import java.util.ArrayList;
import java.util.Iterator;
import java.util.List;

public class TownCrier implements Subject {

	private List townResident = new ArrayList();
	private String messageText;

	// this message is added so I can give 
	// this class a reason to call notifyListener.
	public void setMessage(String message){
		System.out.println("I'm the Town Crier and " +
				"I've got a message: " + message);
		this.messageText = message;
		this.notifyListeners();
	}
	
	public void addListener(Observer o) {
		this.townResident.add(o);
	}

	public void removeListener(Observer o) {
		if (this.townResident.contains(o)){
			this.townResident.remove(o);
		}
	}

	
	// call the update method on 
	// each observer (town resident)
	public void notifyListeners() {
		for (Iterator iter = townResident.iterator(); iter.hasNext();) {
			Observer listener = (Observer) iter.next();
			listener.update(messageText);
		}
	}

}

Listing 4. The Town Residents

package springobserver;

public class TownResident implements Observer {
	public void update(String messageText) {
		System.out.println("Greetings my name is: " + this);
		System.out.println("I heard: " + messageText);
	}

-------- new class --------
package springobserver;

public class TownResident2 implements Observer {
	public void update(String messageText) {
		System.out.println("Greetings my name is: " + this);
		System.out.println("I heard: " + messageText);
	}

}

Listing 5. The Application Context XML (ObserverContext.xml)

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE beans PUBLIC "-//SPRING//DTD BEAN//EN" 
"http://www.springframework.org/dtd/spring-beans.dtd">

<beans>
	<!-- This bean is the town crier.  
	He's responsible for notifying all town residents that are interested in his message -->
	<bean id="townCrier" class="springobserver.TownCrier"/>
	
	<!-- this bean is a town resident interested in the town criers messages -->
	<bean id="townResident1" class="springobserver.TownResident"/>          
       
	<!-- this bean is another town resident interested in the town criers messages -->
	<bean id="townResident2" class="springobserver.TownResident2"/>
    
    
     <!-- this is a method invoking bean that registers the first town resident with
          with the town crier -->   
    <bean id="registerTownResident1" 
      class="org.springframework.beans.factory.config.MethodInvokingFactoryBean">
      <property name="targetObject"><ref local="townCrier"/></property>
      <property name="targetMethod"><value>addListener</value></property>
      <property name="arguments">
      <list>
        <ref bean="townResident1"/>
      </list>
      </property>
    </bean>
    
    
     <!-- this is a method invoking bean that registers the second town 
          resident with the town crier -->   
    <bean id="registerTownResident2" 
      class="org.springframework.beans.factory.config.MethodInvokingFactoryBean">
      <property name="targetObject"><ref local="townCrier"/></property>
      <property name="targetMethod"><value>addListener</value></property>
      <property name="arguments">
      <list>
        <ref bean="townResident2"/>
      </list>
      </property>
    </bean>         
 
 </beans>

Listing 6. Example Run

package springobserver;
import org.springframework.context.ApplicationContext;
import org.springframework.context.support.FileSystemXmlApplicationContext;

public class ExampleRun {
	public static void main(String[] args) {
		// launch the spring frame work.
		ApplicationContext ctx = new FileSystemXmlApplicationContext(
				"/config/ObserverContext.xml");
		// grab the Town Crier out of the spring 
		// framework and send a message too all observers
		TownCrier crier = (TownCrier) ctx.getBean("townCrier");
		crier.setMessage("It is 1 O'Clock and all is well!");
	}
}

Example 1. System Output

I'm the Town Crier and I've got a message: It is 1 O'Clock and all is well!
Greetings my name is: springobserver.TownResident@80fa6f
I heard: It is 1 O'Clock and all is well!
Greetings my name is: springobserver.TownResident2@1b9ce4b
I heard: It is 1 O'Clock and all is well!