[原创]实践总结ajax各种使用方式(上)
[原创]实践总结ajax各种使用方式(中)
4、使用DWR进行ajax开发
介绍：
DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).它的最新版本DWR0.6添加许多特性如:支持Dom Trees的自动配置,支持Spring(JavaScript远程调用spring bean),更好浏览器支持,还支持一个可选的commons-logging日记操作官方，本文版本是DWR2.0 ,具体详情请访问
DWR官方网站。
4.1、业务需求
通过一个简单的二级菜单来说明DWR的使用
4.2、业务实现
前台页面：
1
一级菜单:
2 <select id="tct" onchange="findSub2()">
3 <option>
4 0001
5 </option>
6 <option>
7 0002
8 </option>
9 </select>
10 二级菜单:
11 <select name="subCode" id="subName"></select>
12
13
js脚本：
1 <script src="${ctx}/dwr/interface/ExamDictionaryManager.js"></script>
2 <script type="text/javascript">
3
function findSub2()
{
4
ExamDictionaryManager.findSubNameList(dwr.util.getValue("tct"),function(obj){
5
dwr.util.removeAllOptions("subCode");
6dwr.util.addOptions("subCode",obj,'subCode','subName');
7
});
8
}
9</script>
上面引用的${ctx}/dwr/interface/ExamDictionaryManager.js是后台操作的业务类，在这需要声明
findSub2()方法是触发一级菜单的值传到后台业务方法进行处理并返回
dwr.util.removeAllOptions("subCode");是把二级菜单subCode值先清空
dwr.util.addOptions("subCode",obj,'subCode','subName');是把二级菜单名称是subCode的以subCode为value，subName为text
提示：DWR2.0与DWR1.1的区别,是传入参数和回调函数顺序不同
DWR2.0:
红色字体是表明是参数在前，回调函数在后
1ExamDictionaryManager.findSubNameList(dwr.util.getValue("tct"),function(obj){
2dwr.util.removeAllOptions("subCode");
3dwr.util.addOptions("subCode",obj,'subCode','subName');
4});
5
DWR1.1:
红色字体表明是回调函数在前，参数在后
1ExamDictionaryManager.findSubNameList(function(obj){
2dwr.util.removeAllOptions("subCode");
3dwr.util.addOptions("subCode",obj,'subCode','subName');
4},dwr.util.getValue("tct"));
5}
dwr.xml文件
1<?xml version="1.0" encoding="UTF-8"?>
2<!DOCTYPE dwr PUBLIC
3 "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
4 "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
5
6<dwr>
7
8 <create creator="spring" javascript="ExamDictionaryManager">
9 <param name="beanName" value="examDictionaryManager"/>
10 </create>
11</dwr>
spring配置文件
<bean id="examDictionaryManager"
class="com.gresoft.sanitation.service.examapply.ExamDictionaryManager" />
web.xml配置
1<!-- DWR servlet,生产环境应该Debug为false -->
2 <servlet>
3 <servlet-name>dwr-invoker</servlet-name>
4 <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
5 <init-param>
6 <param-name>debug</param-name>
7 <param-value>true</param-value>
8 </init-param>
9 <load-on-startup>1</load-on-startup>
10 </servlet>
11
12 <servlet-mapping>
13 <servlet-name>dwr-invoker</servlet-name>
14 <url-pattern>/dwr/*</url-pattern>
15 </servlet-mapping>
业务方法：
1public List findSubNameList(String typeCode) {
2
3 String hql = "select distinct new map(d.subCode as subCode,d.subName as subName) from ExamDictionary as d "
4 + "where d.typeCode =:typeCode";
5 return createQuery(hql).setString("typeCode", typeCode).list();
6 }
7
通过前台js脚本传入的参数返回查询的数据集合
页面显示效果：
至此，二级级联菜单功能已经完成，通过上述例子，可以发现DWR框架为我们处理我们之前用XML或JSON进行数据转换
的功能，大大提高了开发者开发效率。
参考文章 掌握Ajax系列 Ajax和XML:五种Ajax反模式 Ajax和XML:五种常见Ajax模式 征服 Ajax 应用程序的安全威胁