時(shí)間：2005-11-01
作者：
David Teare本文關(guān)鍵字：
ajax,
dhtml,
dwr,
javascript作為J2EE開發(fā)人員，我們似乎經(jīng)常關(guān)注“后端機(jī)制（backend mechanics）”。我們通常會忘記，J2EE的主要成功之處在Web應(yīng)用程序方面；許多原因使得人們喜歡利用Web開發(fā)應(yīng)用程序，但主要還是因?yàn)槠湟子诓渴鸬奶攸c(diǎn)允許站點(diǎn)以盡可能低的成本擁有上百萬的用戶。遺憾的是，在過去幾年中，我們在后端投入了太多的時(shí)間，而在使我們的Web用戶界面對用戶自然和響應(yīng)靈敏方面卻投入不足。
本文介紹一種方法，Ajax，使用它可以構(gòu)建更為動(dòng)態(tài)和響應(yīng)更靈敏的Web應(yīng)用程序。該方法的關(guān)鍵在于對瀏覽器端的JavaScript、DHTML和與服務(wù)器異步通信的組合。本文也演示了啟用這種方法是多么簡單：利用一個(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文件，可供下載。
簡介
術(shù)語Ajax用來描述一組技術(shù)，它使瀏覽器可以為用戶提供更為自然的瀏覽體驗(yàn)。在Ajax之前，Web站點(diǎn)強(qiáng)制用戶進(jìn)入提交/等待/重新顯示范例，用戶的動(dòng)作總是與服務(wù)器的“思考時(shí)間”同步。Ajax提供與服務(wù)器異步通信的能力，從而使用戶從請求/響應(yīng)的循環(huán)中解脫出來。借助于Ajax，可以在用戶單擊按鈕時(shí)，使用JavaScript和DHTML立即更新UI，并向服務(wù)器發(fā)出異步請求，以執(zhí)行更新或查詢數(shù)據(jù)庫。當(dāng)請求返回時(shí)，就可以使用JavaScript和CSS來相應(yīng)地更新UI，而不是刷新整個(gè)頁面。最重要的是，用戶甚至不知道瀏覽器正在與服務(wù)器通信：Web站點(diǎn)看起來是即時(shí)響應(yīng)的。
雖然Ajax所需的基礎(chǔ)架構(gòu)已經(jīng)出現(xiàn)了一段時(shí)間，但直到最近異步請求的真正威力才得到利用。能夠擁有一個(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ā)周期中，常常會聽到這樣的話，“我們沒有可投入U(xiǎn)I的時(shí)間”或“不能用HTML實(shí)現(xiàn)”。但是，以下Web站點(diǎn)證明，這些理由再也站不住腳了：
所有這些Web站點(diǎn)都告訴我們，Web應(yīng)用程序不必完全依賴于從服務(wù)器重新載入頁面來向用戶呈現(xiàn)更改。一切似乎就在瞬間發(fā)生。簡而言之，在涉及到用戶界面的響應(yīng)靈敏度時(shí)，基準(zhǔn)設(shè)得更高了。
定義Ajax
Adaptive Path公司的Jesse James Garrett這樣定義Ajax：
Ajax不是一種技術(shù)。實(shí)際上，它由幾種蓬勃發(fā)展的技術(shù)以新的強(qiáng)大方式組合而成。Ajax包含：
這非常好，但為什么要以Ajax命名呢？其實(shí)術(shù)語Ajax是由Jesse James Garrett創(chuàng)造的，他說它是“Asynchronous JavaScript + XML的簡寫”。
Ajax的工作原理
Ajax的核心是JavaScript對象XmlHttpRequest。該對象在Internet Explorer 5中首次引入，它是一種支持異步請求的技術(shù)。簡而言之，XmlHttpRequest使您可以使用JavaScript向服務(wù)器提出請求并處理響應(yīng)，而不阻塞用戶。
在創(chuàng)建Web站點(diǎn)時(shí)，在客戶端執(zhí)行屏幕更新為用戶提供了很大的靈活性。下面是使用Ajax可以完成的功能：
- 動(dòng)態(tài)更新購物車的物品總數(shù)，無需用戶單擊Update并等待服務(wù)器重新發(fā)送整個(gè)頁面。
- 提升站點(diǎn)的性能，這是通過減少從服務(wù)器下載的數(shù)據(jù)量而實(shí)現(xiàn)的。例如，在Amazon的購物車頁面，當(dāng)更新籃子中的一項(xiàng)物品的數(shù)量時(shí)，會重新載入整個(gè)頁面，這必須下載32K的數(shù)據(jù)。如果使用Ajax計(jì)算新的總量，服務(wù)器只會返回新的總量值，因此所需的帶寬僅為原來的百分之一。
- 消除了每次用戶輸入時(shí)的頁面刷新。例如，在Ajax中，如果用戶在分頁列表上單擊Next，則服務(wù)器數(shù)據(jù)只刷新列表而不是整個(gè)頁面。
- 直接編輯表格數(shù)據(jù)，而不是要求用戶導(dǎo)航到新的頁面來編輯數(shù)據(jù)。對于Ajax，當(dāng)用戶單擊Edit時(shí)，可以將靜態(tài)表格刷新為內(nèi)容可編輯的表格。用戶單擊Done之后，就可以發(fā)出一個(gè)Ajax請求來更新服務(wù)器，并刷新表格，使其包含靜態(tài)、只讀的數(shù)據(jù)。
一切皆有可能！但愿它能夠激發(fā)您開始開發(fā)自己的基于Ajax的站點(diǎn)。然而，在開始之前，讓我們介紹一個(gè)現(xiàn)有的Web站點(diǎn)，它遵循傳統(tǒng)的提交/等待/重新顯示的范例，我們還將討論Ajax如何提升用戶體驗(yàn)。
Ajax可用于那些場景？——一個(gè)例子：MSN Money頁面
前幾天，在瀏覽MSN Money頁面的時(shí)候，有一篇關(guān)于房地產(chǎn)投資的文章引起了我的好奇心。我決定使用站點(diǎn)的“Rate this article”（評價(jià)本文）功能，鼓勵(lì)其他的用戶花一點(diǎn)時(shí)間來閱讀這篇文章。在我單擊vote按鈕并等待了一會兒之后，整個(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對象XmlHttpRequest。下面的示例文章評價(jià)系統(tǒng)將帶您熟悉Ajax的底層基本知識：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é)。
首先，您擁有一些簡單的定位點(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è)簡單的Apache環(huán)境中，“cast vote URL”只是一個(gè)簡單的HTML頁面。在實(shí)際情況中，被調(diào)用的URL將記錄票數(shù)并動(dòng)態(tài)地呈現(xiàn)包含投票總數(shù)的響應(yīng)。
下一步是發(fā)出一個(gè)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();
}
}
}
如您所見，執(zhí)行一個(gè)XmlHttpRequest并不簡單，但非常直觀。和平常一樣，在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í)行該請求。
一旦服務(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)簡潔，并且使用了幾個(gè)幻數(shù)，這使得難以一下子看出發(fā)生了什么。為了弄清楚這一點(diǎn)，下面的表格（引用自http://developer.apple.com/internet/webcontent/xmlhttpreq.html）列舉了常用的XmlHttpRequest對象屬性。
|
屬性 |
描述 |
|
onreadystatechange |
每次狀態(tài)改變所觸發(fā)事件的事件處理程序 |
|
readyState |
對象狀態(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ù)對象 |
|
status |
從服務(wù)器返回的數(shù)字代碼，比如404（未找到）或200（就緒） |
|
statusText |
伴隨狀態(tài)碼的字符串信息 |
現(xiàn)在processVoteResponse()函數(shù)開始顯示出其意義了。它首先檢查XmlHttpRequest的整體狀態(tài)以保證它已經(jīng)完成（readyStatus == 4），然后根據(jù)服務(wù)器的設(shè)定詢問請求狀態(tài)。如果一切正常（status == 200）,就使用innerHTML屬性重寫DOM的“votes”節(jié)點(diǎn)的內(nèi)容。
既然您親眼看到了XmlHttpRequest對象是如何工作的，就讓我們利用一個(gè)旨在簡化JavaScript與Java應(yīng)用程序之間的異步通信的框架來對具體的細(xì)節(jié)進(jìn)行抽象。
Ajax: DWR方式
按照與文章評價(jià)系統(tǒng)相同的流程，我們將使用Direct Web Remoting（DWR）框架實(shí)現(xiàn)同樣的功能。
假定文章和投票結(jié)果存儲在一個(gè)數(shù)據(jù)庫中，使用某種對象/關(guān)系映射技術(shù)來完成抽取工作。為了部署起來盡可能地簡單，我們不會使用數(shù)據(jù)庫進(jìn)行持久性存儲。此外，為使應(yīng)用程序盡可能通用，也不使用Web框架。相反，應(yīng)用程序?qū)囊粋€(gè)靜態(tài)HTML文件開始，可以認(rèn)為它由服務(wù)器動(dòng)態(tài)地呈現(xià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 源代碼，了解它如何工作。給人印象最深的是，代碼如此簡單——所有與服務(wù)器的交互都隱藏在JavaScript對象ajaxSampleSvc的后面。更加令人驚訝的是，ajaxSampleSvc服務(wù)不是由手工編寫而是完全自動(dòng)生成的！讓我們繼續(xù)，看看這是如何做到的。
引入DWR
如同在“原始的Ajax”一節(jié)所演示的那樣，直接使用XmlHttpRequest創(chuàng)建異步請求非常麻煩。不僅JavaScript代碼冗長，而且必須考慮服務(wù)器端為定位Ajax請求到適當(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對象，以便Web頁面能夠使用這些對象來訪問該服務(wù)。然后Web頁面只需接合到生成的JavaScript對象，就像它們是直接使用服務(wù)一樣；DWR無縫地處理所有有關(guān)Ajax和請求定位的瑣碎細(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è)簡單的Java服務(wù)，我們將使用DWR框架直接將其向JavaScript代碼公開：
package com.tearesolutions.service;
public interface AjaxSampleSvc {
Article castVote(int rank);
}
這是一個(gè)被簡化到幾乎不可能的程度的例子，其中只有一篇文章可以投票。該服務(wù)由Spring管理，它使用的bean名是ajaxSampleSvc，它的持久性需求則依賴于ArticleDao。詳情請參見applicationContext.xml。
為了把該服務(wù)公開為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哪些服務(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對象ajaxSampleSvc替換所有的XmlHttpRequest代碼，從而重構(gòu)raw-ajax.html文件?？梢栽赿wr-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;
}
驚人地簡單，不是嗎？由ajaxSampleSvc對象返回的Article域?qū)ο笮蛄谢癁橐粋€(gè)JavaScript對象，允許在它上面調(diào)用諸如numberOfVotes()和voteAverage()之類的方法。在動(dòng)態(tài)生成并插入到DIV元素“votes”中的HTML代碼內(nèi)使用這些數(shù)據(jù)。
下一步工作
在后續(xù)文章中，我將繼續(xù)有關(guān)Ajax的話題，涉及下面這些方面：
像許多技術(shù)一樣，Ajax是一把雙刃劍。對于一些用例，其應(yīng)用程序其實(shí)沒有必要使用Ajax，使用了反而有損可用性。我將介紹一些不適合使用的模式，突出說明Ajax的一些消極方面，并展示一些有助于緩和這些消極方面的機(jī)制。例如，對Netflix電影瀏覽器來說，Ajax是合適的解決方案嗎？或者，如何提示用戶確實(shí)出了一些問題，而再次單擊按鈕也無濟(jì)于事？
在使用Ajax時(shí)，最初的文檔DOM會發(fā)生一些變化，并且有大量的頁面狀態(tài)信息存儲在客戶端變量中。當(dāng)用戶跟蹤一個(gè)鏈接到應(yīng)用程序中的另一個(gè)頁面時(shí)，狀態(tài)就丟失了。當(dāng)用戶按照慣例單擊Back按鈕時(shí)，呈現(xiàn)給他們的是緩存中的初始頁面。這會使用戶感到非常迷惑！
使用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）。