dwr 之 前后台参数传递（囊括全面、综合）

注：
1，本博客实例，浏览器用firefox且装firbug插件。
2. 转载请注明出处。

下面是实例：
第一：dwr配置文件

<?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> 标签中包括可以暴露给 javascript 访问的东西。 <create> 标签中指定 javascript 中可以访问的 
		java 类，并定义 DWR 应当如何获得要进行远程的类的实例。 creator="new" 属性指定 java 类实例的生成方式， new 意味着 
		DWR 应当调用类的默认构造函数来获得实例，其他的还有 spring 方式，通过与 IOC 容器 Spring 进行集成来获得实例等等。 avascript代码访问对象时使用的名称。 
		<param> 标签指定要公开给 javascript 的 java 类名。 <include> 标签指定要公开给 javascript 的方法。 
		1，不指定的话就公开所有方法。 2， 如果配置了include，而没有包含前台 访问的方法则会前台js或报TypeError: Demo.sayHello 
		is not a function <exclude> 标签指定要防止被访问的方法。 -->
	<allow>
		<create creator="new" javascript="Demo">
			<param name="class" value="com.lhq.Demo" />
			<include method="justCall" />
			<include method="sayHello" />
			<include method="returnUser" />
			<include method="receivUserReturnUser" />
			<include method="returnListObject" />
			<include method="returnListPerson" />
			<include method="reviceAndReturnListPerson" />
		</create>
		<!-- <creator> 标签负责公开用于 Web 远程的类和类的方法， <convertor> 标签则负责这些方法的参数和返回类型。 convert 
			元素的作用是告诉 DWR 在服务器端 Java 对象表示和序列化的 JavaScript 之间如何转换数据类型。 DWR 自动地在 Java 和 
			JavaScript 表示之间调整简单数据类型。这些类型包括 Java 原生类型和它们各自的封装类表示， 还有 String 、 Date 、数组和集合类型。 
			DWR 也能把 JavaBean 转换成 JavaScript 表示，但是出于安全性的原因， 要求显式的配置， <convertor> 标签就是完成此功能的。 
			1, converter="bean" 属性指定转换的方式采用 JavaBean 命名规范 2, match=""com.dwr.TestBean" 
			属性指定要转换的 javabean 名称 3, <param> 标签指定要转换的 JavaBean 属性。 -->
		<convert converter="bean" match="com.lhq.Person">
			<param name="include" value="name,email,age,birthday"></param>
		</convert>
	</allow>
</dwr>  

第二：dwr后台处理类

package com.lhq;
import java.util.ArrayList;
import java.util.List;
public class Demo {
	  /**
	   * <只供前台调用>
	   * <没有参数，没有返回值>
	   * @author 陈超阳 
	   */
	  public void justCall()
	  {
		  System.out.println("hello ,chenchaoyang!");
	  }

	   /**
	    * <有参数有返回的dwr调用>
	    * @param name:接受前台传递的简单参数
	    * @return String 返回给前台的值
	    * @author 陈超阳
	    */
	   public String sayHello(String name) {   
	      return "Hello, " + name;   
	   } 

	   /**
	    * <有返回bean的dwr调用>
	    * @return person 返回给前台Person對象
	    * @author 陈超阳
	    */
	   public Person returnUser() { 
		  Person person = new Person();
		  person.setName("chenchaoyang");
		  person.setAge(27);
		  person.setEmail("chenchaoyang2013@163.com");
		  person.setBirthday("1987-02-13");
	      return person;
	   } 

	   /**
	    * <有参数bean,有返回bean的dwr调用>
	    * @param person:从前台传递过来的bean对象
	    * @return person 返回给前台Person對象
	    * @author 陈超阳
	    */
	   public Person receivUserReturnUser(Person personFromJsp) { 
		  Person person = new Person();
		  person.setName(personFromJsp.getName());
		  person.setAge(personFromJsp.getAge());
		  person.setEmail(personFromJsp.getEmail());
	      return person;
	   }  

	   /**
	    * <返回list元素是Object>
	    * @return List<Object> 返回给前台List對象
	    * @author 陈超阳
	    */
	   public List<Object> returnListObject() { 
		  List<Object>  list = new ArrayList<Object>();
		  list.add(1);
		  list.add("1");
		  list.add('1');
		  list.add(1L);
	      return list;
	   }

	   /**
	    * <返回list元素是Person>
	    * @return List<Person> 返回给前台List對象
	    * @author 陈超阳
	    */
	   public List<Person> returnListPerson() { 
		  List<Person>  list = new ArrayList<Person>();
		  Person chenchaoyang = new Person();
		  Person chenziyang = new Person();

		  chenchaoyang.setName("chenchaoyang");
		  chenchaoyang.setAge(26);
		  chenchaoyang.setEmail("chenchaoyang2013@163.com");
		  chenchaoyang.setBirthday("1987-02-13");

		  chenziyang.setName("chenziyang");
		  chenziyang.setAge(32);
		  chenziyang.setEmail("chenziyang2013@163.com");
		  chenziyang.setBirthday("1973-08-23");

		  list.add(chenchaoyang);
		  list.add(chenziyang);
	      return list;
	   } 

	   /**
	    * <返回list元素是Person>
	    * @return List<Person> 返回给前台List對象
	    * @param personList:从前台传递过来的person集合
	    * @author 陈超阳
	    */
	   public List<Person> reviceAndReturnListPerson(List<Person> personList) { 
		   List<Person> resultPersonList = new ArrayList<Person>();
		   for(Person person : personList)
		   {
			   resultPersonList.add(person);
		   }
	      return resultPersonList;
	   } 
}  

第三：后台实体Bean

package com.lhq;
import java.util.Date;
public class Person {
	String name;
	String email;
	int age;
	String birthday;
	public String getName() {
		return name;
	}
	public void setName(String name) {
		this.name = name;
	}
	public String getEmail() {
		return email;
	}
	public void setEmail(String email) {
		this.email = email;
	}
	public int getAge() {
		return age;
	}
	public void setAge(int age) {
		this.age = age;
	}
	public String getBirthday() {
		return birthday;
	}
	public void setBirthday(String birthday) {
		this.birthday = birthday;
	}
}

第四：前台访问jsp页面

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
<title>Text Demo</title>   
		<script src='dwr/engine.js'></script>   
		<script type='text/javascript' src='dwr/util.js'></script>  
		<script src='dwr/interface/Demo.js'></script>   
<script>   
   var allname;  
   //仅仅调用后台的java方法，没有参数，没有返回值
   function justCall()
   {
	   Demo.justCall();
   }

   /**
   *向后台传递一个Stirng类型的参数，返回一个String类型的值
   *特别注意：如有返回值，必须设置回调函数来接受这个返回来的数值
   *下面的实例是用匿名函数来充当回调函数。
   */
   function hello()   
   {   
      var name = dwr.util.getValue("demoName");  
      Demo.sayHello(name, function(data)   
       {   
           dwr.util.setValue("demoReply", data);   
           allname=data;  
       });   
   } 

   /**
    *向后台传递一个Stirng类型的参数，返回一个String类型的值
    *特别注意：如有返回值，必须设置回调函数来接受这个返回来的数值
    *下面的实例是用真正函数来充当回调函数。
    */
    function hello2()   
    {   
       var name = dwr.util.getValue("demoName2");  
       //注意调用回调函数的方式，只写一个回调函数的名字即可
       Demo.sayHello(name,callBackForHello2);   
    }
    //注意回调函数需要一个接受返回来的数据的data参数
    function callBackForHello2(data)
    {
        dwr.util.setValue("demoReply2", data);   
        allname=data;  
    }

    /*
    *获取从服务器上返回的Bean
    */
    function getBean()
    {
    	Demo.returnUser(callBackForGetBean);
    }
    //回调函数，两种获得返回来对象的属性
    function callBackForGetBean(data)
    {
      console.log(data);
      // 不知道属性名称时，使用如下方法
      for(var property in data)
      {
    	  console.log("property:" + property + " value is:" + data[property]);
      }
      //知道名称名称时，使用如下方法
      console.log(data.name);
      console.log(data.email);
      console.log(data.age);
      console.log(data.birthday);
    }
	/*
	输出如下：（ff浏览器上）
	 *property:age value is:27
	demo.jsp (第 64 行)
	property:birthday value is:Wed Apr 16 2014 22:04:02 GMT+0800
	demo.jsp (第 64 行)
	property:email value is:chenchaoyang2013@163.com
	demo.jsp (第 64 行)
	property:name value is:chenchaoyang
	demo.jsp (第 64 行)
	chenchaoyang
	demo.jsp (第 67 行)
	chenchaoyang2013@163.com
	demo.jsp (第 68 行)
	27
	demo.jsp (第 69 行)
	Date {Wed Apr 16 2014 22:04:02 GMT+0800}
	 */

	 //发送bean，接受bean
	 function sendBeanAndReciveBean()
	 {
		 var person = {name:"chenchaoyang",age:27,email:"chenchaoyang2013@163.com"};
		 Demo.receivUserReturnUser(person,callBackForSendBeanAndReciveBean);
	 }
	 function callBackForSendBeanAndReciveBean(data)
	 {
	      //知道名称名称时，使用如下方法
	      console.log(data.name);
	      console.log(data.email);
	      console.log(data.age);
	      console.log(data.birthday);
	 }

	 //接受List<object>
	 function getListObject()
	 {
		 Demo.returnListObject(callBackGetListObject);
	 }
	 function callBackGetListObject(data)
	 {
		 console.log(data);
	 }

	 //接受List<Person>
	 function getListPerson()
	 {
		 Demo.returnListPerson(callBackGetListPerson);
	 }
	 function callBackGetListPerson(data)
	 {
		 //知道属性名的情况下遍历方法(注意：此时data是js中Object的数组)
		 for(var i = 0; i < data.length; i++)
	     {
			 console.log(data[i].name);
			 console.log(data[i].email);
			 console.log(data[i].age);
			 console.log(data[i].birthday);
	     }
		 console.log("**************");
		 //不知道属性名称的这样写
		 for(var i = 0; i < data.length; i++)
		 {
			 for(var property in data[i])
			 {
  			   console.log(data[i][property]);
			 }
		 }
	 }

	 //传递Person集合，返回Person集合，本功能是本博客的终极功能
	 function reviceAndReturnListPerson()
	 {
		 //组建js的person集合，其实就是一个Object的数组
		 var personList = [{name:"chenchaoyang",age:26,email:"chenchaoyang2013@163.com",birthday:"1987-02-13"},
		                   {name:"chenziyang",age:32,email:"chenziyang@qq.com",birthday:"1952-2-3"}];
		 Demo.reviceAndReturnListPerson(personList,callBackReviceAndReturnListPerson);
	 }
	 function callBackReviceAndReturnListPerson(data)
	 {
		 console.log(data);
		 //不知道person属性名称的情况下，按下面的代码走：
		 for(var i = 0; i < data.length; i++)
		 {
			 for(var property in data[i])
			 {
				 console.log(data[i][property]);
			 }
		 }
		 console.log("*******************************");
		//知道person属性名称的情况下，按下面的代码走：
		for(var i = 0; i < data.length; i++)
		{
			console.log(data[i].name);
			console.log(data[i].email);
			console.log(data[i].age);
			console.log(data[i].birthday);
		}
	 }

</script>   
  </head>   
  <body>   
  <input value="只调用" type="button" onclick="justCall()"/><br> 

  <p> Name: <input type="text" id="demoName"/>   
            <input value="Send" type="button" onclick="hello()"/>  
             <br/>   
      Reply: <span id="demoReply"></span>   
  </p> 

  <p> Name: <input type="text" id="demoName2"/>   
            <input value="Send" type="button" onclick="hello2()"/>  
             <br/>   
      Reply: <span id="demoReply2"></span>   
  </p> 
  <input value="调用服务器返回Bean" type="button" onclick="getBean()"/><br> 
  <input value="发送Bean接受Bean" type="button" onclick="sendBeanAndReciveBean()"/><br> 
  <input value="获取服务器上的List<Object>" type="button" onclick="getListObject()"/><br>
  <input value="获取服务器上的List<Object>" type="button" onclick="getListPerson()"/><br> 
  <input value="发送List<Person>接受List<Object>" type="button" onclick="reviceAndReturnListPerson()"/><br>       
  </body>   
  </html>