DWR的应用过程
编辑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 {@RemoteMethodpublic 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事件");});});
页:
[1]