DWR ajax 实际应用讲解

首先要增加相应的JAR包,这里我们需要的包并不多。
dwr.jar,commons-logging-1.0.4.jar,log4j-1.2.12.jar。注意我这里使用的版本是dwr-2.0.5。



其实要在web.xml中配置dwr。dwr控制器会拦截请求完成相应的处理。
01 <?xml version="1.0" encoding="UTF-8"?>
02 <web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"
03 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
04 xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
05 http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
06 <welcome-file-list>
07   <welcome-file>index.jsp</welcome-file>
08 </welcome-file-list>
09 <servlet>
10   <servlet-name>dwr-invoker</servlet-name>
11   <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
12   <init-param>
13    <param-name>debug</param-name>
14    <param-value>true</param-value>
15   </init-param>
16 </servlet>
17 <servlet-mapping>
18   <servlet-name>dwr-invoker</servlet-name>
19   <url-pattern>/dwr/*</url-pattern>
20 </servlet-mapping>
21 </web-app>



增加dwr配置文件dwr.xml,定义那些类来提供方法,已经在页面调用时会用到的名字。我这里的配置文件是包含了所有示例配置的文件。
01 <?xml version="1.0" encoding="UTF-8"?>
02 <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN"
03    "http://getahead.org/dwr/dwr20.dtd">
04 <dwr>
05 <allow>
06   <!--  -->
07   <create creator="new" javascript="noorder">
08    <param name="class" value="org.dwr.me.MeNoOrder" />
09   </create>
10   <!-- HAVER RETURN -->
11   <create creator="new" javascript="str">
12    <param name="class" value="org.dwr.re.BackStr" />
13   </create>
14   <create creator="new" javascript="arr">
15    <param name="class" value="org.dwr.re.BackArray" />
16   </create>
17   <create creator="new" javascript="douarr">
18    <param name="class" value="org.dwr.re.BackDoubleArray" />
19   </create>
20   <create creator="new" javascript="list">
21    <param name="class" value="org.dwr.re.BackList" />
22   </create>
23   <create creator="new" javascript="set">
24    <param name="class" value="org.dwr.re.BackSet" />
25   </create>
26   <create creator="new" javascript="map">
27    <param name="class" value="org.dwr.re.BackMap" />
28   </create>
29   <create creator="new" javascript="obj">
30    <param name="class" value="org.dwr.re.BackObj" />
31   </create>
32   <!-- 对象转换器 -->
33   <convert match="org.dwr.re.Users" converter="bean">
34    <param name="include" value="name,pass"></param>
35   </convert>
36 </allow>
37 </dwr>



下面是一个简单示例,传递参数接收返回值。以下是需要的类代码
01 package org.dwr.re;
02 /**
03 * 测试 接收参数返回字符串
04 * @author 崔素强
05 */
06 public class BackStr {
07 public String helloWord(String name){
08   return "Hello " + name + "!";
09 }
10 }



然后在dwr配置文件中定义这个类和名字,str将是将来在前台用到的名字。creator是new,我们也可以结合spring使用,这里就不再介绍。
1 <create creator="new" javascript="str">
2 <param name="class" value="org.dwr.re.BackStr" />
3 </create>



测试这个请求是否可用,访问 http://localhost:8800/dwr/dwr/index.html 里面包含所有可以使用的请求。点击一个进去,点击str,helloWord是可以用的方法,输入参数点击调用。
我们也可以在这个地方同时点击其他返回了java数据对象的测试,可以弹出返回的内容。



在jsp中应用展现效果
页面调用时要引用几个js文件,分别是
1 <script type='text/javascript' src='/dwr/dwr/util.js'></script>
2 <script type='text/javascript' src='/dwr/dwr/interface/str.js'></script>
3 <script type='text/javascript' src='/dwr/dwr/engine.js'></script>

str.js就是在配置文件中定义的名字。

看效果
01 <%@ page language="java" pageEncoding="UTF-8"%>
02 <%
03 String path = request.getContextPath();
04 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
05 %>
06 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
07 <html>
08   <head>
09     <base href="<%=basePath%>">   
10     <title>THE FIRST DWR TEST FOR STR</title>
11     <script type='text/javascript' src='/dwr/dwr/util.js'></script>
12     <script type='text/javascript' src='/dwr/dwr/interface/str.js'></script>
13     <script type='text/javascript' src='/dwr/dwr/engine.js'></script>
14     <script type="text/javascript">
15     function callback(){
16      var name=document.getElementById('name').value;
17      str.helloWord(name,function back(value){
18       alert(value);
19      });
20     }
21     </script>
22 <meta http-equiv="pragma" content="no-cache">
23 <meta http-equiv="cache-control" content="no-cache">
24 <meta http-equiv="expires" content="0">
25   </head> 
26   <body>
27     <input type="text" id="name" />
28     <input type="button" onclick="callback();" value="ClickMe" />
29   </body>
30 </html>

在实际应用中,我们代码中可能传递回去的是List,Map,数组,Set,也可能是多维数组,也可能是对象。对于除对象之外的应用,请参考工程里面的代码。



代码中后台直接返回Java中的各种数据对象,主要看一下前台如何解析即可。
关于返回对象,我们首先定义一个对象实体。在后台中直接返回这个对象。重点是我们要在dwr配置中增加一个对象转换器,具体配置内容是
01 package org.dwr.re;
02 /**
03 * 测试 实体对象
04 * @author 崔素强
05 */
06 public class Users {
07 private String name;
08 private String pass;
09 public String getName() {
10   return name;
11 }
12 public void setName(String name) {
13   this.name = name;
14 }
15 public String getPass() {
16   return pass;
17 }
18 public void setPass(String pass) {
19   this.pass = pass;
20 }
21 }

dwr.xml中转换器的配置
1 <!-- 对象转换器 -->
2 <convert match="org.dwr.re.Users" converter="bean">
3 <param name="include" value="name,pass"></param>
4 </convert>

然后在js中解析,其实js中也可以创建对象,按照解析js对象的方式解析返回的内容即可。
01 <script type="text/javascript">
02 function callback(){
03 //javascript中创建对象
04 //var users=new objFun($('name').value,$('pass').value);
05 var name=$('name').value;
06 var pass=$('pass').value;
07 //直接创建对象
08 var users={name:name,pass:pass};
09 obj.userLogin(users,function(data){
10   //解析javascript中的对象
11   $('name').value=data.name;
12   $('pass').value=data.pass;
13 });
14 }
15 //使用函数创建对象
16 function objFun(name,pass){
17 //javascript中对象赋值
18 this.name=name;
19 this.pass=pass;
20 }
21 </script>



另外如果在页面中定义了两个方法,那么调用有先后顺序吗?meNoOrder.jsp,MeNoOrder.java演示调用两个方法的顺序,只要在页面调用时指定是否顺序调用即可。
01 <script type="text/javascript">
02 function noorderme(){
03 // 方法调用无顺序,该属性设置按照方法顺序执行
04 dwr.engine.setAsync=false;
05 noorder.method1(
06   function(data){
07    alert(data);
08   }
09 );
10 noorder.method2(
11   function(data){
12    alert(data);
13   }
14 );
15 }
16 </script>



通过弹出窗口的顺序,我们可以判断是否是有序的。

你可能感兴趣的:(Ajax)