隨筆檔案(496)

Ajax: DWR方式

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

假定文章和投票結(jié)果存儲(chǔ)在一個(gè)數(shù)據(jù)庫中，使用某種對象/關(guān)系映射技術(shù)來完成抽取工作。為了部署起來盡可能地簡單，我們不會(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)。除了這些簡化措施，應(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目錄下：

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：

 Ajax Examples

??????? org.springframework.web.context.ContextLoaderListener
???
??ajax_sample
??com.tearesolutions.web.AjaxSampleServlet
??1

??dwr-invoker
??DWR Servlet
??Direct Web Remoter Servlet
??uk.ltd.getahead.dwr.DWRServlet
??
???debug
???true
???
??ajax_sample
??/ajax_sample
??
??dwr-invoker
??/dwr/*

做完這些之后，可以加載http://localhost:7001/ajax-demo/dwr，看看哪些服務(wù)可用。結(jié)果如下：

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

單擊ajaxSampleSvc鏈接，查看有關(guān)如何在HTML頁面內(nèi)直接使用服務(wù)的示例實(shí)現(xiàn)。其中包含的兩個(gè)JavaScript文件完成了大部分的功能：

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文件。可以在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;???????? 
}

驚人地簡單，不是嗎？由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的話題，涉及下面這些方面：