DWR让Ajax如此简单

最新推荐文章于 2017-04-09 20:00:00 发布

转载最新推荐文章于 2017-04-09 20:00:00 发布 · 834 阅读

文章标签：

#dwr #ajax #xmlhttprequest #javascript #servlet #数据库

【3】AJAX专题专栏收录该内容

6 篇文章

订阅专栏

本文介绍如何使用DWR和Ajax技术提升Web应用的交互性和用户体验。通过一个具体的示例——多伦多公寓租赁搜索引擎，展示了DWR如何简化Ajax的实现过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这篇文章阐述了使用开源项目DWR(直接Web远程控制)和Ajax(异步JavaScript和XML)的概念来提高Web应用的可用性。作者一步步来展示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>

marginwidth="0" marginheight="0" src="http://www.techtarget.com.cn/ttfiles/ttimages/cmsflash/webservices_pip.html" frameborder="0" width="360" scrolling="no" height="300" bordercolor="#000">

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

　　示例应用

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

　　数据库

　　Java类

　　DWR配置和使用

    <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>

HTML/JSP代码

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

　　我们注意到当用户改变搜索标准时，这是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对象之间的通信，这样就帮助你完全集中注意力在如何让你的应用的用户界面更加友好，

　　我想感谢Mircea Oancea和Marcos Pereira,他们阅读了这篇文章并给予了非常有价值的返匮。

版权声明：Techtarget获Matrix授权发布,如需转载请联系Matrix
作者:Cloves Carneiro;simmone
原文地址:http://www.javaworld.com/javaworld/jw-06-2005/jw-0620-dwr.html