DWR

一、DWR快速使用

1、下载 dwr.jar。附件里面的是2.0.10版本的。放到WEB-INF/lib目录里面

2.  下载Commons Logging.  放到WEB-INF/lib目录里面

3、添加dwr的servlet的配置信息

<servlet>
  <display-name>DWR Servlet</display-name>
  <servlet-name>dwr-invoker</servlet-name>  
  <servlet-class>org.directwebremoting.servlet.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>

 4、创建一个dwr配置文件

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd">

<dwr>

  <allow>
    <create creator="new" javascript="hellodwr">
      <param name="class" value="com.bjsxt.dwr.HelloDwr"/>
    </create>
    <create creator="new" javascript="hellodwr123">
      <param name="class" value="com.bjsxt.dwr.HelloDwr"/><!--js调用的java类-->
    </create>
        <convert converter="bean" match="com.bjsxt.po.User"/><!--po类的配置转换 -->
 	<convert converter="bean" match="com.bjsxt.po.Dept"/>
  </allow>

</dwr>

 5、登录dwr的测试页面

http://localhost:8080/[YOUR-WEBAPP-CONTEXT]/dwr/

 

二、java调用dwr

dwr调用的java类源码

1.调用hello

hellodwr.hello(function(rs){
	alert(rs)
})//传入的参数是回调函数，rs是java函数的返回值

 2、调用add函数

hellodwr.add(123,345,function(rs){
	alert(rs)
})//前两个参数是add函数需要的参数，后面一个是回调函数

 3、调用updateUser函数

var u = {uname:"zs",age:89,dept:{id:18,dname:"test"}};//参数是javabean，则需要传递一个json格式的对象，并且注意配置convert
hellodwr.updateUser(u);
  	hellodwr.findOneUser(123,function(u	){
	alert(u.uname)
})

 4、调用findOneUser123

var us = [{uname:"zs1111",age:89,dept:{id:18,dname:"test"}},{uname:"zs222",age:22,dept:{id:28,dname:"test123"}}];
  	hellodwr.findOneUser123(us,function(rs){
	alert(rs);//注意返回值是一个json的数组
})

 

5、dwr异常处理

hellodwr.hello({
  	callback:function(data) { //正常的处理逻辑
		alert(data)
  	},
  	errorHandler:function(es, exp) {//异常的处理函数
  			alert("Error message is: " + es + " - Error Details: " +  dwr.util.toDescriptiveString(exp, 1));//1表示打印1层堆栈信息
	  				}
  	})

 

 三、dwr.util

1、使用dwr.util动态生成下拉列表

dwr.util.removeAllOptions("seid");//移除前一次产生的元素

dwr.util.addOptions("seid",[{id:"0011",uname:"请选择"}],"id","uname");//生成选择的选项

var us = [{id:1,uname:"zs1111",age:89,dept:{id:18,dname:"test"}},
{id:2,uname:"zs222",age:22,dept:{id:28,dname:"test123"}}];

hellodwr.findOneUser123(us,function(rs){
	console.debug(rs);
//画出添加option 第一个参数是下拉列表的id，第二个参数是数据，第三个参数是用什么作value，第四个参数是用什么做name
	dwr.util.addOptions("seid",rs,"id","uname");
｝)

 

2、是用dwr.util动态生成table

 

var cellFuncs = [
			  function(data) { return data.id; },//第一列的数据
			  function(data) { return data.uname; },
			  function(data) { return data.dept.dname; },
			  function(data) {
			    return "<input type='button' value='Test' onclick='alert("+data.id+");'/>";
			  }
			];
			//table的数据
  	  		var us = [{id:1,uname:"zs1111",age:89,dept:{id:18,dname:"test"}},{id:2,uname:"zs222",age:22,dept:{id:28,dname:"test123"}}];
  			hellodwr.findOneUser123(us,function(rs){
		        console.debug(rs);
		        //移除表格的所有元素
		        dwr.util.removeAllRows('demo1');
		        //参数1表示table的id，参数2表示数据，参数3表示数据选择函数，参数4表示是否现实html的样式
		  	  	dwr.util.addRows( "demo1",rs,cellFuncs,{ escapeHtml:false })
	  		})

 

四、反向ajax