这部分将实际开发一个应用,套用了一个老外的示例模板,做了一个在线礼品的简易版本。
先讲一下应用的结构
页面端:
demo.jsp用来展示界面
服务端:
DemoAction是Struts中的Action子类负责控制转换,
DemoFacade是业务类负责业务处理。
Goods是一个业务实体类
Struts部分的配置就忽略不说了,实际上这个应用并没有包含Struts的配置
主要讲一下dwr的配置,首先需要在web.xml增加下面的servelt映射:
xml 代码
- <servlet>
- <description>Direct Web Remoter Servlet</description>
- <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
- </servlet>
- <servlet-mapping>
- <servlet-name>dwr-invoker</servlet-name>
- <url-pattern>/dwr/*</url-pattern>
- </servlet-mapping>
如上uk.ltd.getahead.dwr.DWRServlet是dwr的核心,用来处理javascript的对远程方法的调用,还有其他参数请参考相关文档。
然后,需要在dwr.xml配置相应的远程方法(与具体需要在客户端调用的方法相关),如下为演示应用的配置:
xml 代码
- <dwr>
- <allow>
- <convert converter="bean" match="dwr.demo.Goods"/>
- <create creator="new" javascript="DemoAction" class="dwr.demo.DemoAction">
- <include method="query4dwr"/>
- <include method="copy4dwr"/>
- <include method="paste4dwr"/>
- </create>
- <create creator="new" javascript="DemoFacade" class="dwr.demo.DemoFacade">
- <include method="queryList"/>
- <include method="restore"/>
- <include method="del"/>
- </create>
- </allow>
- </dwr>
如上有一个转换器(converter)是用来映射dwr.demo.Goods为bean类型,其他转换器类型请参考相关文档;还有两个创建器分别创建 javascript中的DemoAction类和DemoFacade类,分别对应dwr.demo.DemoAction类和 dwr.demo.DemoFacade,其中定义的方法就可以从javascript中直接调用了。
最后,我们需要在页面中包含相应的javascript:
<script src="http://www.zhmy.com/dwr/interface/DemoAction.js"></script>
<script src="http://www.zhmy.com/dwr/interface/DemoFacade.js"></script>
<script src="http://www.zhmy.com/dwr/engine.js"></script>
<script src="http://www.zhmy.com/dwr/util.js"></script>
如上,dwr/interface/DemoAction.js和dwr/interface/DemoFacade.js是dwr自动生成的 javascript文件,包含相应的类及方法,dwr/engine.js是dwr的核心引擎脚本处理客户端调用的转换,dwr/util.js包含了工具函数简化页面处理。
下面以查询为例,看一下dwr的具体使用:
DemoAction:
public List query4dwr(int type, boolean needClear, HttpServletRequest request) {
if (needClear) request.getSession().removeAttribute("dwr.demo.goodsId");
return demoFacade.queryList(type);
}
demo.jsp:
function updateResults() {
DWRUtil.removeAllRows("goodsbody");
var type = document.getElementById("type").value;
DemoAction.query4dwr(type, true, fillTable);
}
function fillTable(goods) {
document.forms[0].select.checked = false;
document.getElementById("totalRecords").innerHTML = goods.length;
DWRUtil.addRows("goodsbody", goods, [ addCheckbox, getName, getPrice, getCount]);
}
如上,DemoAction.query4dwr(type, true, fillTable)就可以直接调用DemoAction的方法了,这里fillTable是函数,dwr通过回调函数的方式来进行后续处理。比较一下 javascript和action中的方法参数,HttpServletRequest是可以不传的,dwr会自动加上,另一个就是回调参数放在最后,这是比较好的方式,其他方式请参考文档。
最后看一下,dwr如何与Struts集成,如下代码:
public ActionForward query(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) throws Exception {
String type = request.getParameter("type");
//或者从form中取值
List goodsList = query4dwr(Integer.parseInt(type), true, request);
request.setAttribute("goodsList", goodsList);
return mapping.findForward("success");
}
public List query4dwr(int type, boolean needClear, HttpServletRequest request) {
if (needClear) request.getSession().removeAttribute("dwr.demo.goodsId");
return demoFacade.queryList(type);
}
前一个方法是Struts的方式,但dwr不支持,因此要重构一下在下面的方法才可以被dwr调用。
实际上,只有在方法中需要使用到HttpServletRequest是才需要重构方法,如果不使用HttpServletRequest,我们就可以直接调用业务层的类的方法,这样即简单又方便,如下:
demo.jsp:
function restore() {
DemoFacade.restore(updateResults);
}
DemoAction:
public synchronized void restore() {
goodsList.clear();
initGoods();
}
小结
dwr封装了ajax中与服务端交互的模块,通过直接调用服务端类的方法简化了客户端与服务端的交互。虽然说还缺省类似tag这样的组件,但已经很大程度简化了ajax的开发。
资源
dwr主站:http://getahead.ltd.uk/dwr
ajax主站:http://en.wikipedia.org/wiki/AJAX
分享到:
相关推荐
DWR示例 博文链接:https://ReturnOfKing.iteye.com/blog/249737
NULL 博文链接:https://lee20101029.iteye.com/blog/960569
可以快速构建JSP列表页面.<br><br><br>主要功能:<br>1、SSH框架一键配置<br>2、JSP列表标签导入及JSP页面列表快速生成(内置两套开源标签)<br>3、AJAX框架两套EXT2及DWR框架快速导入<br>4、HTML在线编辑器一键导入...
可以快速构建JSP列表页面.<br><br><br>主要功能:<br>1、SSH框架一键配置<br>2、JSP列表标签导入及JSP页面列表快速生成(内置两套开源标签)<br>3、AJAX框架两套EXT2及DWR框架快速导入<br>4、HTML在线编辑器一键导入...
1、 导入dwr.jar包 2、 在web.xml中配置dwr,如下: <!-- 配置DWR --> <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class> org.... <url-pattern>/dwr/*</url-pattern>
DWR进阶 63<br/>8.1 DWR Annotations 63<br/>8.1.1 初始配置 63<br/>8.1.2 远程访问类 63<br/>8.1.3 对象转换 64<br/>8.2 错误和异常处理 64<br/>8.2.1 错误处理 64<br/>8.2.2 异常 65<br/>8.2.3 找出更多的信息 65...
完全由Spring接管DWR AJAX处理(不需要配置dwr.xml)等技术点<br>源码在/mytest/WEB-INF/src下<br>Winxp sp3+JDK1.6+Tomcat 6.0下运行通过<br>因文件长度限制,未加入相关类库,请自行加入,需要的类库有:<br>dom.jar...
<servlet-name>dwr-invoker</servlet-name> <servlet-class> org.directwebremoting.servlet.DwrServlet </servlet-class> <init-param> <param-name>debug</param-name> <param-value>true</...
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://www.getahead.ltd.uk/dwr/dwr30.dtd"> <dwr> <allow> ... </dwr>
<br><br>在grid的演示部分,包括了分页的数据调用和如何处理来自于dwr的数据(dwr的部分和官方网站公布的方法一样) <br>以及grid的事件处理。 <br><br>实例的源代码中没有包括jar包,如果需要运行,请根据jar.jpg所...
内容包括:<br>DWR教程.txt<br>DWR实例教程.txt<br>DWR学习.txt<br>DWR应用总结.txt<br>DWR购物车实例<br>DWR与界面开发<br>一个简单的例子<br>DWR 入门与应用-林信良(良葛格).doc
spring-hibernate-dwr做的AJAX操作CRUD实例<br>环境:myeclipse6.0+jdk1.6<br>所需lib列表,请自行加入<br>mysql-connector-java-3.1.7-bin.jar<br>antlr-2.7.6rc1.jar<br>asm-attrs.jar<br>cglib-2.1.3.jar<br>...
<br>功能:使用dwr完成在客户端无刷新的分页排序等<br><br>工具:MyEclipse 6.0,数据库SQLSERVER 2000<br><br>数据在SQL文件夹下,Jobs是pubs数据库自带的<br><br>主要的三个页面,emp是详细的,另两个是简单的复制修改,...
DWR.xml配置文件说明书.doc<br>DWR笔记.doc<br>DWR技术分析.doc<br>DWR开发培训.ppt<br>DWR学习.doc<br>WEB界面开发规范.doc<br>树控件.rar
<dwr> <allow> <create creator="new" javascript="testClass" > <include method="testMethod1"/> </create> </allow> </dwr> <allow>标签中包括可以暴露给javascript访问的东西。 <create>标签中...
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" ... <param name="class" value="com.dwr.bean.Hello" /> </create> </allow> </dwr>
dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架dwr 框架
dwr-1.1.3.jar及dwr.xml.<br/>dwr-1.1.3与dwr-2.0的dwr.xml略有区别:<br/>dwr-1.1.3<br/><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" ...
<dwr> <init> <creator id="..." class="..."/> <converter id="..." class="..."/> </init> <allow> <create creator="..." javascript="..." scope="..."> <param name="..." value="..."/> </create> <convert ...