3. 简化开发流程

常用Ajax框架

Prototype

一个纯粹的JavaScript函数库，对Ajax提供良好支持

jQuery

1．非常优秀的JavaScript库，对Ajax提供了良好的支持

2．与Prototype设计思想不同的是在使用jQuery之后，开发者操作的不再是DOM对象而是jQuery对象

DWR

1.        非常专业的Java Ajax框架

2.        通过DWR框架，可将Java类的方法直接暴露给客户端

Dojo

①　Dojo功能强大，包含许多内容，Ajax只是其中之一

②　特点在于控件和控件系统

③　目前Dojo仍然在开发完善中，版本更新速度非常快

AjaxTags

由一系列JSP标签组成，将常用的Ajax应用场景封装为简单的标签

使用DWR框架简化Ajax开发

1. DWR（Direct Web Remoting）是一个Java Ajax框架
2. DWR框架允许开发人员在客户端通过JavaScript代码调用服务器端的Java方法
3. DWR框架主要由两部分组成：
1．客户端JavaScript代码直接调用服务器端Java方法
2．服务器上运行的DWR核心Servlet负责处理客户端请求，将客户端请求委托到实际的Java对象进行处理，并将结果返回给客户端

下载DWR框架

DWR的官方站点：
http://directwebremoting.org/dwr/downloads/index.html
各下载项说明：
1. JAR File：该选项仅下载dwr.jar文件
2. WAR File：该选项下载dwr.jar文件及其其他依赖的类库，还包括DWR的使用范例
3. Sources：该选项下载DWR的源文件

安装DWR

1．添加dwr.jar文件到WEB-INF/lib目录下
2．修改web.xml文件，添加如下代码

	<servlet>
		<servlet-name>dwr_invoker</servlet-name>
		<servlet-class>
  	 		 org.directwebremoting.servlet.DwrServlet
		</servlet-class>
    	<init-param><!--初始化参数，debug开发时设置-->
       	 <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>

<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
	"http://getahead.org/dwr/dwr30.dtd">
<dwr>
	<allow>
		<!-- 创建脚本对象 -->
		<create creator="..." javascript="..." scope="...">
			<!-- 要发布的类名 -->
			<param name="..." value=http://www.mamicode.com/"..." />>dwr.xml详解 （参考dwr.xml）

<allow>元素：定义了DWR能够创建和转换的类，是dwr.xml中最重要的元素
<create>元素：创建器定义如何将一个Java类转换成JavaScript对象
<convert >元素：类型转换器，用于定义Java类型和JavaScript类型之间的对应关系
 
<create>元素的属性：
creator属性：DWR内置多个创建器用于处理多种类型Java类
javascript属性：在客户端给创建的JavaScript对象命名。该名字将在页面里作为js被导入
scope属性：作用域。选项可以是：application, session,request和page。默认为page
<create>元素的子元素：
<param>元素：用来指定创建器的参数。其中name属性用来指定参数名称，value指定参数的值
<include>元素：定义允许访问的方法列表，其他方法将不暴露给客户端
<exclude>元素：定义不允许访问的方法列表，其中method属性指定不被暴露给客户端的方法（其他没指定的方法默认暴露给客户端）
 
<convert>元素
所有基本类型，boolean、 int 、double等等
包装类，Boolean、Integer等等
java.lang.String
日期类型，如：java.util.Date 和 java.sql.Times、java.sql.Timestamp等
数组(存放以上类型的)
集合类型 (List、Set、Map、Iterator等等)
Bean转换器
用于完成JavaBean对象和JavaScript对象之间的转换
 DWR默认关闭Bean转换器
如果需要进行JavaBean对象和JavaScript对象之间的转换，需要在dwr.xml中显式设置
 <convert converter="bean"match="www.dwrdemo.DwrBean"/>
为Web工程添加DWR支持，例子：
创建web Project ：DWRDemo
加入DWR jar包 ；
(要加入commons-logging.jar)
修改web.xml文件：加servlet
	<servlet>
		<servlet-name>dwr_invoker</servlet-name>
		<servlet-class>
  	 		 org.directwebremoting.servlet.DwrServlet
		</servlet-class>
    	<init-param><!--初始化参数，debug开发时设置-->
       	 <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文件 （参考
dwr30.dtd：/org/directwebremoting/dwr30.dtd
和dwr.xml：/org/directwebremoting/dwr.xml
写）
 
与web.xml文件位于同一目录（可以放在src下，但是需要要在web.xml配置的
       Servlet里面加
      <init-param>
         <param-name>config</param-name>
         <param-value>/WEB-INF/classes/dwr.xml</param-value>
   </init-param>     
初始化的时候，会调用源码里面的对应方法
）
<?xml version="1.0" encoding="UTF-8"?>
 <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
	"http://getahead.org/dwr/dwr30.dtd">
<dwr>
	<allow>
		<!-- 创建脚本对象 -->
		<create creator="new" javascript="DwrDemoDate" scope="application" >
			<!-- 要发布的类名 -->
			<param name="class" value=http://www.mamicode.com/"java.util.Date" />>
 部署，访问：http://localhost:8080/DWRDemo/dwr 

 
Bean转换器
用于完成JavaBean对象和JavaScript对象之间的转换
 DWR默认关闭Bean转换器
如果需要进行JavaBean对象和JavaScript对象之间的转换，需要在dwr.xml中显式设置
 <convert converter="bean"match="www.dwrdemo.DwrBean"/>
下面举例：
例子 使用Bean转换器
新建DwrService 在com包下，添加下面方法：
public DwrBean getDwrBean(){
return new DwrBean();
}
DwrBean在com包下 添加私有属性message和它get set方法；


Dwr.xml配置：在<allow>里面添加：
<create creator="new" javascript="DwrService" scope="application">
<!-- 要发布的类名 -->
<param name="class" value=http://www.mamicode.com/"com.DwrService" />
</create>
<convert converter="bean" match="com.DwrBean" />
重启访问 http://localhost:8080/DWRDemo/dwr 点击第二个

例子：使用DWR实现页面加载时输出当前的时间等
DWR 如何简化Ajax 开发
http://localhost:8080/DWRDemo/dwr/test/DwrDemoDate前面两行script导入index，编写js
index.jsp：
  </head>
  <!-- 导入DWR的JavaScript文件--> 
  <script type='text/javascript' src=http://www.mamicode.com/'/DWRDemo/dwr/engine.js'></script>>
 重启tomcat访问主页；http://localhost:8080/DWRDemo/
点击show，下面显示出当前时间；
例子：在页面输出客户端输入的信息 
在DwrService添加方法：


public DwrBean getDwrBean(String message) {
DwrBean db = new DwrBean();
db.setMessage(message);
return db;
}

将public DwrBean getDwrBean()注释；
在Index.jsp添加
http://localhost:8080/DWRDemo/dwr/test/DwrService前面script
<script type=‘text/javascript‘ src=http://www.mamicode.com/‘/DWRDemo/dwr/interface/DwrService.js‘></script>
 在js和body里面加入：
 
  	function getMessage(){
  		var msg=document.getElementById("myMsg").value; 
  		 DwrService.getDwrBean(msg,showMsg);
  	}
 	function showMsg(bean){
  		document.getElementById("message").innerHTML = bean.message;
  	}

  <body>
  <input id="myMsg">
   
   <input id="" type="button" onclick="getMessage()" value=http://www.mamicode.com/" showMsg" />> 重启tomcat，访问主页，输入文字，点击showMsg使用的是ajax技术；
我们可以在DwrService里面的方法getDwrBean添加：
System.out.println(message);
重启运行的时候，可以看到控制台输出 我们输入的信息，意味着我们可以访问数据库等操作；
使用DWR框架可以异步访问服务端对象

脚本文件说明：
engine.js
1．engine.js对DWR非常重要，它是DWR客户端的核心，用来把动态生成的JavaScript对象转换为服务器上的Java对象
该函数库可用于设置一些DWR的全局属性
     dwr.engine.setTimeout(time)，以毫秒为单位设置请求超时的时间
      dwr.engine.setHttpMethod(method)，该方法只能设置两个值POST和GET
      dwr.engine.setOrdered(boolean)，Ajax通常都是异步调用，但服务器响应的顺序与调用顺序往往不同，使用dwr.engine.setOrfered(true)语句，DWR将保证请求的顺序与服务器响应的顺序一致
2．util.js
1.        util.js文件中包含了一些工具函数，通过这些函数的帮助，将简化JavaScript操作
2.        util.js提供一些基本的页面操作函数，通过这些函数可以方便的操作HTML元素
3.        util.js文件与DWR框架关系不是特别大，可以在任何不同的网页中使用（即便该工程没有DWR支持）
补充说明:
 $( )函数
$( )函数根据指定ID查找页面中的HTML元素
简单的讲下面两个一样的意思：
$(ID)= document.getElementById(ID)
使用 $() 使代码更简洁、更清晰
在index.jsp导入：
       <script type=‘text/javascript‘ src=http://www.mamicode.com/‘/DWRDemo/dwr/util.js‘></script>
在js里面添加：
//$( )函数
      function test(){
          var msg=$(‘message‘).innerHTML;
          alert(msg);
      }
body添加；
 <input id="test1"type="button"onclick="test()"value="使用$( )函数"/>
刷新页面，要先在myMsg框输入信息，在点击showMsg，id为message才有内容，才可以做上面的实验，然后点击使用$( )函数
 
getValue() 和setValue()函数 
getValue()函数和setValue()函数用于简化访问和修改HTML元素的值
dwr.util.getValue(id)：返回HTML元素的值
dwr.util.setVlaue(id，value [,options])：根据第一个参数中指定的id找到相应元素，并根据第二个参数value改变该元素的值
在index.jsp导入：
       <scripttype=‘text/javascript‘ src=http://www.mamicode.com/‘/DWRDemo/dwr/util.js‘></script>
在js添加：
      //getValue() 和setValue()函数
      function set(){
         var value=http://www.mamicode.com/dwr.util.getValue(‘set‘);
         dwr.util.setValue(‘myMsg‘,value);
      }
 在body添加：
<input id="set"type="button"onclick="set()"value="getValue()得到的值"/>
刷新页面，点击getValue()得到的值后将信息显示到id为myMsg的输入框上；
 
列表操作函数
dwr.util.removeAllOption(id)：用于删除列表中的所有项
dwr.util.addOptions()：用于添加列表项
 
 
 
表格操作函数
DWR提供两个函数帮助我们操作表格
dwr.util.removeAllRows(id)：删除table中所有行
dwr.util.addRows(id,array,cellFuncs,[options])：向表中添加数据行
 
源码和所用到的jar包下载：
http://pan.baidu.com/s/1i3p9pYX