接触DWR

本文介绍如何利用Direct Web Remoting (DWR) 框架简化Ajax开发过程,通过配置web.xml及dwr.xml实现从后端获取数据并填充到前端Select组件中,同时分享了具体的配置步骤和JavaScript代码示例。
需求很简单,就是用js向后端请求,然后把请求的结果弄进一个select里面。一开始是用xmlrequest去请求后端一个groovy的url,得到一个xml,然后把xml的内容填进select里面去。做完老瞅着不顺眼,正好在看ajax的资料,拿dwr改造一下。

js是我一直很头疼的事了,尤其是对dom的操作上面,dwr感觉就是在直接调java接口,操作java对象,省事省心啊。

用dwr,先得在web.xml中配一下。

1 <servlet>
2 <servlet-name>dwr-invoker</servlet-name>
3 <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
4 <init-param>
5 <param-name>debug</param-name>
6 <param-value>true</param-value>
7 </init-param>
8 </servlet>
9 <servlet-mapping>
10 <servlet-name>dwr-invoker</servlet-name>
11 <url-pattern>/dwr/*</url-pattern>
12 </servlet-mapping>
13
然后就是配dwr.xml文件了。
dwr和spring贴得比较紧,不用折腾,直接让dwr去调spring中定义的bean了。
1<?xml version="1.0" encoding="UTF-8"?>
2<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd" >
3<dwr>
4 <allow>
5 <create javascript="ServerManager" creator="spring">
6 <param name="beanName">ServerManager</param>
7 </create>
8 </allow>
9</dwr>
10我的project中,已经在web.xml中配了spring的listener,直接写beanName就行。

在ServerManager接口中定义了如下方法
List<Server> loadAll(User manager, ServerStatus status, String order);
因此,在dwr中定义了三个convert(一开始没配,结果怎么调都不成功)。

1 <convert converter="bean" match="com.yninfo.sa.domain.Server" />
2 <convert converter="bean" match="com.yninfo.sa.domain.ServerStatus" />
3 <convert converter="bean" match="com.yninfo.sa.domain.User" />

loadAll方法中的manager参数,是用户登录成功后,session.setAttribute("user",user)存放的。在html里面,用js是无法读到的,因此,自己定义了一个java bean。
1public class Remote {
2 public User getUser(HttpSession session) {
3 return (User) session.getAttribute("user");
4 }
5}
6
同样的,在dwr中配了一下
1 <create javascript="Remote" creator="new">
2 <param name="class" value="com.yninfo.sa.web.ajax.Remote" />
3 </create>

所有配置完成后,js代码如下:
1<script type='text/javascript' src='dwr/interface/Remote.js'></script>
2<script type='text/javascript' src='dwr/interface/ServerManager.js'></script>
3<script type='text/javascript' src='dwr/engine.js'></script>
4<script type='text/javascript' src='dwr/util.js'></script>
5<script>
6 function init(){
7 Remote.getUser(
8 function(user){
9 ServerManager.loadAll(user,null,null,load);
10 });
11 }
12 function load(data){
13 for (var i=0; i<data.length; i++) {
14 document.DailyRecordAdd.elements["model.serverId"].options[i]=
15 new Option(data[i].name,data[i].id);
16 }
17 }
18 window.onload = function (){
19 init();
20 }
21</script>

最终的配置文件:
1<?xml version="1.0" encoding="UTF-8"?>
2<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd" >
3<dwr>
4 <allow>
5 <create javascript="ServerManager" creator="spring">
6 <param name="beanName">ServerManager</param>
7 <include method="add" />
8 <include method="findByPrimaryKey" />
9 <include method="loadAll" />
10 </create>
11 <create javascript="Remote" creator="new">
12 <param name="class" value="com.yninfo.sa.web.ajax.Remote" />
13 </create>
14 <convert converter="bean" match="com.yninfo.sa.domain.User" />
15 <convert converter="bean" match="com.yninfo.sa.domain.Server" />
16 <convert converter="bean" match="com.yninfo.sa.domain.ServerStatus" />
17 </allow>
18</dwr>
19
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值