dwr demo

首先在项目WEB-INF/web.xml下添加dwr的servlet,把dwr.jar包放到classpath下

<servlet>
  <servlet-name>dwr-invoker</servlet-name>
  <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
<!--debug参数为true当启动项目访问http://localhost:8080/[YOUR-WEBAPP]/dwr/生成测试方法-->
  <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>

配置dwr.xml文件(配置一个后台被调用的类（多个方法）和一个自己的javabean convert)

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

<dwr> 
   <allow> 
   	  <!-- 
   	  	 creator属性是必须的，常用的值有new和static
   	  	 new :用new关键字创建服务器端（remote）java对象，这时java对象必须提供有一个无参构造函数
   	  	 static：用静态方法‘getInstance()’获得class实例

   	  	 javascript属性也是必须的，会根据java class在浏览器端生成js相应的对象，所以避免使用js关键字
   	  	 -simple demo
   	  	 <create javascript="jdate" creator="new">
	      	<param name="class" value="java.util.Date" />
	      </create>
	      如上配置，如果在客户端调用jdate.getDay(),则会在服务器端调用java.util.Date类的getDay()方法
   	   -->
      <create creator="new" javascript="firstDemo" scope="page"> 
      	 <!-- 
      	 param:class,指定要远程调用的java类全路径
      	 当creator为static时，可以配置param：instanceMethodName指定获取实例的方法（default是‘getInstance’）
      	    	  -->
         <param name="class" value="com.cao.dwr.FirstDemo" />
         <include  method="sayHello,getUser,addUser,arrayInfo,intArrayInfo,list" />
      </create> 

      <!-- 
      	convert元素是dwr的主要工作部分，负责client和server的数据转换
      	1.当java方法调用结束时，需要将java了的return type映射成客户端JavaScript
可以接受的对象
      	2.当客户端发出请求时，需要将JavaScript的参数类型转换成对应的java类型参数

      	dwr对于大多数类型（primitives,string,simple objects）都已经内置好了，
你不需要在用<convert>进行配置，
      	在默认情况下就可以使用，具体配置在dwr.jar包的org.directwebremoting/dwr.xml配置文件中，内容如下

      	基本类型
      	    <convert converter="primitive" match="boolean"/>
		    <convert converter="primitive" match="byte"/>
		    <convert converter="primitive" match="short"/>
		    <convert converter="primitive" match="int"/>
		    <convert converter="primitive" match="long"/>
		    <convert converter="primitive" match="float"/>
		    <convert converter="primitive" match="double"/>
		    <convert converter="primitive" match="char"/>
		简单类
			<convert converter="primitive" match="java.lang.Boolean"/>
		    <convert converter="primitive" match="java.lang.Byte"/>
		    <convert converter="primitive" match="java.lang.Short"/>
		    <convert converter="primitive" match="java.lang.Integer"/>
		    ......
	    常用类
	     	<convert converter="string" match="java.lang.String"/>
		    <convert converter="date" match="java.util.Date"/>
		    <convert converter="date" match="java.sql.Date"/>
		    <convert converter="date" match="java.sql.Time"/>
		    <convert converter="date" match="java.sql.Timestamp"/>
		    <convert converter="date" match="java.util.Calendar"/>
		    <convert converter="url" match="java.net.URL"/>
	    数组(看不懂)
		    <convert converter="array" match="[Z"/>
		    <convert converter="array" match="[B"/>
		    <convert converter="array" match="[S"/>
		    ......
		集合
			<convert converter="collection" match="java.util.Collection"/>
	    	<convert converter="map" match="java.util.Map"/>
	   dom（应该不常用）
		   <convert converter="dom" match="org.w3c.dom.Node"/>
		    <convert converter="dom" match="org.w3c.dom.Element"/>
		   ......
		servlet(这些servlet对象，客户端js是访问不到的，但是在服务端java
类方法中存在如下类型的参数，
		         同样可以获取servlet对象，js不用传递该参数)
		    <convert converter="servlet" match="javax.servlet.ServletConfig"/>
		    <convert converter="servlet" match="javax.servlet.ServletContext"/>
		    <convert converter="servlet" match="javax.servlet.http.HttpServletRequest"/>
		    <convert converter="servlet" match="javax.servlet.http.HttpServletResponse"/>
		    <convert converter="servlet" match="javax.servlet.http.HttpSession"/>

		    很多类型转换器都已经存在了，我们配置转换器的时候一般是
在转换我们自己写的bean的时候，经常用到。
		    match属性指定需要转换的类，converter指定转换器类型，javascript属性在客户端对应的js对象

		    配置转换器就是为了对传递的参数进行转换，如在client端生成一个js对象
		    var x = new userBean();x.uname='xx';x.age=20;
		    把x当做参数传递，到后台就会封装成com.cao.dwr.UserBean的
一个实例对象
       -->
      <convert match="com.cao.dwr.UserBean" converter="bean" javascript="userBean">
      	<!-- include可以调用的bean方法 -->
      	<param name="include" value="uname,age"></param><!-- exclude -->
      </convert>

   </allow>
</dwr> 

后台被调用的类

public class FirstDemo {
	public String sayHello(String name){
		System.out.println("first dwr invoke");
		return "Hello,"+name;
	}
	//模拟根据id查询内容，返回一个java bean对应到页面为一个js对象
	public UserBean getUser(String id){
		System.out.println("用户id:"+id);
		UserBean user = new UserBean();
		user.setUname("bird");
		user.setAge(22);
		user.setBirth(new Date());

		return user;
	}
	//从页面获取一个对象bean信息
	public String addUser(UserBean usr){
		String usrInfo = usr.getUname()+" "+usr.getAge()+" "+usr.getBirth();
		System.out.println(usrInfo);
		return "add success";
	}
	//获取StringArray参数
	public String[] arrayInfo(String[] arr){
		for(int i=0;i<arr.length;i++){
			System.out.println(arr[i]);
		}
		return arr;
	}
	//获取intArray参数，并返回该int[]转换成js的数组
	public int[] intArrayInfo(int[] arr){
		for(int i=0;i<arr.length;i++){
			System.out.println(arr[i]);
		}
		return arr;
	}
	//获取集合参数，指定泛型位一个bean，再返回js的数组
	public List<UserBean> list(List<UserBean> list){
		for(int i=0;i<list.size();i++){
			//System.out.println(((UserBean)list.get(i)).getAge());
			System.out.println(list.get(i).getUname());
		}
		return list;
	}

}

测试页面（hello.jsp）

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">

    <title>My JSP 'hello.jsp' starting page</title>

    <!-- engine.js和util.js一般都引入，可以通过访问
    	http://localhost:8080/[YOUR-WEBAPP]/dwr/获取
     -->
	<script type='text/javascript' src='/Test/dwr/engine.js'></script>
	<script type='text/javascript' src='/Test/dwr/util.js'></script>
	<!-- fistDemo.js是对应后台类的一个js，在dwr.xml中配置 -->
	<script type='text/javascript' src='/Test/dwr/interface/firstDemo.js'></script>
	<!-- 引入jquery操作方便 -->
	<script type='text/javascript' src='/Test/js/jquery-1.3.2.js'></script>
	<script type="text/javascript">
		function sayHello(){
			var name= $("#name").val();
			//调用后台的对应类的sayHello方法，参数为输入的
			firstDemo.sayHello(name,function(data){
				alert(data);
			})
		}

		$(function(){
			$("#checkUser").click(function(){
				var uid = $("#uid").val();
				firstDemo.getUser(uid,function(data){
					//返回的对象为一个js对象，因为convert中配置javascript=“user”可以用该对象接受
					var user = data;
					alert(user.age);
				})
			})
		})

		$(function(){
			$("#addUser").bind("click",function(){
				var usr = new userBean();
				usr.uname="bird";
				usr.age="23";
				usr.birth = new Date();
				//传递一个js对象根据配置的bean convert会被转换成对应的javabean
				firstDemo.addUser(usr,function(data){
					alert(data);
				})
			})
		})

		$(document).ready(function(){
			$("#strArr").click(function(){
				var myArr = ['hello','world'];//传递数组
				firstDemo.arrayInfo(myArr,function(data){
					for(var i=0;i<data.length;i++){
						alert(data[i]);
					}
				})
			})
		})

		$(document).ready(function(){
			$("#intArr").click(function(){
				var myArr = [1,2];
				firstDemo.intArrayInfo(myArr,function(data){
					for(var i=0;i<data.length;i++){
						alert(data[i]);
					}
				})
			})
		})

		$(document).ready(function(){
			$("#list").click(function(){
				var u1 = new userBean();
				u1.uname='one';
				u1.age=20;
				//用来测试集合，因为对应的js没有集合类型，用数组代替
				var myArr = [u1,{uname:'two',age:20}];
				firstDemo.list(myArr,function(data){
					for(var i=0;i<data.length;i++){
						alert(data[i].uname);
					}
				})
			})
		})


	</script>
  </head>

  <body>
  	<form action="">
  		用户名：<input type="text" name="name" id="name">
		<button onclick="sayHello()" >say hello </button>
		<hr>
		<p>获取用户信息</p>
		用户id:<input type="text" id="uid" name="uid" /><button id="checkUser">查询用户信息</button>
		<br><hr>
		<button id="addUser">添加用户</button>
		<button id="strArr">字符串数组</button>
		<button id="intArr">整型数组</button>
		<button id="list">list集合</button>
		<div id="domContainor"></div>
  	</form>
  </body>
</html>