Dwr 学习笔记

Dwr

一、导入dwr.jar 

二、配置web.xml

<servlet>    <servlet-name>dwr-invoke</servlet-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-invoke</servlet-name>    <url-pattern>/dwr/*</url-pattern>   </servlet-mapping>

三、配置WebRoot/WEB-INF/dwr.xml

<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd"> <dwr> <allow>        <!--JS中用到的数据模型  --> <convert match="com.ytc.model.Product" converter="bean"></convert> <convert match="com.ytc.model.Category" converter="bean"></convert> <!--JS中用到的DAO类 --> <create javascript="Select" creator="new"> <param name="class">com.ytc.dao.Select</param> </create> </allow> </dwr>

四、JSP 中导入对应的 js

可以先通过 localhost/项目/drw  查看可以用的js

以下两个JS文件是必须导入的

<script type='text/javascript' src='/SCM/dwr/engine.js'></script> <script type='text/javascript' src='/SCM/dwr/util.js'></script>

在上面的页面中，点击对应的名称可以获得对应的js文档的访问路径

所以可以在JSP 页面中引入对应的js

<script type='text/javascript' src='/SCM/dwr/interface/Select.js'></script>

五、JavaScript 中的用法

5.1 HTML对象的获得、方法的调用和回调函数

HTML 对象可以直接通过 $(id值) 或者 $(“id的值”) 获得，效果等同于

document.getElementById(“id的值”)

如上例中，因为已经配置了Select 类，故可以在JS 中直接调用其中的方法，传入对应的参数，且必须有一个回调函数，用于获得返回值

function getPage(index){ var code=$("code").value; var name=$("name").value; var categoryCode=$("category").valDwr initCount(code,name,categoryCode); if(index<1) index=1; if(index>totalPage) index = totalPage; //dwr.engine.setAsync(false); 设置DWR单线程   Select.getProductDetail(code,name,categoryCode,index,step,productsCallBack); }

回调函数

//必须含有参数，用于获得返回值 function productsCallBack(data){ DWRUtil.removeAllRows("products"); DWRUtil.addRows("products",data,[ function(product){return product.productCode}, function(product){return product.name}, function(product){return product.unitName}, function(product){return product.categoryName}, function(product){return product.creatTime}, function(product){return product.price}, function(product){return product.remark}, "<a οnclick='update(this)'>修改 </a> <a οnclick='del(this)' >删除</a>" ], {escapeHtml:false} ); }

5.2 DWRUtil工具

5.2.1 修改Table

功能	语法
删除多行	DWRUtil.removeAllRows("表格的ID");
增加多行	DWRUtil.addRows(""表格的ID",data,[ function(返回值的类型){return 对象.属性}, function(product){return product.name}, function(product){return product.unitName}, function(product){return product.categoryName}, function(product){return product.creatTime}, function(product){return product.price}, function(product){return product.remark}, "一些HTML语句" ], {escapeHtml:false} );

5.2.2 修改Select

功能	语法
删除option	DWRUtil.
增加option	1.<同时指定value和innerHTML的值> DWRUtil.addOptions('select 的id',arr) ； 2.<依次指定value和innerHTML的值> DWRUtil.addOptions('selectPage',arr,arr)；

function categoryCallBack(data){ DWRUtil.addOptions('category',data,"categoryID","name"); DWRUtil.addOptions('category2',data,"categoryID","name"); }

DWRUtil.removeAllOptions('selProduct');