很早之前就想写博客,可是一直没动手。这两天闲的无聊又玩起了搭框架的“游戏”,搭完才发现真的是“好记性不如烂笔头”,很多东西都忘了,遂下定决心开始写博客。
在讲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方法
。
@H_403_20@1.搭建dwr
a.从DWR官网下载最新版本的jar包,地址:http://directwebremoting.org/dwr/downloads/index.html。(笔者所用的是dwr3.0. 当前最稳定的版本是dwr2.0。)新建web工程,将jar包放入WEB-INF的lib文件夹下,这里要@H_403_20@注意,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页面
@H_403_20@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的配置,这部分和之前的一样。
<%@ 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.password); //$("#one").css("background","blue"); $("#c").html(user.id+","+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初学者能起到一点帮助。^_^