SSH2+dwr

最新推荐文章于 2014-04-20 19:28:38 发布

tonytfjing

最新推荐文章于 2014-04-20 19:28:38 发布

阅读量2.8k

点赞数

分类专栏： J2EE 开源框架和工具文章标签： ssh2 dwr jquery

本文链接：https://blog.csdn.net/tonytfjing/article/details/19244049

版权

开源框架和工具同时被 2 个专栏收录

7 篇文章 0 订阅

订阅专栏

J2EE

5 篇文章 0 订阅

订阅专栏

很早之前就想写博客，可是一直没动手。这两天闲的无聊又玩起了搭框架的“游戏”，搭完才发现真的是“好记性不如烂笔头”，很多东西都忘了，遂下定决心开始写博客。

在讲SSH2和dwr框架融合之前，先简单介绍下dwr框架以及dwr单独搭建的方法。

Dwr作用：它是一个可以允许你去创建AJAX WEB站点的JAVA开源库。它可以让你在浏览器中的Javascript代码调用Web服务器上的Java代码，就像在Java代码就在浏览器中一样。Dwr原理：在安装DWR时会在web.xml中配置一个servlet，这个servlet负责把前台的JS参数封装成JAVA，去调用你的JAVA类，然后将返回结果（JAVA类型）再翻译成JS生成到你的JSP页面上，给你的错觉就是你用JS直接调用了JAVA方法。

1. 搭建dwr

a.从DWR官网下载最新版本的jar包，地址：http://directwebremoting.org/dwr/downloads/index.html。（笔者所用的是dwr3.0. 当前最稳定的版本是dwr2.0。）新建web工程，将jar包放入WEB-INF的lib文件夹下，这里要注意，dwr依赖于commons-logging.jar这个包，所以必须将这个jar包也放入到WEB-INF的lib文件夹下，否则会报Allocate exception for servlet dwr-invoker错误。

b. 配置dwr的环境

第一步，修改web.xml，在web.xml里添加Servlet映射，具体代码如下：

<?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>
  <!--DWR Servlet config -->
	<servlet>
		<!-- Dwr2.0之后配置前端拦截器由uk.ltd.getahead.dwr.DWRServlet换为了org.directwebremoting.servlet.DwrServlet -->
		<servlet-name>dwr-invoker</servlet-name>
		<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
		<init-param>
		<!-- 这个是调试用，如果正式发布请该为false -->
			<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.xml，配置允许js调用的class，具体代码如下：

<?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元素中，creater="new"表示每调用一次DWRUserAccess时，需要new一个这样的类；
	这是我配置的一个演示类，javascript="Demo" ,表示我可以在页面中用Demo这个名称指向DwrTest这个java类，类中的方法可以在前台调用-->  
    
    <create creator="new" javascript="Demo">  
      <param name="class" value="cn.hfut.DwrTest"/>  
      <!-- 加include可以具体指定java类中关的方法，不加则默认允许访问所有公布类的public方法，
      	在我的例子中，为了让大家了解include的作用我只允许访问getHello方法。-->
      <include method="getHello"/>  
    </create>  
    
  	<!--  <convert>标签是将converter中定义的转换器映射到的具体类型 -->
    <!-- this is a bad idea for live, but can be useful in testing 
    <convert converter="exception" match="java.lang.Exception"/>
    <convert converter="bean" match="java.lang.StackTraceElement"/>
	-->
	
  </allow>

</dwr>

第三步， 新建dwr.xml中配置的业务类 cn.hfut.DwrTest ，具体java代码如下：

package cn.hfut;
/**
 * @author Tony
 * @date : 2014-2-15 下午06:44:23
 */
public class DwrTest {
    public String getHello(String name) {  
        return "hello" + name;  
    }
    public String getWorld(String name) {  
        return "world" + name;  
    }
}

第四步， 编写测试的 index.jsp 页面 . 具体代码如下：

<%@ page language="java" import="java.util.*" 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>
    	<title>Dwr Demo</title>
    	<!-- dwr config -->
    	<!-- jsp文件中必须引入几个js,它们都是隐含存在的，不用考虑它们在哪儿。
    	其中engine.js和util.js是固定的。最后一个js的名称要与dwr.xml中配置的javascript名一致。 -->
		<script type='text/javascript' src='<%=path%>/dwr/engine.js'> </script>
		<script type='text/javascript' src='<%=path%>/dwr/util.js'> </script>
		<script type='text/javascript' src='<%=path%>/dwr/interface/Demo.js'> </script>
		
		<script type="text/javascript">
		//此函数中可以调用java类的方法，除了java方法本身的参数外，还要将回调函数名作为参数传给java方法
		function sayHello(name){
			Demo.getHello(name,dwrHandler);//这里只能使用dwr.xml中暴露的方法
		}
		
		//这是dwr的一个回调函数，data参数即java方法getHello(String name)的返回值
		function dwrHandler(data){
			alert(data);
		}
		</script>
  	</head>
  
	<body>  
		<h1>Hello World!</h1>
		<script type="text/javascript">
			sayHello("DWR");
		</script>
	</body>
</html>

使用dwr千万不要忘记上述三个js文件，然后书写相应的javascript代码，用来实现ajax。

至此，dwr框架已经搭建完毕。访问index.jsp即会alert相应内容。或者在项目路径后面加上 /dwr/,如http://127.0.0.1:8080/Dwr1/dwr/，可进入debug页面

2. dwr+ssh2

简单了解了dwr，下面我们讲讲SSH2中怎么使用dwr。

a.首先建立一个SSH2项目，限于篇幅这篇博文就略过了；

b.dwr.xml.在WEB-INF下面新建dwr.xml。因为整个SSH2应用是基于Spring框架管理bean的，所以DWR就不能自己创建JavaBean了，也就是说DWR需要从Spring容器个取得bean。为了实现这个目标，在dwr.xml配置文件中，我们应该这么配：

<?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>
	<!-- dwr中创建转换对象的方式如下： -->
  	<allow>
  		<!-- 因为要使用ssh2框架，所以将bean的创建交给spring，而不是之前的class -->
	  	<create  creator="spring" javascript="demo" scope="application">
	  		<!-- param中name因为要调用bean中的方法，所以使用beanName,value是struts.xml中配置的业务类 -->
	  		<param name="beanName"  value="userAction"></param>		
		</create>
		
  		<!--  <convert>标签是将converter中定义的转换器映射到具体类型 ，即将match路径下的User转换成bean，供上述的beanName使用-->		
  		<convert converter="bean" match="cn.hfut.ssh.model.User"/>
  		
  	</allow>
</dwr>

c.web.xml.在已经配好的SSH2的web.xml中加入dwr Servlet的配置，这部分和之前的一样。

d.前台测试页面dwr.jsp.具体代码如下：

<%@ page language="java" import="java.util.*" 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>
    <title>DWR+SSH2</title>
    <script type="text/javascript" src="<%=path%>/js/jquery-1.6.2.js"></script>
    <link rel="stylesheet" type="text/css" href="<%=path%>/css/style.css"/>
	<!-- DWR测试 -->
	<script type="text/javascript" src="<%=path%>/dwr/util.js"></script>
	<script type="text/javascript" src="<%=path%>/dwr/engine.js"></script>
	<script type="text/javascript" src="<%=path%>/dwr/interface/demo.js"></script><!-- 这个js必须在engine.js之后，不然浏览器会报错 -->

<!-- 
	<script language="javascript" type="text/javascript">
	function test(){
		demo.findUser(dwrHandler);
	}

	//这是dwr的一个回调函数，user参数即UserAction里面findUser()的返回值，名称是随便取的，可以是data
	//这里的user不能少，少了会提示user is not defined
	function dwrHandler(user){
		alert(user.id+","+user.username+","+user.password);
	}	
	</script>
 -->
	<script type="text/javascript">
		$(document).ready(function(){
			$("button").click(function(){
				demo.findUser(dwrHandler);
			});
		});
		
		function dwrHandler(user){
			//alert(user.id+","+user.username+","+user.password);
			//$("#one").css("background","blue");
			$("#c").html(user.id+","+user.username+","+user.password);
		}
	</script>
 	
  </head>
  
  <body>
    
    <div id="main">
      	<div id="left">
      		<button type="button">SSH2+DWR测试</button>
      	</div>
  		<div id="c"></div>
    </div>
  </body>
</html>

结束语：感谢CCTV，感谢。。。V。。。大功告成啦~虽然框架搭好了，但是对于dwr还有很多要学的地方，比如网上一些例子中说的struts.xml也需要配置，在我这个搭建过程中根本没涉及到。所以只能说可以简单的使用dwr了，更深入的问题相信随着使用会逐渐碰到。希望我这篇博文对dwr初学者能起到一点帮助。^_^

代码下载地址：1.dwr3.0搭建

2.dwr3.0+SSH2