DWR让Ajax如此简单

Ajax，或者说是异步JavaScript和XML，描述了一种使用混合了HTML(或XHTML)和层叠样式表作为表达信息,来创建交互式的Web应用的开发技术;文档对象模型(DOM)，JavaScript,动态地显示和与表达信息进行交互;并且，XMLHttpRequest对象与Web服务器异步地交换和处理数据。

因特网上许多例子展示了在一个HTML文件内部使用XMLHttpRequest与服务器端进行交互的必要的步骤。当手工地编写和维护XMLHttpRequest代码时，开发者必须处理许多潜在的问题，特别是类似于跨浏览器的DOM实现的兼容性这样的问题。这将会导致在编码和调试Javascript代码上面花费数不清的时间，这显然对开发者来说很不友好。

DWR(直接Web远程控制)项目是在Apache许可下的一个开源的解决方案，它供给那些想要以一种简单的方式使用Ajax和XMLHttpRequest的开发者。它具有一套Javascript功能集，它们把从HTML页面调用应用服务器上的Java对象的方法简化了。它操控不同类型的参数，并同时保持了HTML代码的可读性。

DWR不是对一个设计的插入，也不强迫对象使用任何种类的继承结构。它和servlet框架内的应用配合的很好。对缺少DHTML编程经验的开发者来说，DWR也提供了一个JavaScript库包含了经常使用的DHTML任务，如组装表，用item填充select下拉框，改变HTML元素的内容，如<div>和<span>

DWR网站是详尽的并且有大量的文档，这也是这篇文章的基础。一些例子用来展示DWR如何使用和用它的库可以完成什么样的工作。

这篇文章让读者看到了一个使用了DWR的Web应用是如何一步步建立的。我会展示创建这个简单的示例应用的必要的细节，这个应用是可下载的并且可以在你的环境中布署来看看DWR如何工作。

注意:找到有关Ajax的信息并不困难;网页上有几篇文章和博客的条目涵盖了这个主题，每一个都试图指出和评论这个概念的不同的方面。在资源部分，你会找到一些有趣的指向示例和文章的链接，来学习Ajax的更多的内容。

示例应用

这篇文章使用的示例应用模拟了多伦多的一个公寓出租搜索引擎。用户可以在搜索前选择一组搜索标准。为了提高交互性，Ajax中以下两种情况下使用:

·应用通告用户配合他的选择会返回多少搜索结果。这个数字是实时更新的-使用Ajax-当用户选择的卧室和浴室的数量，或者价格范围变化时。当符合标准的搜索结果没有或太多时，用户就没有必要点击搜索按纽。

·数据库查询并取回结果是由Ajax完成的。当用户按下显示结果按钮时，数据库执行搜索。这样，应用看起来更具响应了，而整个页面不需要重载来显示结果。

数据库

我们使用的数据库是HSQL，它是一种占用资源很小的Java SQL数据库引擎，可以不需要安装和配置的与Web应用捆绑在一起。一个SQL文件被用来在Web应用的上下文启动时创建一个内存中的表并添加一些记录。

Java类

应用包含了两个主要的类叫Apartment和ApartmentDAO。Apartment.java类是一个有着属性和getter/setter方法的简单的Java类。ApartmentDAO.java是数据访问类，用来查询数据库并基于用户的搜索标准来返回信息。ApartmentDAO类的实现的直接了当的;它直接使用了Java数据库联接调用来得到公寓的总数和符合用户请求的可用公寓的列表。

DWR配置和使用

设置DWR的使用是简单的:将DWR的jar文件拷入Web应用的WEB-INF/lib目录中，在web.xml中增加一个servlet声明，并创建DWR的配置文件。DWR的分发中需要使用一个单独的jar文件。你必须将DWR servlet加到应用的WEB-INF/web.xml中布署描述段中去。

    <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>dwr-invoker</servlet-name>

<url-pattern>/dwr/*</url-pattern>

</servlet-mapping>

一个可选的步骤是设置DWR为调试模式—象上面的例子那样—在servlet描述段中将debug参数设为true。当DWR在调试模式时，你可以从HTMl网页中看到所有的可访问的Java对象。包含了可用对象列表的网页会出现在/WEBAPP/dwr这个url上，它显示了对象的公共方法。所列方法可以从页面中调用，允许你，第一次，运行服务器上的对象的方法。下图显示了调试页的样子:

调试页

现在你必须让DWR知道通过XMLHttpRequest对象，什么对象将会接收请求。这个任务由叫做dwr.xml的配置文件来完成。在配置文件中，定义了DWR允许你从网页中调用的对象。从设计上讲，DWR允许访问所有公布类的公共方法，但在我们的例子中，我们只允许访问几个方法。下面是我们示例的配置文件:

<dwr>

<allow>

<convert converter="bean" match="dwr.sample.Apartment"/>

<create creator="new" javascript="ApartmentDAO" class="dwr.sample.ApartmentDAO">

<include method="findApartments"/>

<include method="countApartments"/>

</create>

</allow>

</dwr>

上面的文件实现了我们例子中的两个目标。首先，<convert>标记告诉DWR将dwr.sample.Apartment对象的类型转换为联合数组，因为，出于安全的原因，DWR默认的不会转换普通bean。第二，<create>标记让DWR暴露出dwr.sample.ApartmentDAO类给JavaScript调用;我们在页面中使用JavaScript文件被javascript属性定义。我们必须注意<include>标记，它指明了dwr.sample.ApartmentDAO类的哪些方法可用。

HTML/JSP代码

配置完成后，你就可以启动你的Web应用了，这时DWR会为从你的HTML或Java服务器端页面(JSP)上调用所需方法作好准备，并不需要你创建JavaScript文件。在search.jsp文件中， 我们必须增加由DWR提供的JavaScript接口，还有DWR引擎，加入以下三行到我们的代码中:

  <script src='dwr/interface/ApartmentDAO.js'></script>

<script src='dwr/engine.js'></script>

<script src='dwr/util.js'></script>

我们注意到当用户改变搜索标准时，这是Ajax在示例程序中的首次应用;正如他所看到的，当标准改变时，可用的公寓数量被更新了。我创建了两个JavaScript函数:当某一个选择下拉框中的值变化时被调用。ApartmentDAO.countApartments()函数是最重要的部分。最有趣的是第一个参数, loadTotal()函数，它指明了当接收到服务端的返回时DWR将会调用的JavaScript方法。loadTotal于是被调用来在HTML页面的

中显示结果。下面是在这个交互场景中所使用到的JavaScript函数:

 

function updateTotal() {

$("resultTable").style.display = 'none';

var bedrooms = document.getElementById("bedrooms").value;

var bathrooms = document.getElementById("bathrooms").value;

var price = document.getElementById("price").value;

ApartmentDAO.countApartments(loadTotal, bedrooms, bathrooms, price);

}

function loadTotal(data) {

document.getElementById("totalRecords").innerHTML = data;

}

很明显，用户想看到符合他的搜索条件的公寓列表。那么，当用户对他的搜索标准感到满意，并且总数也是有效的话，他会按下显示结果的按纽，这将会调用updateResults() JavaScript方法:

function updateResults() {



DWRUtil.removeAllRows("apartmentsbody");

var bedrooms = document.getElementById("bedrooms").value;

var bathrooms = document.getElementById("bathrooms").value;

var price = document.getElementById("price").value;

ApartmentDAO.findApartments(fillTable, bedrooms, bathrooms, price);

$("resultTable").style.display = '';

}

function fillTable(apartment) {

DWRUtil.addRows("apartmentsbody", apartment, [ getId, getAddress, getBedrooms, getBathrooms, getPrice ]);

}

updateResults()方法清空了存放搜索返回结果的表域，从用户界面上获取所需参数，并且将这些参数传给DWR创建的ApartmentDAO对象。然后数据库查询将被执行，fillTable()将会被调用，它解析了DWR返回的对象(apartment)，然后将其显示到页面中(apartmentsbody)。

安全因素

为了保持示例的简要，ApartmentDAO类尽可能的保持简单，但这样的一个类通常有一组设置方法来操作数据，如insert(), update()和delete()。DWR暴露了所有公共方法给所有的HTML页面调用。出于安全的原因，像这样暴露你的数据访问层是不明智的。开发者可以创建一个门面来集中所有JavaScript函数与底层业务组件之间的通信，这样就限制了过多暴露的功能。

结论

这篇文章仅仅让你在你的项目中使用由DWR支持的Ajax开了个头。DWR让你集中注意力在如何提高你的应用的交互模型上面，消除了编写和调试JavaScript代码的负担。使用Ajax最有趣的挑战是定义在哪里和如何提高可用性。DWR负责了操作Web页面与你的Java对象之间的通信，这样就帮助你完全集中注意力在如何让你的应用的用户界面更加友好。