Ajax框架,DWR介绍，应用，样例
使用Ajax框架
1. 简化JavaScript的开发难度
2. 解决浏览器的兼容性问题
3. 简化开发流程
经常使用Ajax框架
Prototype
一个纯粹的JavaScript函数库，对Ajax提供良好支持
jQuery
1．很优秀的JavaScript库，对Ajax提供了良好的支持
2．与Prototype设计思想不同的是在使用jQuery之后，开发人员操作的不再是DOM对象而是jQuery对象
DWR
1. 很专业的Java Ajax框架
2. 通过DWR框架，可将Java类的方法直接暴露给client
Dojo
① Dojo功能强大，包括很多内容，Ajax仅仅是当中之中的一个
② 特点在于控件和控件系统
③ 眼下Dojo仍然在开发完好中，版本号更新速度很快
AjaxTags
由一系列JSP标签组成，将经常使用的Ajax应用场景封装为简单的标签
使用DWR框架简化Ajax开发
1. DWR（Direct Web Remoting）是一个Java Ajax框架
2. DWR框架同意开发者在client通过JavaScript代码调用server端的Java方法
3. DWR框架主要由两部分组成：
1．clientJavaScript代码直接调用server端Java方法
2．server上执行的DWR核心Servlet负责处理client请求，将client请求托付到实际的Java对象进行处理，并将结果返回给client
下载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>
3 创建dwr.xml文件
1. 与web.xml文件位于同一文件夹
2. 该文件用于定义Java类和JavaScript之间的相应关系，将Java类的方法暴露给client
其结构例如以下：
<?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="..." /> <!-- 暴露给client的，要公布的方法名 --> <include method="…" /> <!-- 不暴露给client的 --> <exclude method="…" /> </create> <!-- js和服务端的对象进行转换 --> <convert converter="..." match="..." /> </allow> </dwr>
dwr.xml具体解释 （參考dwr.xml）
<allow>元素：定义了DWR可以创建和转换的类，是dwr.xml中最重要的元素
<create>元素：创建器定义怎样将一个Java类转换成JavaScript对象
<convert >元素：类型转换器，用于定义Java类型和JavaScript类型之间的相应关系
<create>元素的属性：
creator属性：DWR内置多个创建器用于处理多种类型Java类
javascript属性：在client给创建的JavaScript对象命名。该名字将在页面里作为js被导入
scope属性：作用域。选项能够是：application, session,request和page。默觉得page
<create>元素的子元素：
<param>元素：用来指定创建器的參数。当中name属性用来指定參数名称，value指定參数的值
<include>元素：定义同意訪问的方法列表，其它方法将不暴露给client
<exclude>元素：定义不同意訪问的方法列表，当中method属性指定不被暴露给client的方法（其它没指定的方法默认暴露给client）
<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”/>
为Webproject加入DWR支持，样例：
增加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="java.util.Date" /> </create> </allow> </dwr>
部署，訪问：http://localhost:8080/DWRDemo/dwr
Bean转换器
用于完毕JavaBean对象和JavaScript对象之间的转换
DWR默认关闭Bean转换器
假设须要进行JavaBean对象和JavaScript对象之间的转换，须要在dwr.xml中显式设置
<convert converter=”bean”match=”www.dwrdemo.DwrBean”/>
以下举例：
样例 使用Bean转换器
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=”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=\'/DWRDemo/dwr/engine.js\'></script>
<!-- 导入DWR为Java对象动态生成的JavaScript文件-->
<script type=\'text/javascript\' src=\'/DWRDemo/dwr/interface/DwrDemoDate.js\'></script>
<script type="text/javascript">
function init(){
//调用Date对象的toString（）方法，load为回调函数
DwrDemoDate.toString(load);
}
function load(data){
document.getElementById("time").innerHTML = data;
}
</script>
<body>
<input id="" type="button" onclick="init()" value="show" />
<dir id="time"></dir>
</body>
重新启动tomcat訪问主页；http://localhost:8080/DWRDemo/
点击show，以下显示出当前时间；
样例：在页面输出client输入的信息
public DwrBean getDwrBean(String message) {
DwrBean db = new DwrBean();
db.setMessage(message);
return db;
}
在Index.jsp加入
http://localhost:8080/DWRDemo/dwr/test/DwrService前面script
<script type=\’text/javascript\’ src=\’/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=" showMsg" />
<dir id="message"></dir>
</body>
重新启动tomcat，訪问主页，输入文字，点击showMsg使用的是ajax技术；
我们能够在DwrService里面的方法getDwrBean加入：
System.out.println(message);
重新启动执行的时候，能够看到控制台输出 我们输入的信息，意味着我们能够訪问数据库等操作；
使用DWR框架能够异步訪问服务端对象
脚本文件说明：
engine.js
1．engine.js对DWR很重要，它是DWRclient的核心，用来把动态生成的JavaScript对象转换为server上的Java对象
该函数库可用于设置一些DWR的全局属性
dwr.engine.setTimeout(time)，以毫秒为单位设置请求超时的时间
dwr.engine.setHttpMethod(method)，该方法仅仅能设置两个值POST和GET
dwr.engine.setOrdered(boolean)，Ajax通常都是异步调用，但server响应的顺序与调用顺序往往不同，使用dwr.engine.setOrfered(true)语句，DWR将保证请求的顺序与server响应的顺序一致
2．util.js
1. util.js文件里包括了一些工具函数，通过这些函数的帮助，将简化JavaScript操作
2. util.js提供一些主要的页面操作函数，通过这些函数能够方便的操作HTML元素
3. util.js文件与DWR框架关系不是特别大，能够在不论什么不同的网页中使用（即便该project没有DWR支持）
补充说明:
$( )函数依据指定ID查找页面中的HTML元素
简单的讲以下两个一样的意思：
$(ID)= document.getElementById(ID)
使用 $() 使代码更简洁、更清晰
在index.jsp导入：
<script type=\’text/javascript\’ src=\’/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=\’/DWRDemo/dwr/util.js\’></script>
在js加入：
//getValue() 和setValue()函数
function set(){
var value=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包下载：