随笔档案(496)

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目录下：

dwr.xml文件告诉DWR哪些服务是要直接向JavaScript代码公开的。注意，已经要求公开Spring bean ajaxSampleSvc。DWR将自动找到由应用程序设置的SpringApplicationContext。为此，必须使用标准的servlet过滤器ContextLoaderListener来初始化Spring ApplicationContext。

DWR被设置为一个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，看看哪些服务可用。结果如下：

图3. 可用的服务

单击ajaxSampleSvc链接，查看有关如何在HTML页面内直接使用服务的示例实现。其中包含的两个JavaScript文件完成了大部分的功能：

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的话题，涉及下面这些方面：