Dwr 实例教程

原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 、作者信息和本人声明。否则将追究法律责任。
作者: 永恒の_☆ 地址: http://blog.csdn.net/chenghui0317/article/details/9842873

一、Dwr的介绍

       Dwr 简称 Direct Web Remoting ,它是一个 Java Ajax远程调用的框架,利用这个框架开发可以让Ajax开发变得非常简单、快捷。 Dwr框架与匈奴开发人员在客户端都过javascript代码调用服务器段的java方法,这都依靠于服务器上运行的Dwr核心Servlet负责处理客户端的请求,将客户端请求委托到实际的java 对象中进行处理,并将结果返回给客户端。  另外Dwr能够很好的与spring集成,直接调用spring中注入的bean。


二、Dwr的准备条件

    dwr2.0.jar  下载地址: http://download.csdn.net/detail/ch656409110/5894411

    commons-logging.jar (查看源码可以看到Dwr运行时依赖于common-logging库)


三、Dwr执行的流程

1、首先客户端发送一个javascript的请求,dwr识别该请求之后会将请求委托到Dwr中和核心Servlet;

2、核心Servlet 会根据请求的对象以及方法去WEB-INF 下的dwr.xml中找到具体的关联对象;

3、如果满足调用的条件,那么服务器会执行该方法,并返回对应的结果,这里返回的结果会被客户端发送请求的回调函数接收;

4、客户端收到返回结果之后,做出对应的处理,整个请求结束。


四、Dwr的案例讲解

1、使用Dwr做一个简单的demo

<1>、建立Web 工程,添加Dwr的支持,这里以现有的支持struts2为基础的项目为例;

<2>、添加dwr配置文件,必须放在WEB-INF的根目录下,具体如下:

<?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="dwrDate">
			<param name="class" value="java.util.Date"></param>
		</create>
	</allow>
</dwr>

根目录是<dwr>标签,里面的<allow>表示允许的方法列表,配置每一个对象都是<create>来区分的。

    creator:表示创建方式,取值有new,bean等等,其中new表示新建,bean表示取现有的对象。

    javascript:表示在js客户端调用的对象引用,比如这里配置的对象是java.util.Date,那么dwrDate 就是创建的对象引用,等价于java.util.Date dwrDate = new java.util.Date();

<create>里面的<param> 表示指定创建对象的声明;

    name:表示声明的name的形式;

    value:表示根据name绑定的具体值;

    name取值有class,beanName等等,其中name="class"表示value中绑定的是类的完整限定名,name="beanName"表示value绑定的是spring中注入的对象的引用。

<3>、修改web.xml 配置文件,配置Dwr的核心servlet,具体如下:

  <!-- 配置dwr框架的核心servlet -->
  <servlet>
      <servlet-name>dwr</servlet-name>
      <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
      <!-- 添加调试模式,方便调试方法,正式发布的时候可以改为false 默认值为fasle-->
      <init-param>
          <param-name>debug</param-name>
          <param-value>true</param-value>
      </init-param>
  </servlet>
  <servlet-mapping>
      <servlet-name>dwr</servlet-name>
      <url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>

如上配置,所有以/dwr/ 结尾的请求都会被DwrServlet匹配 执行相应的请求。

好了,接下可以调试我们的Dwr了,启动服务器,打开浏览器输入:http://localhost:8080/house/dwr  (这个是Dwr入口,将展示所有在dwr.xml中配置完的对象列表,点击进去会看到 配置的对象允许方法的方法等)

结果报错,具体如下:

严重: Allocate exception for servlet dwr
org.xml.sax.SAXException: Failed to resolve: arg0=-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN arg1=http://getahead.org/dwr/dwr30.dtd

这是因为添加的jar包是2.0版本的,但是却引用了3.0的dtd文件,所以报错了,改为如下配置即可:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" 
    "http://www.getahead.ltd.uk/dwr/dwr20.dtd">
<dwr>
	<allow>
		<create creator="new" javascript="dwrDate">
			<param name="class" value="java.util.Date"></param>
		</create>
	</allow>
</dwr>

修改之后再次打开dwr地址,又报错了:

Struts Problem Report

Struts has detected an unhandled exception:
Messages:     
There is no Action mapped for namespace / and action name dwr.
Stacktraces
There is no Action mapped for namespace / and action name dwr. - [unknown location]

意思就是说找不到namespace为 / 并且action名称为dwr的Action 类,这里是因为struts2 的核心控制器StrutsPrepareAndExecuteFilter,拦截了所有的请求去找action方法了,所以404。

现在要在struts.xml中过滤掉所有的以 /dwr/ 这样子结尾的请求才行,添加一个不包括访问的参数即可,具体如下:

    <!-- 核心控制器在处理页面跳转时是拦截所有跳转,当跳转到house/dwr/下进行方法测试时,struts核心控制把
    它看成是一个action,所以就跳不过去了,可以通过配置一个常量struts.action.excludePattern,值里面用
    正则表达式匹配,
    .  表示除了换行以外其他所有的字符 
    *  表示字符或表达式出现的次数零次或多次    -->
    <constant name="struts.action.excludePattern" value="/dwr.*"></constant>
保存struts.xml 再次启动服务器,打开地址,效果如下:


这个就表示 我们在dwr.xml中配置的dwrDate对象成功了。点击dwrDate超链接,效果如下:


这里面列出了所有的java.util.Date中所有允许访问的放,点击每一个execute 表示测试该方法。。

ok....现在在Action类中添加一个方法dwrDemo() 并且对应创建一个dwrDemo.jsp 专门用于测试dwr。

具体如下:

<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>永恒租房 - 首页</title>
    <!-- 这三个js导入项必不可少 -->
    <!-- 每一个对象都会有以一个对象为名称的那个js库 -->
    <script type='text/javascript' src='${ctx}/dwr/interface/dwrDate.js'></script>
    <!-- Dwr 引擎库 -->
      <script type='text/javascript' src='${ctx}/dwr/engine.js'></script>
      <!-- Dwr 工具库 -->
      <script type='text/javascript' src='${ctx}/dwr/util.js'></script>
    <script>
        window.onload = function(){            
            //输出当前时间
            //需要说明的是,如果在客户端输出dwrDate 对象将返回undefined,除非调用完整的函数(也就是服务器端的方法)才会调用成功
            //客户端接收参数的方法都是通过回调函数来获取的。
            dwrDate.getYear(function(data){
                //在回调函数里面不能使用document.write("")输出,因为第一次输出之后,浏览器会一直处于加载的状态,f12看不出在加载什么,然后后面的document.write("")也不会再执行了。
                document.getElementById("showTime").innerHTML += 1900 + data + " 年 ";
            });
            dwrDate.getMonth(function(data){
                document.getElementById("showTime").innerHTML += 1 + data + " 月 ";
            });
            dwrDate.getDate(function(data){
                document.getElementById("showTime").innerHTML += data + " 日 ";
            });
        };
    </script>
</head>
<body>
<div id="showTime">当前时间:</div>
</body>
</html>
在地址栏输入: http://localhost:8080/house/house/dwrDemo.action ,结果alert了三个文本都是 Session Error 。

这里需要在dwrServlet中添加参数crossDomainSessionSecurity,具体配置如下:

  	<!-- 这个crossDomainSessionSecurity必须配置,应该是跨区域提交设置,默认是ture,
  	 如果不设置为false就会报错:Session Error -->
  	<init-param>
        <param-name>crossDomainSessionSecurity</param-name>   
     	<param-value>false</param-value>   
	</init-param>

然后再次重启服务器打开dwrDemo页面,效果如下:


2、使用Dwr服务器对象配置允许访问的方法

接下来,新创建一个类,里面有setValue(),getValue()等等方法,具体如下:

	private String value = "default";
	
	public String getValue(){
		return value;
	}
	
	public void setValue(String value){
		this.value = value;
	}

然后在dwr.xml中自己再配置一个自己定义的对象,具体如下:

         <create creator="new" javascript="houseDwrBiz">
            <param name="class" value="com.struts2.biz.impl.HouseBizImpl"></param>
            <include method="getValue,setValue"/>
            <exclude method="getListPage"/>
        </create>
在配置文件中 ,新添加了 <include>和<exclude>标签,他们分别表示该对象中允许客户端访问的方法,和不允许访问的方法。

好了,然后打开服务器 启动调试窗口,结果直接报错,具体如下:

[ERROR] [http-apr-8080-exec-5] - Failed to add creator: type=new, javascript=houseDwrBiz
java.lang.IllegalArgumentException: The Creator houseDwrBiz uses mixed include and exclude statements

意思是说 <include>和<exclude>不能共存,也就是一山不容二虎。

并且实践证明,<include>标签里面只能绑定一个方法,如果配置了<include>那么其他就都不允许访问,如果配置了<exclude>那么其他的方法就都允许访问。

是否允许访问可以在调试页面中的方法下面注明,如下:

(Warning: getListPage() is excluded: Method access is denied by rules in dwr.xml. Seebelow)

这样子的话 每允许访问一个方法就要加一个<inclue>标签,具体如下:

         <create creator="new" javascript="houseDwrBiz">
            <param name="class" value="com.struts2.biz.impl.HouseBizImpl"></param>
            <include method="getValue"/>
            <include method="setValue"/>
            <!-- <exclude method="getListPage"/> -->
        </create>

添加测试的页面,具体如下:

<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>永恒租房 - 首页</title>
    <!-- 这三个js导入项必不可少 -->
    <!-- 每一个对象都会有以一个对象为名称的那个js库 -->
    <script type='text/javascript' src='${ctx}/dwr/interface/dwrDate.js'></script>
    <script type='text/javascript' src='/house/dwr/interface/houseDwrBiz.js'></script>
    <!-- Dwr 引擎库 -->
      <script type='text/javascript' src='${ctx}/dwr/engine.js'></script>
      <!-- Dwr 工具库 -->
      <script type='text/javascript' src='${ctx}/dwr/util.js'></script>
    <script>
        //这里故意命名为setValue getValue ,看是否与houseDwrBiz冲突,事实发现没有问题
        function setValue(){
            var value = document.getElementById("set").value;
            houseDwrBiz.getValue(value,function(data){
                //set success
            });
        }
        function getValue(){
            houseDwrBiz.getValue(function(data){
                //get success
                document.getElementById("get").value = data;
            });
        }
    </script>
</head>
<body>
<div id="showTime">当前时间:</div>
<input id="set" value=""/><input type="button" value="setValue" οnclick="setValue()"/><br/>
<input id="get" value=""/><input type="button" value="getValue" οnclick="getValue()"/>


</body>
</html>

实践证明,每一个houseDwrBiz 发出的请求都是多例的,都会重新产生一个新的实例,以为上面例子 我先setValue ,然后在getValue 得到依旧是default。


3、使用Dwr转换器保存对象以及接收对象集合

上面都是一些非常简单的例子,如果涉及比如复杂的需求,比如接受一个集合 或者保存一个对象到服务器呢?接下里简单介绍下如何去做。

HouseBizImpl 添加方法,具体如下:

	public int saveDwrHouse(House house){
		return house==null?0:1; //1 成功,0失败
	}

	public List<House> getDwrHouseList(int dwrId){
		List<House> houseList = new ArrayList<House>();
		House house = new House();
		if(dwrId==1){
			house.setId(1);
			house.setDescription("好房子便宜出租!");
			house.setPubDate(new Date());
			house.setTitle("便宜的房子");
			house.setContact("132312312");
		}else{
			house.setId(2);
			house.setDescription("好房子确实很便宜!");
			house.setPubDate(new Date());
			house.setTitle("全区最低价格特价出租");
			house.setContact("123456789");
		}
		houseList.add(house);
		
		return houseList;
	}
同时,dwr.xml也要把这两个方法 包含进去,否则不允许访问。具体如下:

 		<create creator="new" javascript="houseDwrBiz">
			<param name="class" value="com.struts2.biz.impl.HouseBizImpl"></param>
			<include method="getValue"/>
			<include method="setValue"/>
			<!-- <exclude method="getListPage"/> -->
			<include method="saveDwrHouse"/>
			<include method="getDwrHouseList"/>
		</create>
		<convert converter="bean" match="com.struts2.entity.House"></convert>
在<create>标签的同级目录多了一个<convert>转换器标签,

converter:转换器类型,一般是javabean,直接指定converter="bean"就好了;

match:表示转换器匹配的类的完整限定名。

配置完毕之后,然后再在dwrDemo.jsp调用,具体如下:

			//得到house集合
			houseDwrBiz.getDwrHouseList(1,function(data){
				if(data != null){
					for(var i=0; i<data.length; i++){
						document.getElementsByTagName("body")[0].innerHTML = "id:"+ data[i].id + "。<br/>"
							+ "description:" + data[i].description + "。<br/>"
							+ "attachUrl:" + data[i].attachUrl + "。<br/>"
							+ "contact:" + data[i].contact + "。<br/>"
							+ "floorage:" + data[i].floorage + "。<br/>";
					}
				}
			});
			//保存house对象
			var house = {id:111,contact:"12345"};
			houseDwrBiz.saveDwrHouse(house,function(data){
				alert(data==1?"添加成功":"添加失败");
			});
测试可知  getDwrHouseList返回的是一个json格式的集合,同样保存house对象的时候也要手动封装数组传递。


五、Dwr的js库

在前面的例子中,有引用三个核心的js库,具体如下:

	<!-- 这三个js导入项必不可少 -->
	<!-- 每一个对象都会有以一个对象为名称的那个js库 -->
	<script type='text/javascript' src='/house/dwr/interface/houseDwrBiz.js'></script>
	<!-- Dwr 引擎库 -->
  	<script type='text/javascript' src='${ctx}/dwr/engine.js'></script>
  	<!-- Dwr 工具库 -->
  	<script type='text/javascript' src='${ctx}/dwr/util.js'></script>
houseDwrBiz.js 是Dwr根据dwr.xml中配置的对象来动态生成的js库,里面封装的就是所有允许调用的js函数,具体如下:

// Provide a default path to dwr.engine
if (dwr == null) var dwr = {};
if (dwr.engine == null) dwr.engine = {};
if (DWREngine == null) var DWREngine = dwr.engine;

if (houseDwrBiz == null) var houseDwrBiz = {};
houseDwrBiz._path = '/house/dwr';
houseDwrBiz.getValue = function(callback) {
  dwr.engine._execute(houseDwrBiz._path, 'houseDwrBiz', 'getValue', callback);
}
houseDwrBiz.setValue = function(p0, callback) {
  dwr.engine._execute(houseDwrBiz._path, 'houseDwrBiz', 'setValue', p0, callback);
}
houseDwrBiz.saveDwrHouse = function(p0, callback) {
  dwr.engine._execute(houseDwrBiz._path, 'houseDwrBiz', 'saveDwrHouse', p0, callback);
}
houseDwrBiz.getDwrHouseList = function(p0, callback) {
  dwr.engine._execute(houseDwrBiz._path, 'houseDwrBiz', 'getDwrHouseList', p0, callback);
}

所以,现在对Dwr调用方式一目了然了。

engine.js 对Dwr非常的重要,它是Dwr客户端的核心,用来把动态声声称的Javascript对象转换成服务器端的java对象。

并且 在上面的houseDwrBiz.js中 每一个函数都是通过dwr.engine._execute()这个函数来调用后台服务器方法的,所以用到Dwr的地方就要用到它。

util.js 这个是Dwr提供的工具类,里面提供了一些javascript的封装函数以及选择器,要是有什么不会的可以直接查看它的源码。

下面例子讲解Dwr操作Select控件和表格如下:

<%@page import="java.util.List"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%@ include file="/common/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>永恒租房 - 首页</title>
	<!-- 这三个js导入项必不可少 -->
	<!-- 每一个对象都会有以一个对象为名称的那个js库 -->
	<script type='text/javascript' src='/house/dwr/interface/houseDwrBiz.js'></script>
	<!-- Dwr 引擎库 -->
  	<script type='text/javascript' src='${ctx}/dwr/engine.js'></script>
  	<!-- Dwr 工具库 -->
  	<script type='text/javascript' src='${ctx}/dwr/util.js'></script>
	<script>
	window.οnlοad=function(){
		//获取对象直接使用$("id") 不用像以前一样使用document.getElementById("id")那么麻烦
		$("showTime").innerHTML = "当前时间:" + new Date();
		//对象赋值
		$("set").value = "12345";
		//util.js中的针对表单控件赋值和取值
		dwr.util.setValue("showTime","67890");
		alert(dwr.util.getValue("showTime"));
		//使用dwr.util.removeAllOptions("id")删除select控件中所有的option元素
		//至于为什么要这么用在util.js中有清晰的函数说明
		dwr.util.removeAllOptions("slt");
	};
	
	//添加Select控件的option元素,需要传递json格式的对象
	function addOption(){
  		var array = [{id:"a",name:"aaa"},
  					 {id:"b",name:"bbb"},
  					 {id:"c",name:"ccc"}
  					 ];
  		//这里面参数必须都要指定,id,封装的数组,value,name  如果不指定value,name 将添加的全是[object, Object]
  		dwr.util.addOptions("slt",array,"id","name");
  		
	}
	//删除table中所有的rows, 只会留一个空的table标签
  	function removeAllRows(){
  		dwr.util.removeAllRows("tbl");
  	}
	//添加表格中的row ,同时也需要传递json格式的对象
  	function addRows(){
  		var array = [{id:"b",name:"bbb"},
  					 {id:"c",name:"ccc"},
  					 {id:"d",name:"ddd"}
  					];
  		//从上面的array的数组中封装cellFuncs 这样一个函数组,用于从传递的行数据中提取单元格数据
  	    var cellFuncs = [
  	    			function(data){return "<a href='javascript:alert(\"" + data.id + "\")'>" + data.id + "</a>";},
  	    			function(data){return "<a href='javascript:alert(\"" + data.name +"\")'>" + data.name + "</a>";},
  	    			function(data){return "<a href='javascript:alert(\"test\")'>测试</a>";}
  	    			];
  		//添加一行,然后escapeHtml表示是否将加入的元素按文本输出还是按html格式输出,默认是true,按文本输出
  		dwr.util.addRows("tbl",array,cellFuncs,{escapeHtml:false});
  	}
	</script>
</head>
<body>
<div id="showTime">当前时间:</div>
<input id="set" value=""/><input type="button" value="setValue" οnclick="setValue()"/><br/>
<input id="get" value=""/><input type="button" value="getValue" οnclick="getValue()"/><br/>
<select id="slt">
	<option value="1">111</option>
	<option value="2">222</option>
	<option value="3">333</option>
</select>
<input type="button" value="addOption" οnclick="addOption()"/>
<table border="1" width="50%" id="tbl">
	<tr>
		<td>id</td>
		<td>name</td>
		<td>操作</td>
	</tr>
	<tbody id="tbl">
	<tr>
		<td>a</td>
		<td>aaa</td>
		<td><a href="javascript:alert('test')">测试</a></td>
	</tr>
	</tbody>
</table>
<input type="button" value="removeAllRows" οnclick="removeAllRows()"/>
<input type="button" value="addRows" οnclick="addRows()"/><br/>
</body>
</html>
效果图如下图所示:


六、Dwr 与 Jquery 的区别

      Dwr 是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,因为它是java特有的框架,所以可以帮助开发人员开发包含AJAX技术的网站,它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA方法,就像它就在浏览器里一样。   

而Jquery是一个优秀的Javascrīpt框架。是一个js库,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+扽等)。jQuery使用户能更方便地处理HTML documents、DOM、events、实现动画效果,并且方便地为网站提供AJAX交互,而且还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,更加丰富和友好的展示Jquery带给我们的好处。

另外Dwr和Jquery都可以发送Ajax请求,尽管语法不同,另外他们操作对象并不兼容,因为他们都是通过$符号获取对象的,那么怎么区分,可以这样,具体如下:

		//解除 jQuery 的别名 $ ,默认使用jQuery 或者引用对戏那个jq都可以重新操作jquery元素。
		var jq=$.noConflict(); 
		alert(jQuery("#showTime").html());


七、Dwr 与 Spring 集成

    如何项目中用到了Spring,那么之前在dwr.xml配置的对象其实可以交给Spring去管理的,实现的方式很简单,修改原先配置的houseDwrBiz 对象的配置,改为如下配置即可:

		<create creator="spring" javascript="houseDwrBiz">
			<param name="beanName" value="houseBizImpl"></param>
			<include method="getValue"/>
			<include method="setValue"/>
			<!-- <exclude method="getListPage"/> -->
			<include method="saveDwrHouse"/>
			<include method="getDwrHouseList"/>
		</create>
		<convert converter="bean" match="com.struts2.entity.House"></convert>

修改的地址有两个,原先<create>中的creator 都是“new”,现在交给spring去管理了,所以是"spring",另外子元素<param>中的name原先是new 所以每次调用都会产生一个新的实例,现在换成beanName,表示去spring中注入的对象中找到houBizImple 直接拿来用。

这样 有一个好处,保证之前的多例访问模式变成单例了,从而节省每次调用都要创建对象的性能开销。


    现在对Dwr一定已经有一定的理解,这些小demo虽然非常简单,即使不使用强大的Dwr也可以非常容易的实现上面的功能,但是这些小程序是为了更加友好的体验和使用Dwr框架给我们带来的好处。



已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页