当前位置: 代码迷 >> Web前端 >> 二零一三年11月14日-DWR的实现
  详细解决方案

二零一三年11月14日-DWR的实现

热度:299   发布时间:2013-11-18 00:11:49.0
2013年11月14日-DWR的实现
1、定义:DWR is a Java library that enables Java on the server and JavaScript in a browser to interact and call each other as simply as possible.
也就是说DWR给我们提供了一种框架,这种框架使得我们能够在客户端使用JavaScript代码和服务器端的Java代码进行通信,提供了一种更加方便的AJAX实现方法。
2、用法:
(1)首先下载:选择最新版本的DWR,dwr.jar
地址:http://directwebremoting.org/dwr/downloads/index.html#devRelease
将下载的.jar包放到WEB-INF/lib 下 …
(2)由于DRW的实现其实是通过Servlet实现的(明天记录实现原理),所以需要在web.xml中进行如下配置:
<!-- 配置DWR的核心Servlet -->
<servlet>
		<servlet-name>dwr-invoker</servlet-name>
		<!-- 类名不能改变,框架提供的核心类 -->
		<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
		<init-param>
		<!-- 初始化参数,名字必须为debug。开发阶段是设置为true,正式发布之后使用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>
(3)编辑实现业务逻辑的Java类,定义前台js调用的类和方法:Hello.java
package com.bjoracle.dwr;
public class Hello {
	private String name;
	public Hello(){}
	public String getName() {
		return name;}
	public void setName(String name) {
		this.name = name}
	public String sayHello(String name){
		return "Hello,"+name}
}

(4)对上一步生成的Java类进行封装和配置,在WEB-INF/目录下新建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">
<!-- 前端的js和后端的类之间的映射关系 -->
<dwr>
	<allow>
	   <!-- 页面引入的对象,名字必须和 commentDwr相同-->
		<create creator="new" javascript="commentDwr">
			<param name="class" value="com.bjoracle.dwr.CommentDwr" />
		</create>
		<!-- 作用就是将js对象转换成java对象 -->
		<convert converter="bean" match="com.bjoracle.domain.*"></convert>
	</allow>
	<allow>
	 <create creator="new" javascript="Hello">
	   <param name="class" value="com.bjoracle.dwr.Hello"/>
	 </create>
	</allow>
</dwr>


(5)编写前台页面,hello.html
<!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>Hello World</title>
<!-- engine.js/util.js是DWR类库中的脚本代码, Hello.js是根据服务器端的Java代码
     生成的脚本代码。路径dwr/interface是自动生成的。注意:这里一定要保证
     将engine.js/util.js的引用写在前面,否则无法调用生成的.js代码,
     具体的原因应该和DWR的原理有关,回头补上-->
<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/Hello.js'></script>  
</head>
<body>
<div>
<input type="text" id="name"/>
<input type="button" value="alert" onClick="helloTest()"/>
</div>
</body>
<script type="text/javascript">
function helloTest(){
	/*
	调用服务器端的方法时候,格式如下:
	.method(param1,...paramn,callback(msg));
	callback用来处理服务器端返回的信息,也可以不写参数,默认取arg0
	*/
	var name=document.getElementById("name").value;
	Hello.sayHello(name,function(msg){
		alert(msg);	
	});
}
</script>
</html>

(6)测试:
点击按钮,弹窗显示 Hello,“你输入的名字”
说明我们的前台已经能够调用了后台的Java代码,完成测试。
  相关解决方案