这部分将实际开发一个应用，今天是情人节，套用了一个老外的示例模板，做了一个在线礼品的简易版本。
先讲一下应用的结构
页面端：
demo.jsp用来展示界面
服务端：
DemoAction是Struts中的Action子类负责控制转换，
DemoFacade是业务类负责业务处理。
Goods是一个业务实体类
Struts部分的配置就忽略不说了，实际上这个应用并没有包含Struts的配置
主要讲一下dwr的配置，首先需要在web.xml增加下面的servelt映射：
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<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>
如上uk.ltd.getahead.dwr.DWRServlet是dwr的核心，用来处理javascript的对远程方法的调用，还有其他参数请参考相关文档。
然后，需要在dwr.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="/oblog312/dwr/interface/DemoAction.js"></script>
<script src="/oblog312/dwr/interface/DemoFacade.js"></script>
<script src="/oblog312/dwr/engine.js"></script>
<script src="/oblog312/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的开发。
资源
1、示例源程序：下载
2、dwr主站:http://getahead.ltd.uk/dwr
3、ajax主站:http://en.wikipedia.org/wiki/AJAX
|
posted on 2006-07-15 09:56
无声 阅读(4939)
评论(4) 编辑 收藏