1.DWR框架介绍:
DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码)
它通过反射,将java翻译成javascript,然后利用回调机制,轻松实现了javascript调用Java代码。
2.DWR框架搭建步骤
1. 在pom.xml文件导入DWR.jar包
<dependency>
<groupId>org.directwebremoting</groupId>
<artifactId>dwr</artifactId>
<version>3.0.0-RELEASE</version>
</dependency>
2.在web.xml 中配置相应的监听,以及servlet的访问路径
<listener>
<listener-class>org.directwebremoting.servlet.DwrServlet</listener-class>
</listener>
<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>
3..确定要被dwr框架管理的类以及方法
一个普通java类
4.编写dwr.xml的配置文件,配置要公开的类或方法
Javascript表示生成js文件的名称
Param :name表示引入的类型为class文件,Value参数为类的全路径
creator="new" 类的创建方式,creater="new"表示每调用一次,需要new一个这样的类
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN"
"http://directwebremoting.org/schema/dwr30.dtd">
<dwr>
<allow>
<create creator="new" javascript="HelloDwr">
<param name="class" value="com.deppon.dwr.service.HelloDwr"/>
< /create>
<!-实体类受dwr组件管理-->
<convert converter="bean" match="test.User"/>
</allow>
</dwr>
5查看服务端公开了哪些支持JS调用的服务
http://localhost:8080/tomcat路径/dwr/index.html
6.在jsp页面引入依赖的js
DWR引擎
<script type='text/javascript' src='dwr/engine.js'></script>
DWR工具
<script type='text/javascript' src='dwr/util.js'></script>
自定义将调用的类
<script type='text/javascript' src='dwr/interface/反射生成的js文件.js'></script>
7.Demo案列
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</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/HelloDwr.js'></script>
<script type="text/javascript">
function sayHello() {
HelloDwr.sayHello(function(data) {
dwr.util.setValue("helloDwrReply", data);
});
}
//调用有参数的Java方法
function sayHelloWithParam() {
var name = dwr.util.getValue("name"); //参数
HelloDwr.sayHelloWithParam(name, function(data) {
dwr.util.setValue("helloDwrReply2", data);
});
}
</script>
</head>
<body>
<input type="button" value="HelloDwr.sayHello()" οnclick="sayHello()" />
<br>Replied:
<!-- 显示HelloDwr.sayHello方法的返回值 -->
<div id="helloDwrReply">
</div>
<hr>
<input id="name" type="text">
<input type="button" value="HelloDwr.sayHelloWithParam()" οnclick="sayHelloWithParam(name)" />
<br>Replied:
<!-- 显示HelloDwr.sayHelloWithParam方法的返回值 -->
<div id="helloDwrReply2">
</div>
</body>
</html>
注意事项:需要引入dwr的js
<script type='text/javascript' src='dwr/engine.js'> </script>
<script type='text/javascript' src='dwr/util.js'> </script>
引入自定义的js
<script type='text/javascript' src='dwr/interface/自定义的js文件.js'></script>