DWR ajax 实际应用讲解
编程技术 / houtizong 发布于 3年前 130
首先要增加相应的JAR包，这里我们需要的包并不多。
dwr.jar，commons-logging-1.0.4.jar，log4j-1.2.12.jar。注意我这里使用的版本是dwr-2.0.5。
其实要在web.xml中配置dwr。dwr控制器会拦截请求完成相应的处理。
<?xml version="1.0" encoding="UTF-8"?><web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"><welcome-file-list><welcome-file>index.jsp</welcome-file></welcome-file-list><servlet><servlet-name>dwr-invoker</servlet-name><servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class><init-param><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></web-app>
增加dwr配置文件dwr.xml，定义那些类来提供方法，已经在页面调用时会用到的名字。我这里的配置文件是包含了所有示例配置的文件。
<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "http://getahead.org/dwr/dwr20.dtd"><dwr><allow><!-- --><create creator="new" javascript="noorder"><param name="class" value="org.dwr.me.MeNoOrder" /></create><!-- HAVER RETURN --><create creator="new" javascript="str"><param name="class" value="org.dwr.re.BackStr" /></create><create creator="new" javascript="arr"><param name="class" value="org.dwr.re.BackArray" /></create><create creator="new" javascript="douarr"><param name="class" value="org.dwr.re.BackDoubleArray" /></create><create creator="new" javascript="list"><param name="class" value="org.dwr.re.BackList" /></create><create creator="new" javascript="set"><param name="class" value="org.dwr.re.BackSet" /></create><create creator="new" javascript="map"><param name="class" value="org.dwr.re.BackMap" /></create><create creator="new" javascript="obj"><param name="class" value="org.dwr.re.BackObj" /></create><!-- 对象转换器 --><convert match="org.dwr.re.Users" converter="bean"><param name="include" value="name,pass"></param></convert></allow></dwr>
下面是一个简单示例，传递参数接收返回值。以下是需要的类代码
package org.dwr.re;/** * 测试 接收参数返回字符串 * @author 崔素强 */public class BackStr {public String helloWord(String name){return "Hello " + name + "!";}}
然后在dwr配置文件中定义这个类和名字，str将是将来在前台用到的名字。creator是new，我们也可以结合spring使用，这里就不再介绍。
<create creator="new" javascript="str"><param name="class" value="org.dwr.re.BackStr" /></create>
测试这个请求是否可用，访问 http://localhost:8800/dwr/dwr/index.html 里面包含所有可以使用的请求。点击一个进去，点击str，helloWord是可以用的方法，输入参数点击调用。
我们也可以在这个地方同时点击其他返回了java数据对象的测试，可以弹出返回的内容。
在jsp中应用展现效果
页面调用时要引用几个js文件，分别是
<script type='text/javascript' src='/dwr/dwr/util.js'></script> <script type='text/javascript' src='/dwr/dwr/interface/str.js'></script> <script type='text/javascript' src='/dwr/dwr/engine.js'></script>
str.js就是在配置文件中定义的名字。
看效果
<%@ page language="java" pageEncoding="UTF-8"%><%String path = request.getContextPath();String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <base href="<%=basePath%>"> <title>THE FIRST DWR TEST FOR STR</title> <script type='text/javascript' src='/dwr/dwr/util.js'></script> <script type='text/javascript' src='/dwr/dwr/interface/str.js'></script> <script type='text/javascript' src='/dwr/dwr/engine.js'></script> <script type="text/javascript"> function callback(){ var name=document.getElementById('name').value; str.helloWord(name,function back(value){ alert(value); }); } </script><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"> </head> <body> <input type="text" id="name" /> <input type="button" onclick="callback();" value="ClickMe" /> </body></html>
在实际应用中，我们代码中可能传递回去的是List，Map，数组，Set，也可能是多维数组，也可能是对象。对于除对象之外的应用，请参考工程里面的代码。
代码中后台直接返回Java中的各种数据对象，主要看一下前台如何解析即可。
关于返回对象，我们首先定义一个对象实体。在后台中直接返回这个对象。重点是我们要在dwr配置中增加一个对象转换器，具体配置内容是
package org.dwr.re;/** * 测试 实体对象 * @author 崔素强 */public class Users {private String name;private String pass;public String getName() {return name;}public void setName(String name) {this.name = name;}public String getPass() {return pass;}public void setPass(String pass) {this.pass = pass;}}
然后在js中解析，其实js中也可以创建对象，按照解析js对象的方式解析返回的内容即可。
<script type="text/javascript"> function callback(){ //javascript中创建对象 //var users=new objFun($('name').value,$('pass').value); var name=$('name').value; var pass=$('pass').value; //直接创建对象 var users={name:name,pass:pass}; obj.userLogin(users,function(data){ //解析javascript中的对象 $('name').value=data.name; $('pass').value=data.pass; }); } //使用函数创建对象 function objFun(name,pass){ //javascript中对象赋值 this.name=name; this.pass=pass; } </script>
另外如果在页面中定义了两个方法，那么调用有先后顺序吗？meNoOrder.jsp，MeNoOrder.java演示调用两个方法的顺序，只要在页面调用时指定是否顺序调用即可。
<script type="text/javascript"> function noorderme(){ // 方法调用无顺序，该属性设置按照方法顺序执行 dwr.engine.setAsync=false; noorder.method1( function(data){ alert(data); } ); noorder.method2( function(data){ alert(data); } ); } </script> 通过弹出窗口的顺序，我们可以判断是否是有序的。
请您到ITEYE看我的原创：http://cuisuqiang.iteye.com
或支持我的个人博客，地址：http://www.javacui.com
请勿发布不友善或者负能量的内容。与人为善，比聪明更重要！
技术博客集 - 网站简介：
前后端技术：
后端基于Hyperf2.1框架开发,前端使用Bootstrap可视化布局系统生成
网站主要作用：
1.编程技术分享及讨论交流，内置聊天系统;
2.测试交流框架问题，比如：Hyperf、Laravel、TP、beego;
3.本站数据是基于大数据采集等爬虫技术为基础助力分享知识，如有侵权请发邮件到站长邮箱，站长会尽快处理;
4.站长邮箱：[email protected];
文章归档
文章标签
友情链接
