📄 使用dwr简化ajax.htm
字号:
class=a14>如今，因特网上有许多示例都阐述了在HTML文件里面使用XMLHttpRequest与服务器进行通信的所有必要步骤。如果人工编写及维护XMLHttpRequest代码，开发人员就要处理许多潜在问题，特别是跨浏览器的兼容性，譬如实现的DOM各不相同。这会导致大量的时间用于编写及调试Javascript代码上面，这对开发人员很不利。
<P
class=a14>直接Web远程控制（DWR）项目是获得Apache许可证的开放源代码解决方案，面向希望可以轻松使用AJAX和XMLHttpRequest的开发人员。它有一系列Javascript函数，去除了从HTML页面调用应用服务器上运行的Java对象的方法带来的复杂性。它能处理不同类型的参数，而且有助于确保HTML代码的可读性。
<P
class=a14>DWR不会干扰开发人员的设计，因为它不会强迫要发布的对象使用某一种继承架构。它非常适用于可在服务器小程序框架内运行的任何应用程序。对DHTML方面缺少经验的开发人员来说，DWR还提供了JavaScript库，有助于处理经常用到的DHTML任务，譬如为表批量载入、用项目填充选择框，以及改变<
div>和< span>等HTML元素的内容。
<P class=a14>DWR网站内容齐全，提供了大量文档，可作为这篇文章的基础。文章提供了一些示例，演示如何使用DWR以及用库来完成什么工作。
<P class=a14>本文介绍如何逐步构建使用DWR的Web应用程序。介绍了创建这个示例应用程序必需的所有细节。
<P class=a14>示例应用程序
<P
class=a14>本文使用的示例应用程序模拟了多伦多市的公寓出租搜索引擎。用户可以在进行搜索前选择一系列搜索标准。为了提高交互性，AJAX用于以下两种情况:
<P
class=a14>一是应用程序告知用户有多少搜索结果符合他的选择。当用户选择所需卧室和浴室的数量以及价格范围时，这个数字会实时更新——使用AJAX来更新。由于为用户显示了结果数量，如果符合用户标准的结果没有或者结果太多，用户就不必点击搜索按纽。
<P
class=a14>二是从数据库获取公寓单元的数据库查询使用AJAX来执行。用户按下“显示结果”按钮后，就会执行数据库搜索。因而，应用程序的响应能力似乎得到了提高，因为不必重新加载整个页面，即可显示结果。
<P class=a14>示例使用的数据库是HSQL，这个Java
SQL数据库引擎占用的资源很少，可以与Web应用程序捆绑在一起，不需要另外的安装及配置。Web应用程序的上下文启动后，SQL文件可用来创建内存中表、添加一些记录。
<P class=a14>该应用程序含有两个主要的类:
Apartment和ApartmentDAO。Apartment.java类是一个简单的Java类，具有属性和getter/setter方法。ApartmentDAO.java是数据访问类，用于根据用户的搜索标准来查询数据库、获取信息。ApartmentDAO类的实现简单而直观，它直接使用Java数据库连接性（JDC）调用来获得公寓单元的总数及与用户请求相符的现有公寓单元的列表。
<P class=a14>DWR配置和使用
<P class=a14>DWR的配置很简单:
把DWR的jar文件拷贝到Web应用程序的WEB-INF/lib目录下，为web.xml添加服务器小程序声明，然后创建DWR配置文件。DWR发布版只需要使用一个jar文件。必须把DWR服务器小程序添加到WEB-INF/web.xml中该应用程序的部署描述文件里面:
<P class=a14>< servlet>
<P class=a14>< servlet-name>dwr-invoker< /servlet-name>
<P class=a14>< display-name>DWR Servlet< /display-name>
<P class=a14>< description>Direct Web Remoter Servlet<
/description>
<P class=a14>< servlet-class>uk.ltd.getahead.dwr.DWRServlet<
/servlet-class>
<P class=a14>< init-param>
<P class=a14>< param-name>debug< /param-name>
<P class=a14>< param-value>true< /param-value>
<P class=a14>< /init-param>
<P class=a14>< /servlet>
<P class=a14>< servlet-mapping>
<P class=a14>< servlet-name>dwr-invoker< /servlet-name>
<P class=a14>< url-pattern>/dwr/*< /url-pattern>
<P class=a14>< /servlet-mapping>
<P
class=a14>一个可选的步骤是，通过在服务器小程序声明中把调试参数设为true，从而在调试模式下设置DWR——如上面的示例所示。一旦DWR服务器小程序处于调试模式下，就可以看到可从HTML页面访问的所有Java对象。含有可用对象列表的页面会出现在/WEBAPP/dwr这个URL上，它显示了所选择类的公共方法。列出来的方法可以从该页面中调用。
<P class=a14>现在必须让DWR知道哪些对象将通过XMLHttpRequest对象来接收请求。只要使用DWR自己的配置文件:
dwr.xml，就可以完成这项任务。在该配置文件中，可以定义DWR允许从HTML页面中调用的对象。按照设计，DWR允许访问已发布类的所有公共方法，不过在本文示例中，我们只允许访问几个方法。以下是示例的配置文件:
<P class=a14>< dwr>
<P class=a14>< allow>
<P class=a14>< convert converter="bean"
match="dwr.sample.Apartment"/>
<P class=a14>< create creator="new" javascript="ApartmentDAO"
class="dwr.sample.ApartmentDAO">
<P class=a14>< include method="findApartments"/>
<P class=a14>< include method="countApartments"/>
<P class=a14>< /create>
<P class=a14>< /allow>
<P class=a14>< /dwr>
<P class=a14>上述文件实现了示例中的两个目标。首先，<
convert>标记让DWR把dwr.sample.Apartment类型的对象转换成JavaScript关联数组，这是因为:
由于安全原因，DWR在默认情况下不会转换普通bean。其次，<
create>标记让DWR发布dwr.sample.ApartmentDAO类，以便可以从JavaScript来调用。我们在页面中使用的JavaScript文件由javascript属性来定义。我们必须注意<
include>标记，因为这种标记指明了可以使用dwr.sample.ApartmentDAO类的哪些方法。
<P class=a14>HTML/JSP代码
<P
class=a14>一旦配置完毕，就可以启动Web应用程序了，这时DWR已准备好从HTML或者Java服务器页面（JSP）调用所需要的方法，用不着创建JavaScript文件。在search.jsp文件中，
除了DWR引擎外，我们还必须添加由DWR提供的JavaScript接口引用，只要往代码中添加以下三行:
<P class=a14>< script src='dwr/interface/ApartmentDAO.js'><
/script>
<P class=a14>< script src='dwr/engine.js'>< /script>
<P class=a14>< script src='dwr/util.js'>< /script>
<P
class=a14>如果用户改变搜索标准，就会发现示例应用程序中首次使用AJAX。能够看到，搜索标准变化后，现有公寓的数量被更新了。这里创建了两个JavaScript函数:
其中一个选择框中的值变化后，就调用updateTotal()函数。ApartmentDAO.countApartments()函数是最重要的部分。最有意思的是第一个参数:
loadTotal()函数，它指明了收到来自服务器的响应后DWR将使用的回调方法。然后调用loadTotal()，在HTML页面的<
div>上显示结果。下面介绍了在描述的交互场景中如何使用JavaScript函数:
<P class=a14>function updateTotal() {
<P class=a14>$("resultTable").style.display = 'none';
<P class=a14>var bedrooms = document.getElementById("bedrooms").value;
<P class=a14>var bathrooms = document.getElementById("bathrooms").value;
<P class=a14>var price = document.getElementById("price").value;
<P class=a14>ApartmentDAO.countApartments(loadTotal, bedrooms, bathrooms,
price);
<P class=a14>}
<P class=a14>function loadTotal(data) {
<P class=a14>document.getElementById("totalRecords").innerHTML = data;
<P class=a14>}
<P
class=a14>显然，用户希望看到符合搜索标准的公寓列表。所以，如果用户对搜索标准及现有公寓总数觉得满意，就可以按下“显示结果”按钮，这会调用updateResults()
JavaScript方法:
<P class=a14>function updateResults() {
<P class=a14>DWRUtil.removeAllRows("apartmentsbody");
<P class=a14>var bedrooms = document.getElementById("bedrooms").value;
<P class=a14>var bathrooms = document.getElementById("bathrooms").value;
<P class=a14>var price = document.getElementById("price").value;
<P class=a14>ApartmentDAO.findApartments(fillTable, bedrooms, bathrooms,
price);
<P class=a14>$("resultTable").style.display = '';
<P class=a14>}
<P class=a14>function fillTable(apartment) {
<P class=a14>DWRUtil.addRows("apartmentsbody", apartment, [ getId,
getAddress, getBedrooms, getBathrooms, getPrice ]);
<P class=a14>}
<P
class=a14>updateResults()方法清空了表中用来存放搜索结果的区域，从用户界面获得所有的必要参数，再把这些参数传递到由DWR创建的ApartmentDAO
JavaScript对象。然后执行数据库查询，并且调用回调函数fillTable()，然后解析DWR返回的对象，最后把它们打印到页面上。
<P class=a14>安全问题
<P
class=a14>为了保持示例简洁，ApartmentDAO类就要尽可能保持简单，但这种类通常拥有处理数据的一套方法，譬如insert()、update()和delete()。DWR把所有公共方法发布给调用HTML页面的任何函数。出于安全原因，用这样一种方法发布数据访问层方法并不明智。开发人员可以创建外观（facade），把负责调用的JavaScript函数和较低层的业务组件之间的通信集中起来，从而限制被发布的功能。（苗永、陈大虎）
<P class=a14>
<P
class=a14>DWR可以帮开发人员专注于如何改进应用程序的交互模型，省去了编写及调试JavaScript代码带来的负担。使用AJAX最值得关注的难题就是在何处提高易用性及如何提高。DWR可以处理网页和Java对象之间的通信，从而帮开发人员把注意力完全集中在如何让应用程序对用户更友好。
<P align=right>（计算机世界报 2006年08月07日 第30期 B33） </P></TD></TR></TBODY></TABLE><BR>
<TABLE cellSpacing=0 cellPadding=0 width=660 border=0>
<FORM name=newspageform1 action=http://comment.ccw.com.cn/reviewadd.asp
method=post>
<TBODY>
<TR bgColor=#edecea>
<TD width=10> </TD>
<TD height=30><SPAN class="t14 blue">发表评论</SPAN> <SPAN
class="t14 gray">您的姓名</SPAN> <INPUT style="WIDTH: 100px"
name=uname> <SPAN class="t14 gray">您的Email</SPAN> <INPUT
style="WIDTH: 100px" name=email> <A class="t14 blue "
onclick="return checknewspageform1();"
href="javascript:document.newspageform1.submit();">发布</A></TD>
<TD> </TD></TR>
<TR bgColor=#edecea>
<TD> </TD>
<TD height=24><TEXTAREA style="WIDTH: 600px; HEIGHT: 80px" name=content cols=101></TEXTAREA>
</TD>
<TD> </TD></TR>
<TR bgColor=#007ece>
<TD colSpan=3><IMG height=4 src="使用DWR简化AJAX_files/mhtCB(1).tmp"
width=1></TD></TR>
<SCRIPT language=JavaScript src="使用DWR简化AJAX_files/path.js">
</SCRIPT>
</FORM></TBODY></TABLE>
<TABLE align=center>
<TBODY>
<TR>
<TD colSpan=7>
<HR width=660 color=#f46240 SIZE=1>
</TD></TR>
<TR>
<TD align=middle colSpan=7><BR>周报全文频道联系方式：010-68130909</TD></TR>
<SCRIPT language=Javascript>
function AddBookMark(theTip)
{
theSite=window.location;
window.external.AddFavorite(theSite,theTip)
}
</SCRIPT>
<TR>
<TD align=middle><A href="http://www.ccw.com.cn/html/bottom/about.asp"
target=_blank>【关于我们】</A> <A
href="http://www.ccw.com.cn/html/bottom/serv1.asp"
target=_blank>【广告服务】</A> <A
href="http://www.ccw.com.cn/faxing/"
target=_blank>【周报发行】</A> <A
href="http://www.ccw.com.cn/html/bottom/contribute.asp"
target=_blank>【投稿指南】</A> <A
href="http://www.ccw.com.cn/html/survey/ccw/shengming.asp"
target=_blank>【投稿声明】</A> <A
href="http://www.ccw.com.cn/html/bottom/contact.asp"
target=_blank>【联系方式】</A> <A
href="http://www.ccw.com.cn/html/bottom/clause.asp"
target=_blank>【法律声明】</A><BR><!--<A href="/html/bottom/youqing.asp" target=_blank>【友情链接】</a>--> <A
href="http://www.ccw.com.cn/othermedia/ccw/2007/"
target=_blank>【媒体手册】</A> <A href="mailto:news@ccw.com.cn"
target=_blank>【编读往来】</A> </TD></TR>
<TR>
<TD align=middle colSpan=5>Copyright© ccw.com.cn,All rights reserved
</TD></TR>
<TR>
<TD align=middle
colSpan=7><B>中国计算机世界出版服务公司版权所有</B></TD></TR></TBODY></TABLE><SPAN
class=spanclass id=span_ad_home_roller_1>
<SCRIPT language=JavaScript1.1 src=""></SCRIPT>
</SPAN><SPAN class=spanclass id=span_ad_home_roller_2>
<SCRIPT language=JavaScript1.1 src=""></SCRIPT>
</SPAN><SPAN class=spanclass id=span_ad_home_roller_3>
<SCRIPT language=JavaScript1.1 src=""></SCRIPT>
</SPAN>
<SCRIPT language=javascript>
document.getElementById("ad_home_roller_1").innerHTML=document.getElementById("span_ad_home_roller_1").innerHTML;
document.getElementById("span_ad_home_roller_1").innerHTML="";
document.getElementById("ad_home_roller_2").innerHTML=document.getElementById("span_ad_home_roller_2").innerHTML;
document.getElementById("span_ad_home_roller_2").innerHTML="";
document.getElementById("ad_home_roller_3").innerHTML=document.getElementById("span_ad_home_roller_3").innerHTML;
document.getElementById("span_ad_home_roller_3").innerHTML="";
</SCRIPT>
<SCRIPT src="使用DWR简化AJAX_files/track.js" type=text/javascript></SCRIPT>
</CENTER></BODY></HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -