当前位置:首页 > 开发 > Web前端 > Ajax > 正文

DWR ajax 实际应用讲解

发表于: 2012-02-28   作者:cuisuqiang   来源:转载   浏览次数:
摘要: 首先要增加相应的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-

首先要增加相应的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

 

DWR ajax 实际应用讲解

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
前面一篇,简单的介绍了一下AJAXpro的用法. (代码下载:/Files/eicesoft/Test.zip) 下面我介绍一个实
http://blog.sina.com.cn/s/blog_4c925dca01009xrb.html 通常,我们在一些网站上,都会有注册功能,
上篇回顾: 图片上传_ajax上传之改进版本 看过前面几篇文章的朋友应该知道怎么回事了,不懂的朋友请
dwr.xml配置 web.xml配置 applicationContext.xml配置 <a href=
前言 本演示主要使用了自主开发的pixysoft.framework.messageflow框架。演示了网页客服与QQ等现有IM
Ajax,或者说是异步JavaScript和XML,描述了一种使用混合了HTML(或XHTML)和层叠样式表作为表达信息,
概述      这篇文章阐述了使用开源项目DWR(直接Web远程控制)和AJAX(异步JavaScript和XML)的概念
dwrtest.html <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html&g
http://digi.it.sohu.com/20060922/n245482778.shtml 现在,一般有一定规模的企业,基本都在其他地
  在前一篇文章《Scrum开发模式》中已经详细的介绍了Scrum的运作模式,同时大家也初步了解了Scrum
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号