JAVA平台的AJAX 框架DWR使用

DWR现在已经在java平台的AJAX应用中使用比较广泛，下面将以前项目中用到的部分内容(测试部分)贴出来，以供参考。

配置使用什么的就不多说了，在网上搜一下就很多，非常简单。

只简单的说一下流程，然后直接把文件中的内容贴出来。具体的使用也可以参考dwr的网站：http://directwebremoting.org/dwr

1.首先在web.xml中配置dwr，以便在项目中使用

2.编写java应用，并在dwr.xml中配置(我的dwr.xml在web-info下)。

3.在jsp文件中调用

例如：

TestDwr.java中有一个方法 public String test2(); 如果想在jsp页面中通过ajax方式调用步骤如下：

在dwr.xml中将方法公布出来

1. <!-- 测试,调用方法  -->
2.         <create javascript="testdwr" creator="new">
3.             <param name="class" value="com.yinbo.umpay.test.TestDwr" />
4.             <include method="test1" />
5.             <include method="test2" />
6.             <include method="test3" />
7.             <include method="test4" />
8.             <include method="test5" />
9.             <include method="test6" />
10.             <include method="test7" />
11.             <include method="test8" />
12.             <include method="test9" />
13.         </create>

javascript="testdwr"是指会生成testdwr.js的文件供前台调用。 value="com.yinbo.umpay.test.TestDwr" 是指方法所在的类，creator="new"是构造方法，这里使用new对象的方法，也可以通过spring来管理。这里注意即使用在TestDwr.java中是public方法，也要在配置文件中发布出来才可以访问。

在jsp中调用如下：

先要引入

<script src='<c:url value="/dwr/engine.js"/>' ></script>
  <script src='<c:url value="/dwr/util.js"/>' ></script>

这两个js是支持库，必须引入。然后就是引入

<script src='<c:url value="/dwr/interface/testdwr.js"/>'></script>

这个testdwr.js是dwr动态生成的，你不用去寻找它放在哪儿。

jsp中的调用

function callTestMethod2(){
      testdwr.test2(callBackFortestMethod2);
}

function callBackFortestMethod2(data){
     // 其中 date 接收方法的返回值
     // 可以在这里对返回值进行处理和显示等等
 alert("the return value is " + data);
}

 

  <input type="button" οnclick="callTestMethod2();"
   value="调用有简单返回值的java方法">
  

这里的调用使用testdwr这个对象引用方法。testdwr.test2(callBackFortestMethod2);  返回值会传入callBackFortestMethod2方法的参数中。

 

web.xml

1. <!-- dwr -->
2.     <servlet>
3.         <servlet-name>dwr-invoker</servlet-name>
4.         <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
5.         <init-param>
6.             <param-name>debug</param-name>
7.             <param-value>true</param-value>
8.         </init-param>
9.     </servlet>
10.     <servlet-mapping>
11.         <servlet-name>dwr-invoker</servlet-name>
12.         <url-pattern>/dwr/*</url-pattern>
13.     </servlet-mapping>

 

dwr.xml

1. <?xml version="1.0" encoding="UTF-8"?>
2. <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.ltd.uk/dwr/dwr20.dtd">
4. <dwr>
5.     <allow>
7.         <!-- umpay dwr methods -->
8.         <create javascript="dwrFactory" creator="spring">
9.             <param name="beanName" value="DwrFactoryImpl" />
10.             <include method="testMethod" />
11.             <include method="getRoleList" />
12.             <include method="checkDetealPwd"/>
13.             <include method="sendSelectBank"/>
14.             <include method="checkBankaccountId"/>
15.             <include method="checkBankinterfaceId"/>
16.             <include method="getAccountList"/>
17.             <include method="checkUsername"/>
18.             <include method="checkwwwsite"/>    
19.             <include method="checkAppIllegal"/>
20.         </create>
22.         <!-- javabean返回值及参数转换 -->
23.         <convert converter="bean"
24.             match="com.yinbo.umpay.core.po.Roleinfo">
25.             <param name="include" value="roleid,rolename" />
26.         </convert>
30.         <!-- 测试,调用方法  -->
31.         <create javascript="testdwr" creator="new">
32.             <param name="class" value="com.yinbo.umpay.test.TestDwr" />
33.             <include method="test1" />
34.             <include method="test2" />
35.             <include method="test3" />
36.             <include method="test4" />
37.             <include method="test5" />
38.             <include method="test6" />
39.             <include method="test7" />
40.             <include method="test8" />
41.             <include method="test9" />
42.         </create>
43.         
44.         <!-- javabean返回值及参数转换 -->
45.         <convert converter="bean" match="com.yinbo.umpay.core.po.Userinfo">
46.             <param name="include" value="userid,username" />
47.         </convert>
48.         
49.         <!-- spring生成   -->
50.         <create javascript="testdwr2" creator="spring">
51.             <param name="beanName" value="TestDwrImpl" />
52.             <include method="test2" />
53.         </create>
54.     </allow>
55.     <!-- List,Set,Map作参数时，声明包含的确切类 -->
56.     <signatures>
57.         <![CDATA[ 
58.             import java.util.List; 
59.             import com.yinbo.umpay.test.TestDwr;
60.             import com.yinbo.umpay.core.po.Userinfo; 
61.             TestDwr.test7(List<Userinfo>); 
62.             TestDwr.test9(Map<String, Userinfo>); 
63.         ]]>
64.     </signatures>
66. </dwr>

 

TestDwr.java

1. package com.yinbo.umpay.test;
3. import java.util.ArrayList;
4. import java.util.HashMap;
5. import java.util.List;
6. import java.util.Map;
8. import com.yinbo.umpay.core.po.*;
10. public class TestDwr {
12.     public void test1() {
13.         try {
14.             Thread.sleep(5000);
15.         } catch (InterruptedException e) {
16.             // TODO Auto-generated catch block
17.             e.printStackTrace();
18.         }
19.         System.out.println("dwr test1.");
20.     }
21.     
22.     public String test2() {
23.         return "dwr test2.";
24.     }
25.     
26.     public String test3(String data, String data2) {
27.         System.out.println(data);
28.         System.out.println(data2);
29.         return data + " return " + data2;
30.         
31.     }
33.     public Userinfo test4() {
34.         Userinfo u = new Userinfo();
35.         u.setUserid("sec.peng");
36.         u.setUsername("peng yuan feng");
37.         return u;
38.     }
39.     
40.     public void test5(Userinfo userinfo) {
41.         System.out.println(userinfo.getUserid());
42.         System.out.println(userinfo.getUsername());
43.     }
44.     
45.     public List test6() {
46.         Userinfo u1 = new Userinfo();
47.         Userinfo u2 = new Userinfo();
48.         u1.setUserid("sec.peng");
49.         u1.setUsername("peng yuan feng");
50.         u2.setUserid("www");
51.         u2.setUsername("www.163.com");
52.         List list = new ArrayList();
53.         list.add(u1);
54.         list.add(u2);
55.         return list;
56.     }
57.     
58.     public void test7(List list) {
59.         for(int i=0; i<list.size(); i++) {
60.             Userinfo userinfo = (Userinfo)list.get(i);
61.             System.out.println(userinfo.getUserid());
62.             System.out.println(userinfo.getUsername());
63.         }
64.     }
65.     
66.     public Map test8() {
67.         Map map = new HashMap();
68.         Userinfo u = new Userinfo();
69.         u.setUserid("aaa");
70.         u.setUsername("bbbbbb");
71.         map.put("u1",u);
72.         return map;
73.     }
74.     
75.     public void test9(Map map) {
76.             Userinfo userinfo = (Userinfo)map.get("u1");
77.             System.out.println(userinfo.getUserid());
78.             System.out.println(userinfo.getUsername());
79.     }
80.     
81.     
82. }

 

testdwr.jsp

1. <%@ page language="java" pageEncoding="UTF-8"%>
3. <html>
4.     <head>
5.         <title>test dwr</title>
6.         <script src='<c:url value="/dwr/interface/testdwr.js"/>'></script>
7.         <script src='<c:url value="/dwr/interface/testdwr2.js" />'></script>
8.         <script src='<c:url value="/dwr/interface/dwrFactory.js"/>' ></script>
9.         <script src='<c:url value="/dwr/engine.js"/>' ></script>
10.         <script src='<c:url value="/dwr/util.js"/>' ></script>
11.         <script>
13. function callTestMethod1(){
14.       testdwr.test1(); 
15. } 
18. function callTestMethod2(){ 
19.       testdwr.test2(callBackFortestMethod2); 
20. } 
21. function callBackFortestMethod2(data){ 
22.      // 其中 date 接收方法的返回值 
23.      // 可以在这里对返回值进行处理和显示等等 
24.     alert("the return value is " + data); 
25. } 
27. function callTestMethod3(){ 
28.       // 定义要传到 java 方法中的参数 
29.       var data; 
30.       // 构造参数 
31.       data = "test String"; 
32.       testdwr.test3(data, "bbb", callBackTestMethod3); 
33. } 
34. function callBackTestMethod3(data){ 
35. alert(data);
36. }
38. function callTestMethod4(){ 
39.       testdwr.test4(callBackFortestMethod4); 
40. } 
41. function callBackFortestMethod4(data){ 
42.      // 其中 data 接收方法的返回值 
43. // 对于 JavaBean 返回值，有两种方式处理 
44.              // 不知道属性名称时，使用如下方法 
45.             /*
46.            for(var property in data){ 
47.               alert("property:"+property); 
48.               alert(property+":"+data[property]); 
49.            } 
50.            */
51. // 知道属性名称时，使用如下方法
52.            alert(data.userid); 
53.            alert(data.username); 
54. } 
56. function callTestMethod5(){ 
57.                  // 定义要传到 java 方法中的参数 
58.       var data; 
59.       // 构造参数， date 实际上是一个 object 
60.       data = { userid: "ppp", username:"pengyf" } 
61.       testdwr.test5(data); 
62. } 
64. function callTestMethod6(){ 
65.       testdwr.test6(callBackFortestMethod6); 
66. } 
67. function callBackFortestMethod6(data){ 
68.      // 其中 date 接收方法的返回值 
69.         
70.         DWRUtil.addRows('addRowsBasic', data, [
71. function(data) { return data.userid; },
72. function(data) { return data.username; }
73. ]);
74.     
75.                   if (data != null && typeof data == 'object') alert(dwr.util.toDescriptiveString(data, 2));
76.       else dwr.util.setValue('d5', dwr.util.toDescriptiveString(data, 1));
77.       
78.             // 知道属性名称时，使用如下方法 
79.             for(var i=0;i<data.length;i++){ 
80.                            alert(data[i].userid); 
81.                            alert(data[i].username); 
82.             } 
83.     
85.         
86. }
89. function callTestMethod7(){ 
90. // 定义要传到 java 方法中的参数 
91.       var data; 
92.       // 构造参数， date 实际上是一个 object 数组，即数组的每个元素均为 object 
93. data = [ 
94.                       { 
95.                          userid:"u1",
96.                          username:"user1" 
97.                       }, 
98.                       { 
99.                          userid:"u2",
100.                          username:"user2" 
101.                       } 
102.                   ]; 
103.       testdwr.test7(data); 
104. } 
107. function callTestMethod8(){ 
108.       testdwr.test8(callBackFortestMethod8); 
109. } 
110. function callBackFortestMethod8(data){ 
111.      // 其中 date 接收方法的返回值 
112.             
113.                   if (data != null && typeof data == 'object') alert(dwr.util.toDescriptiveString(data, 2));
114.       else dwr.util.setValue('d5', dwr.util.toDescriptiveString(data, 1));
115.       
116.             // 知道属性名称时，使用如下方法 
117.          for(var property in data){ 
118.                   var bean = data[property]; 
119.                   alert(bean.userid); 
120.                   alert(bean.username); 
121.               }  
122. } 
125. function callTestMethod9(){ 
126. // 定义要传到 java 方法中的参数 
127.       var data; 
128.       // 构造参数， date 实际上是一个 object 数组，即数组的每个元素均为 object 
129.     data = { 
130.                          "u1":{ 
131.                              userid:"uu1",
132.                              username:"user1" 
133.                          }, 
134.                          "u2":{ 
135.                             userid:"uu2",
136.                             username:"user2" 
137.                          } 
138.                      }; 
139.       testdwr.test9(data); 
140. } 
143. function addOptions(){
144. //将数组添加到下拉菜单里面去;
145. var arrayFive = [ 'One', 'Two', 'Three', 'Four', 'Five' ];
146. DWRUtil.addOptions('addOptionsBasic', arrayFive); 
147. }
149. function addOptions2(){
150. var arrayObject = [
151. { name:'One', value:'1' },
152. { name:'Two', value:'2' },
153. { name:'Three', value:'3' },
154. { name:'Four', value:'4' },
155. { name:'Five', value:'5' }
156. ];
157. //后面2个参数是 值，文本
158. DWRUtil.addOptions('addOptionsObject1', arrayObject,  "value","name"); 
160. //这样调用表示值和文本都是name
161. //DWRUtil.addOptions('addOptionsObject1', arrayObject, "name");
163. }
165. function addOptions3() {
167. var map = { one:1, two:2, three:3, four:4, five:5 };
168. //同上, one 是值;1 是文本;
169. //DWRUtil.addOptions('addOptionsMap1', map); 
170. //同上, 1 是值;one 是文本;
171. DWRUtil.addOptions('addOptionsMap1', map,true); 
173. }
175. function addOptions4() {
177. var map = { one:1, two:2, three:3, four:4, five:5 };
178. //同上, one 是值;1 是文本;
179. //DWRUtil.addOptions('addOptionsMap1', map); 
180. //同上, 1 是值;one 是文本;
181. DWRUtil.addOptions('removeItems', map,true); 
183. }
184.  function init() {
185.     dwr.util.useLoadingMessage("加载中...");
186.   }
188.  function testrows() { 
190.  var data = [
191. { userid:'One', username:'1'},
192. { userid:'tow', username:'2'}
193. ];
195.         DWRUtil.addRows('addRowsBasic', data, [
196. function(data) { return data.userid; },
197. function(data) { return data.username; }
198. ],
199. {
200.     rowCreator:function(options) {
201.     var row = document.createElement("tr");
202.     var index = options.rowIndex * 50;
203.     row.style.color = "rgb(" + index + ",0,0)";
204.     return row;
205.     },
206.     cellCreator:function(options) {
207.     var td = document.createElement("td");
208.     var index = 255 - (options.rowIndex * 50);
209.     td.style.backgroundColor = "rgb(" + index + ",255,255)";
210.     td.style.fontWeight = "bold";
211.     return td;
212.     }
213. }
214. );//end addrows
215. }//end function
217. //callTestMethod1();
219. function testspring(){ 
220.       testdwr2.test2(callBacktestspring); 
221. } 
222. function callBacktestspring(data){ 
223.      // 其中 date 接收方法的返回值 
224.      // 可以在这里对返回值进行处理和显示等等 
225.     alert("the return value is " + data); 
226. } 
229. function testDwrFactory(){ 
230.       dwrFactory.testMethod(callBackTestDwrFactory); 
231. } 
232. function callBackTestDwrFactory(data){ 
233.     alert("the return value is " + data); 
234. } 
237. </script>
238.     </head>
239.     <body  onload="init();">
240.         test dwr
241.         <br>
242.         <input type="button" onclick="callTestMethod1();"
243.             value="调用没有返回值和参数的JAVA方法">
244.         <br>
246.         <input type="button" onclick="callTestMethod2();"
247.             value="调用有简单返回值的java方法">
248.         <br>
250.         <input type="button" onclick="callTestMethod3();"
251.             value="调用有简单参数的java方法 ">
252.         <br>
254.         <input type="button" onclick="callTestMethod4();"
255.             value="调用返回JavaBean的java方法 ">
256.         <br>
258.         <input type="button" onclick="callTestMethod5();"
259.             value="调用有JavaBean参数的java方法 ">
260.         <br>
261.         
262.         <input type="button" onclick="callTestMethod6();"
263.             value="调用返回List、Set或者Map的java方法 ">
264.         <br>
266.         <input type="button" onclick="callTestMethod7();"
267.             value="调用有List、Set或者Map参数的java方法  ">
268.         <br>
269.         
270.         <input type="button" onclick="callTestMethod8();"
271.             value="调用返回Map的java方法  ">
272.         <br>
273.         
274.         <input type="button" onclick="callTestMethod9();"
275.             value="参数为Map的java方法  ">
276.         <br>
278. <p>
279. test dwrutil
280. <br>
282. *选中selectRangeBasic文本框里面从第五个字符到第15个字符之间的字符<br>
283. <input type="text" id="selectRangeBasic"> 
284. <input type="button" onclick="DWRUtil.selectRange('selectRangeBasic', 5, 15);"
285.             value="selectRange  ">
286. <input type="button" onclick="alert(DWRUtil.getSelection('selectRangeBasic')) ;"
287.             value="_getSelection  ">
288.             
289. <br>
291. *将数组添加到下拉菜单里面去<br>
292. <select name="addOptionsBasic">
293. </select>
294. <input type="button" onclick="addOptions();"
295.             value="addOptions  ">           
296. <br>
297. *得到 addOptionsBasic 对象的值<br>
298. <input type="button" onclick="alert(DWRUtil.getValue('addOptionsBasic')) ;"
299.             value="getValue  "> 
301. <br>*得到下拉框 addOptionsBasic 显示的文本<br>
302. <input type="button" onclick="alert(DWRUtil.getText('addOptionsBasic')) ;"
303.             value="getText  ">  
305. <br>*将数组及值添加到下拉菜单里面去<br>
306. <select name="addOptionsObject1">
307. </select>
308. <input type="button" onclick="addOptions2();"
309.             value="addOptions2  ">  
310. <input type="button" onclick="alert(DWRUtil.getText('addOptionsObject1')) ;"
311.             value="getText  ">                              
312. <input type="button" onclick="alert(DWRUtil.getValue('addOptionsObject1')) ;"
313.             value="getValue  ">
314.             
315. <br>*将对象属性及值添加到下拉菜单里面去<br>
316. <select name="addOptionsMap1">
317. </select>
318. <input type="button" onclick="addOptions3();"
319.             value="addOptions3  ">  
320. <input type="button" onclick="alert(DWRUtil.getText('addOptionsMap1')) ;"
321.             value="getText  ">                              
322. <input type="button" onclick="alert(DWRUtil.getValue('addOptionsMap1')) ;"
323.             value="getValue  ">                     
324.                         
325. <br>
326. <input type="button" onclick="testrows();"
327.             value="testrows  ">
328.             
329.             <input type="button" onclick="DWRUtil.removeAllRows('addRowsBasic');"
330.             value="removeAllRows  ">
331.             
332.             
333. <br>
334.     
335.        <table width="300" border="1" height="30">
336.             <tbody id="addRowsBasic">
337.             <tr>
338.             <th>userid</th>
339.             <th>username</th>
340.             </tr>
341.             </tbody>
342.         </table>    
343.         
344.         <input type="button" onclick="testspring();" value="test spring">
345.         
346.         <p/>
347.         <input type="button" onclick="testDwrFactory();" value="umpay dwr">
348.         
349.             
350.     </body>
351. </html>