DWR的应用过程

最新推荐文章于 2021-02-15 14:59:22 发布

Lucifinil

最新推荐文章于 2021-02-15 14:59:22 发布

阅读量103

点赞数

分类专栏： DWR Java Web 文章标签： DWR Java Web Ajax

本文链接：https://blog.csdn.net/Lucifinil/article/details/84047554

版权

DWR 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

Java Web

4 篇文章 0 订阅

订阅专栏

编辑Java类

package org.lucifer.dwr;

import org.directwebremoting.annotations.Param;
import org.directwebremoting.annotations.RemoteMethod;
import org.directwebremoting.annotations.RemoteProxy;
import org.directwebremoting.annotations.ScriptScope;
import org.directwebremoting.create.NewCreator;

@RemoteProxy(creator=NewCreator.class, name="service", scope=ScriptScope.PAGE,
		creatorParams=@Param(name="class", value="org.lucifer.dwr.AjaxService"))
public class AjaxService {
	@RemoteMethod
	public String welcome(String yourName) {
		StringBuilder sb = new StringBuilder("欢迎使用DWR应用示例，你是：");
		sb.append(yourName).append(".");
		return sb.toString();
	}
}

编辑配置web.xml文件

要应用DWR框架，首先需要在web.xml文件中设置DWR，以下配置必须被添加到WEB-INF/web.xml文件中。在web.xml文件中设置DWR内容如下：

<servlet>
	<description>配置DWR核心Servlet</description>
	<servlet-name>dwr-invoker</servlet-name>
	<!-- 指定DWR核心Servlet的实现类 -->
	<servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
	<init-param>
		<description>指定Web应用中要使用的DWR传输对象类和代理类</description>
		<param-name>classes</param-name>
		<param-value>org.lucifer.dwr.AjaxService</param-value>
	</init-param>
	<init-param>
		<description>指定DWR核心Servlet是否处于Debug状态</description>
		<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>

编写JSP

创建JSP文件，在文件中使用DWR需要注意以下事项：

要引用DWR的JS文件，其中engine.js是必须要引用的文件，如果需要用到DWR提供的一些工具，还需要引用util.js文件。
然后还要引用句DWR自动生成的JS文件，例如：dwr/interface/service.js，注意JS文件名要与Java类中的注解中定义的name属性一致。
JS里的service.welcome()方法和Java类的方法有一个区别，即多了一个参数，用来回调返回的数据。

下面是调用AjaxService类的welcome()方法的JSP文件示例，实现代码如下：

<%@page contentType="text/html;charset=UTF-8" pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<c:set var="basePath" value="${pageContext.servletContext.contextPath}"/>

<!DOCTYPE html>
<html lang="zh-cn">
    <head>
        <meta charset="UTF-8"/>
        <title>DWR 示例</title>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
		<script type="text/javascript">jQuery.noConflict();</script>
		<script type="text/javascript" src="${basePath}/dwr/engine.js"></script>
		<script type="text/javascript" src="${basePath}/dwr/interface/service.js"></script>
		<script type="text/javascript" src="js/dwr_simple.js"></script>
		<script type="text/javascript" src="${basePath}/dwr/util.js"></script>
    </head>
    <body>
        <form id="myForm" name="myForm">
		<label for="user">请输入名字：</label>
		<input type="text" name="user" id="user" autocomplete="on" placeholder="请输入名字"/>
		<button type="button" name="clickMe" id="clickMe">测试</button>
	</form>
	<footer>
		<p><div id="console"></div></p>
	</footer>
    </body>
</html>

编写JavaScript文件

var logger = function(msg) {
	jQuery("<strong>").append(msg).after("<br/>").appendTo("#console");
};

jQuery(function() {
	var callbackHandler = {
		callback:function(data) {
			logger("进入回调函数.");
			jQuery("<span>").append(data).after("<br/>").prependTo("#console");
			logger("退出回调函数.");
		},
		errorHandler:function(msg) {
			logger("进入错误处理函数");
			jQuery("<strong>").append(msg).after("<br/>").appendTo("#console");
			logger("退出错误处理函数");
		},
		timeout:2000
	};

	var handler = function(event) {
		logger("进入事件处理函数.");
		var nameText = jQuery("#user").val();
		if(nameText != "") {
			logger("准备调用DWR方法");
			service.welcome(nameText, callbackHandler);
			logger("DWR方法执行完成");
		} else {
			alert("注意：名字字段不能为空！");
		}
		logger("退出事件处理函数.");
	};

	jQuery("#myForm").submit(function(event) {
		logger("触发onsubmit事件");
		handler(event);
		logger("完成onsubmit事件");
		this.stopPropagation();
		return false;
	});

	jQuery("#clickMe").click(function(event) {
		logger("触发onclick事件");
		handler(event);
		logger("完成onclick事件");
	});
});