简介
DWR(Direct Web Remoting)是一个用于改善web页面与Java类交互的远程服务器端Ajax开源框架,可以帮助开发人员开发包含AJAX技术的网站。它可以允许在浏览器里的代码使用运行在WEB服务器上的JAVA函数,就像它就在浏览器里一样。
使用DWR
要想在我们的项目中使用DWR,首先要获取到dwr的jar包(下载地址: http://directwebremoting.org/dwr/downloads/index.html),其次还需要下载commons-logging的jar包。
在myeclipse中新建一个web项目,把dwr.jar和commons-loggin-1.1.1.jar放入到lib目录下。
要想dwr在我们的web项目中起作用,还需要将他引入进来,Struts2使用fiter的方式引入到项目中,dwr则是通过Servlet的方式引入到我们的项目中。在web.xml中配置dwr的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">
<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>
我们还可以通过<init-param>来给dwr传递参数,比如是否开启调试等。更多的参数可以参看官方的文档。
现在将dwr引入进来了,还需要在web-info目录下创建一个名为dwr.xml的文件,他就是dwr的配置文件,我们在这个文件中配置我们要暴露给javascript的java类。<?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="JHello">
<param name="class" value="com.luojing.dwr.Hello"/>
</create>
</allow>
</dwr>
我们关注一下<create>元素,我们通过这个元素来配置我们的java类和javascript之间的关系。
creator=”new”表示对象的创建方式为使用java中的new关键字。还有其他的选项如static,none。static表示通过静态方法(默认为getInstacne)来获取对象实例。Javascript=”JHello”指定我们的类在javascript中对应的对象的名字,我们可以通过这个名字在javascript中调用我们公开的java方法。
<param class=”class” value=”com.luojing.dwr.Hello”/>用于指定我们要公开的类,当然我们还可以对类中要公开的方法进行配置(通过配置include和exclude)。
接下来编写我们需要开放的类:public class Hello {
public String sayHello(String name){
return "hello " + name;
}
}
在我们的浏览器中输入:http://localhost/dwr/dwr
这里会显示我们已经公开的类。这里可以看到,显示的模块的名字和我们在dwr.xml中指定的javascripit=”JHello”是一致的。点击名字,可以进入下一个页面:
这里可以看到在JHello中我们已经公开的方法,点击对应的方法后面的excute按钮可以执行这个方法。这里还列出了如果我们要在页面中使用javascript访问该对象时需要引进的js脚本。
下面我们编写一个Jsp页面用于测试:
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>DWR TEST</title>
<script type="text/javascript" src="dwr/engine.js"></script>
<script type="text/javascript" src="dwr/util.js"></script>
<script type="text/javascript" src="dwr/interface/JHello.js"></script>
<script type="text/javascript">
function test(){
var inputValue = dwr.util.getValue("inputData");
JHello.sayHello(inputValue, callBackFunc);
}
var callBackFunc = function (data){
dwr.util.setValue("serverData",data);
}
</script>
</head>
<body>
input data :
<input type="text" name="inputData" />
<br />
server data:
<input type="text" name="serverData" />
<br />
<input type="button" value="测试" οnclick="test()" /> <br />
</body>
</html>
对于js脚本引进的顺序,官方好像没做说明,但是我在测试的时候发现,如果将engine.js放在我们interface/Jhello.js之后的话,js会报错。因此最好将engine.js的引用放在最前面,他是dwr的核心成员。
在浏览器中访问我们的文件:
点击”测试按钮”:
可以看到正确的结果被显示在页面上了。
页面中我们还用到了util.js文件,他是dwr提供的辅助工具,他是独立的,我们可以直接使用它。他提供了很多有用的方法来帮助我们操作页面上的元素。
到这里,就完成了使用dwr创建的第一个应用。dwr涉及的内容也不多,学习起来还是比较简单。自己动手做了,就顺便记录下来。