DWR框架应用技术及示例

java中DWR的使⽤上次分享了关于frameset框架右下⾓弹出消息。

连接在这⾥那么我们项⽬开发中不消息的内容应该都是从数据库的消息表去获取的。

⽽不是说这样写死的。

那么在java中该怎么做？最后我选择了dwr来获取并展⽰消息。

下⾯是例⼦下载地址:贴出dwr.xml代码:<?xml version="1.0" encoding="UTF-8"?><!DOCTYPEdwrPUBLIC"-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN""/dwr/dwr30.dtd"><dwr><allow><create creator="new" javascript="Msgdeal"><param name="class" value="com.msg.MsgDeal"/></create></allow></dwr>⾄于dwr我也是第⼀次使⽤~~ 所以只是分享⾃⼰使⽤的时候遇到的问题在上⾯的dwr.xml中我们配置了要调⽤的服务.下⾯贴出在jsp中如何引⽤:function Test1(){var _data = "";dwr.engine.setAsync(false);//设置同步Msgdeal.getMsg(1,function(data){_data = data;});//调⽤java中MsgDeal类的消息处理⽅法dwr.engine.setAsync(true); //设置到初始状态document.getElementById("serverResponse").value= _data; //设置获取的值if(_data > 0){//有新的消息//是消息图表闪动}else{//没有新消息}}那么我么在js中引⽤的 Msgdeal.getMsg(1,function(data){_data = data;});//调⽤java中MsgDeal类的消息处理⽅法这⾥的 Msgdeal就是我们在dwr.xml中配置的<create creator="new" javascript="Msgdeal">⾄于详细的使⽤⽅式⼤家下载下来⽰例就能看明⽩。

1.1跟我学DWR框架技术——应用DWR框架实现无刷新页面的数据查询的Web应用示例（第一部分）1.1.1构造出服务器端功能代码1、提供包装用户信息的VO类（1）程序类名称为UserInfoVO，程序包名称为com.px1987.webcrm.model.vo（2）添加下面的属性private String userName;private String userPassWord;private int userSex;private String passWordAsk;private String passWordAnswer;private String userMail;private String userImage;private String registerTime;private String id;（3）为上面的各个属性提供get/set方法（4）最终的程序代码如下package com.px1987.webcrm.model.vo;public class UserInfoVO {private String userName;public String getUserName() {return userName;}public void setUserName(String userName) {erName = userName;}public String getUserPassWord() {return userPassWord;}public void setUserPassWord(String userPassWord) { erPassWord = userPassWord;}public int getUserSex() {return userSex;}public void setUserSex(int userSex) {erSex = userSex;public String getPassWordAsk() {return passWordAsk;}public void setPassWordAsk(String passWordAsk) { this.passWordAsk = passWordAsk;}public String getPassWordAnswer() {return passWordAnswer;}public void setPassWordAnswer(String passWordAnswer) { this.passWordAnswer = passWordAnswer;}public String getUserMail() {return userMail;}public void setUserMail(String userMail) {erMail = userMail;}public String getUserImage() {return userImage;}public void setUserImage(String userImage) {erImage = userImage;}public String getRegisterTime() {return registerTime;}public void setRegisterTime(String registerTime) { this.registerTime = registerTime;}public String getId() {return id;}public void setId(String id) {this.id = id;}private String userPassWord;private int userSex;private String passWordAsk;private String passWordAnswer;private String userMail;private String userImage;private String registerTime;private String id;public UserInfoVO() {}}2、设计用户信息查询JavaBean（1）在接口UserInfoManageInterface中增加下面的两个查询方法package com.px1987.webcrm.model.inter;import java.util.List;import erInfoVO;public interface UserInfoManageInterface {public boolean checkUserNameValid(String userName);public UserInfoVO findOneUserInfo(String userID);public List<UserInfoVO> findSomeUserInfo(String userSex); }注意：UserInfoManageInterface接口已经在前面的示例创建出，因此不需要重复创建。

SpringMVC整合DWR3.0 与实例从网上找了好多资料，都不完整，花了好长时间才弄好，现在整理一下，给朋友们分享一下，也希望能提出问题，完善项目。

1、首先要下载DWR3.0 JAR包（这个是必须的，不多解释哈）DWR3.0下载地址/detail/qfq1990/78668072、配置项目web.xml文件<servlet><servlet-name>springMVC</servlet-name><servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>springMVC</servlet-name><url-pattern>/</url-pattern></servlet-mapping><servlet-mapping><servlet-name>springMVC</servlet-name><url-pattern>/dwr/*</url-pattern></servlet-mapping>3、配置springMVC-servlet.xml文件<beans xmlns="/schema/beans"xmlns:context="/schema/context"xmlns:p="/schema/p"xmlns:mvc="/schema/mvc"xmlns:xsi="/2001/XMLSchema-instance"xmlns:dwr="/schema/spring-dwr"xsi:schemaLocation="/schema/beans/schema/beans/spring-beans-3.2.xsd/schema/context/schema/context/spring-context.xsd/schema/spring-dwr/schema/spring-dwr-3.0.xsd/schema/mvc/schema/mvc/spring-mvc-3.2.xsd"><bean class="org.springframework.web.servlet.view.ContentNegotiatingViewResolver"> <property name="mediaTypes"><map><entry key="json" value="application/json"></entry><entry key="xml" value="text/xml"></entry><entry key="htm" value="text/html"></entry></map></property></bean><context:component-scan base-package="com.pfxt.controller" /><mvc:annotation-driven /><mvc:resources mapping="/resources/**" location="/WEB-INF/resources/" /><!-- 对模型视图名称的解析，在请求时模型视图名称添加前后缀--><beanclass="org.springframework.web.servlet.view.InternalResourceViewResolver"><property name="viewClass"value="org.springframework.web.servlet.view.JstlView" /><property name="prefix" value="/WEB-INF/jsp/" /><property name="suffix" value=".jsp" /></bean><!-- DWR配置--><bean id="simpleUrlHandlerMapping" class="org.springframework.web.servlet.mvc.SimpleControllerHandlerAdapter" /><!-- 要求dwr在spring容器中检查拥有@RemoteProxy 和@RemoteMethod注解的类。

1.1跟我学DWR框架技术——应用DWR框架实现无刷新页面的数据查询的Web应用示例（第二部分）1.1.1实现本示例的客户端相关的程序代码1、设计一个查询页面showUserInfoByDWR.jsp2、部署该页面并在浏览器的URL地址栏中输入如下的测试页面地址http://127.0.0.1:8080/webcrm/dwrdemo/showUserInfoByDWR.jsp（1）查询方式选择为“根据ID查询”（2）查询方式选择为“根据性别查询”3、页面的代码示例内容<%@ taglib prefix="c" uri="/jsp/jstl/core"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>蓝梦集团CRM系统的首页</title><link href="${pageContext.request.contextPath}/css/pageContentStyle.css"rel="stylesheet" type="text/css" /><script language="javascript"src="${pageContext.request.contextPath}/javascript/commonJavaScript.js"type="text/javascript"></script><script language="JavaScript" type="text/javascript">function showUserIDInput(){document.getElementById("userIDTableRow").style.display = "inline";document.getElementById("userSexTableRow").style.display = "none";}function showUserSexInput(){document.getElementById("userIDTableRow").style.display = "none";document.getElementById("userSexTableRow").style.display = "inline";}</script></head><body><jsp:include page="/commonPage/pageHead.jsp" ></jsp:include><jsp:include page="/commonPage/navMenuBar.jsp" ></jsp:include><br/><div id="someOnePageContent" ><form action="#" method="post" name="dwrForm" ><table width="350" border="1"><tr><td colspan="2">选择查询方式：<br /><input checked="checked" type="radio" name="searchType"onclick="showUserIDInput()" />根据ID查询&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="searchType"onclick="showUserSexInput()" />根据性别查询</td></tr><tr style="display:inline" id="userIDTableRow"><td colspan="2">输入用户ID：<input type="text" name="userID" id="userID"onblur="showOneUserInfoByID(this.value)"/></td></tr><tr style="display:none" id="userSexTableRow"><td colspan="2">请选择性别类型：<input checked="checked" type="radio" id="userSexType"onclick="showUserInfoBySex(this.value)"name="userSexType" value="1" />男&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="userSexType" id="userSexType" value="0"onclick="showUserInfoBySex(this.value)" />女</td></tr><tr id="showErrorInfo" style="background-color:#FF9900;display:none"><td colspan="2" align="center" id="errorInfoPosition"></td></tr><tr><td colspan="2" align="center"><input type="submit" value="提交" name="submitButton" id="submitButton"disabled />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="取消"/></td></tr></table></form></div><jsp:include page="/commonPage/authorInfo.jsp" ></jsp:include></body></html>4、再分别向服务器组件发送请求——调用服务器端组件中的方法（1）添加与DWR有关的*.js文件的引用和事件响应函数<%@ page pageEncoding="gb2312"%><%@ taglib prefix="c" uri="/jsp/jstl/core"%><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="/1999/xhtml"><head><title>蓝梦集团CRM系统在线信息显示页面</title><meta http-equiv="pragma" content="no-cache" /><meta http-equiv="cache-control" content="no-cache" /><meta http-equiv="expires" content="0" /><meta http-equiv="keywords" content="蓝梦集团,CRM,账户" /><meta http-equiv="description" content="这是蓝梦集团CRM系统" /><link href="<c:url value='/css/pageContentStyle.css'/>" rel="stylesheet" type="text/css" /> <script language="javascript" src="<c:url value='/javascript/commonJavaScript.js'/>"type="text/javascript"></script><script language="JavaScript" type="text/javascript">function showUserIDInput() {// $ = document.getElementByIddocument.getElementById("userIDTableRow").style.display = "inline";document.getElementById("userSexTableRow").style.display = "none";}function showUserSexInput(){document.getElementById("userSexTableRow").style.display = "inline";document.getElementById("userIDTableRow").style.display = "none";}</script><script language="javascript"src="${pageContext.request.contextPath}/javascript/dwrDemoJavaScript.js"type="text/javascript"></script><script type='text/javascript'src='${pageContext.request.contextPath}/dwr/interface/userInfoManageBean.js'></script> <script type='text/javascript'src='${pageContext.request.contextPath}/dwr/engine.js'></script><script type='text/javascript'src='${pageContext.request.contextPath}/dwr/util.js'></script></head><body><jsp:include page="/commonPage/pageHead.jsp" ></jsp:include><jsp:include page="/commonPage/navMenuBar.jsp" ></jsp:include><br/><div id="someOnePageContent" ><form action="#" method="post" name="dwrForm" ><table width="350" border="1"><tr><td colspan="2">选择查询方式：<br /><input checked="checked" type="radio" name="searchType"onclick="showUserIDInput()" />根据ID查询&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="searchType" onclick="showUserSexInput()" />根据性别查询</td></tr><tr style="display:inline" id="userIDTableRow"><td colspan="2">输入用户ID：<input type="text" name="userID"onblur="showOneUserInfoByID(this.value)"/></td></tr><tr style="display:none" id="userSexTableRow"><td colspan="2">请选择性别类型：<input checked="checked" type="radio" id="userSexType"onclick="showUserInfoBySex(this.value)"name="userSexType" value="1" />男&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="userSexType" id="userSexType" value="0"onclick="showUserInfoBySex(this.value)" />女</td></tr><tr id="showErrorInfo" style="background-color:#FF9900;display:none"><td colspan="2" align="center" id="errorInfoPosition"></td></tr><tr><td colspan="2" align="center"><input type="submit" value="提交" name="submitButton" id="submitButton"disabled />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" value="取消"/></td></tr></table></form></div><br><table width="800" border="1" align="center" id="userInfoTable" style="display:none" bgcolor="#F0F8FF" bordercolorlight="#4DA6FF" bordercolordark="#ECF5FF"><thead><tr><th width="62"><div align="center">用户名称</div></ th><th width="104"><div align="center">密码回答问题</div></ th>< th width="134"><div align="center">密码回答问题的答案</div></ th>< th width="87"><div align="center">邮件地址</div></ th>< th width="80"><div align="center">用户照片</div></ th>< th width="149"><div align="center">注册时间</div></ th>< th width="64"><div align="center">修改</div></ th>< th width="68"><div align="center">删除</div></ th></tr></thead><tbody id="userInfoItems"></tbody></table><br/><jsp:include page="/commonPage/authorInfo.jsp" ></jsp:include></body></html>（2）在dwrDemoJavaScript.js中增加下面的JavaScript方法以实现按照userID来查询单个用户的信息function showOneUserInfoByID(inputedUserID){}function showUserInfoBySex(userSexTypeD){}（3）再测试该页面5、编程dwrDemoJavaScript.js中的如下的函数以实现按照userID来查询单个用户的信息（1）编程showOneUserInfoByID函数并识别是否有查询结果数据function showOneUserInfoByID(inputedUserID){userInfoManageBean.findOneUserInfo(inputedUserID, showOneUserInfoByIDCallBackFun);}function showOneUserInfoByIDCallBackFun(returnOneUserInfoVO){ if(returnOneUserInfoVO==null){// window.alert("在本系统中没有您所提供的用户ID值的用户信息！");document.getElementById("showErrorInfo").style.display = "inline"; //将显示错误信息的表格行正常显示document.getElementById("errorInfoPosition").innerHTML ="在本系统中没有您所提供的"+document.getElementById("userID").value+"用户ID值的用户信息！";document.getElementById("userID").focus();document.getElementById("userInfoTable").style.display = "none"; //将显示用户信息的表格行进行隐藏document.getElementById("submitButton").disabled = true; //将“提交”按钮继续改变为不可用状态return;}// 如果有查询结果则显示输出。

1.1跟我学DWR框架——如何应用DWR框架中的回调机制及应用示例1.1.1DWR框架中的回调机制及相关的应用示例1、DWR框架中的回调机制（1）在DWR框架中是如何实现AJAX技术中的“异步”功能由于DWR框架是根据dwr.xml生成和Java代码类似的JavaScript代码，因此在DWR 框架中通过引入回调函数来实现Ajax的异步调用特性——当执行的结果被返回时，DWR 框架会调用这个回调函数。

（2）回调函数定义的要求通常我们都需要传递外部信息给一个回调函数，因此所有的回调函数都应该只有一个参数——参数就是从远程方法返回的值，从而实现将服务器端的组件的方法的返回值给回调函数。

如下为代码示例：function callbackFunc(dataFromServer){// do something with dataFromServer and dataFromBrowser …}2、DWR框架中的回调机制的某个示例<%@ page contentType="text/html; charset=GBK" %><html><head><title> 体现DWR框架中的回调机制的Demo示例</title><script type='text/javascript'src='/DWRWebTest/dwr/interface/JDate.js'></script><script type='text/javascript' src='/DWRWebTest/dwr/engine.js'></script><script type='text/javascript' src='/DWRWebTest/dwr/util.js'></script><script language="javascript">function showTime(){JDate.toString(callBackFun);}callBackFun = function(toStringReturnTimeString){alert("当前的时间是："+toStringReturnTimeString);}</script></head><body bgcolor="#ffffff"><a href="#" onclick="javascript:showTime()">点击我可以获得当前的时间</a></body></html>3、DWR框架中的回调机制与RMI 或者 SOAP等其它的实现机制的不同这种从远程的 Java 方法到 JavaScript 程序的方式给 DWR框架使用者一个感觉，好像传统的 RPC 方式，比如 RMI 或者 SOAP，事实上与之相比 DWR 的优势在于它不需要任何浏览器插件或者某种客户端的代理程序。

1.1如何运行DWR框架中所内带的Demo示例以了解技术细节1.1.1熟悉和了解DWR框架的开发过程1、DWR框架高度依赖于XML的解析实现技术JDK1.4.2 之前的 JDK 版本不完全支持 XML（或者具有一个包含重大 bug 的解析器）。

请确保使用的JDK是 JDK 1.4.2 或更高的版本。

（1）下载和安装DWR的系统包（2）将DWR的系统包的dwr.jar放到我们的Web应用中的WEB-INF/lib目录下（3）在我们的站点中的web.xml中部署其uk.ltd.getahead.dwr.DWRServlet（注意不同的DWR 版本在此方面的不同！）（4）再对我们系统中所需要使用的dwr.xml进行配置（5）在我们的系统页面中使用远程JavaBean（采用标准的JavaScript的语法来进行调用）2、下载和安装DWR框架相关的系统程序包（1）下载DWR框架的最新版本的系统库文件（2）下载dwr.war 和dwr.jar 系统库文件其中dwr.war文件是一个演示的应用程序，其中也包含一些有用的诊断测试和单元测试等示例。

而dwr.jar 文件是实际的库文件，应该将其加入到应用项目的Web应用系统中。

（3）帮助文档/dwr/documentation（4）中文帮助文档/display/dwrcn/Home（5）Demo示例/dwr/examples3、运行DWR框架内带的Demo示例以了解技术实现的细节（1）将dwr.war.zip文件解开产生出dwr.war目录（2）然后部署dwr.war目录中的示例Web 应用程序并将其Context的名称改变为dwr，如下为操作结果的示例图。

（3）启动应用服务器并测试DWR的Web 应用程序下面我们浏览其Demo示例来体验DWR所能够实现的各种功能效果，现在，我们在浏览器中输入DWR的测试应用程序的页面：http://localhost:8080/dwr/。

1.1跟我学DWR框架技术——应用DWR框架开发实现多级关联的选择框应用示例在设计数据库查询页面时，下拉菜单是经常使用的元素。

很多时候你会希望选择了下拉菜单的一项后，相应的另一下拉菜单的内容会随之改变。

这种功能可以通过刷新页面来实现，但界面显得不那么友好。

在本文介绍例子中，不需要刷新页面便可达到目的。

当在下拉菜单中选择了一个省份后，另一下拉菜单会出现该省份的一些城市供选择。

下面另外DWR实现“用户名称的实时校验”和“关联的选择框”的表单。

1.1.1构建本示例项目中的相关程序及Web页面1、在项目中再添加一个业务接口（1）提供一个接口CityManageInterface，包名称为com.px1987.dwrexampl.model（2）在该接口中提供下面的方法定义package com.px1987.dwrexampl.model;import java.util.*;public interface CityManageInterface{public boolean checkUserNameValid(String userName);public HashMap getCityNameInfo(String privanceName);}2、为该接口提供一个实现类（1）类名称为CityManageBean，包名称为com.px1987.dwrexampl.model（2）编程CityManageBean程序类该类中的checkUserNameValid方法实现对用户名称进行检查，而getCityNameInfo方法主要是实现根据“省名称”获得其对应的“城市名称”。

package com.px1987.dwrexampl.model;import java.util.HashMap;public class CityManageBean implements CityManageInterface{public CityManageBean(){}public boolean checkUserNameValid(String userName)boolean okOrNot=false;if(userName.equals("yang")) //实际应该改变为对数据库系统的访问{okOrNot=true;}else{okOrNot=false;}return okOrNot;}public HashMap getCityNameInfo(String privanceName){ //实际应该改变为对数据库系统的访问HashMap cityNameHashMap =new HashMap();if (privanceName.equals("beijing")){cityNameHashMap.put("海淀","海淀");cityNameHashMap.put("朝阳","朝阳");cityNameHashMap.put("西城","西城");cityNameHashMap.put("东城","东城");}else if (privanceName.equals("hebei")){cityNameHashMap.put("石家庄", "石家庄");cityNameHashMap.put("邯郸", "邯郸");cityNameHashMap.put("保定", "保定");cityNameHashMap.put("衡水", "衡水");}else if (privanceName.equals("henan"))cityNameHashMap.put("郑州", "郑州");cityNameHashMap.put("驻马店", "驻马店");cityNameHashMap.put("郑州1", "郑州1");cityNameHashMap.put("郑州2", "郑州2");}else if (privanceName.equals("jiangxi")){cityNameHashMap.put("南昌", "南昌");cityNameHashMap.put("九江", "九江");cityNameHashMap.put("景德镇", "景德镇");cityNameHashMap.put("吉安", "吉安");}return cityNameHashMap;}}3、将该JavaBean部署为远程JavaBean以便能够在页面中访问它（1）在我们的dwr-timeBean.xml文件中添加对它的配置项目<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "/dwr/dwr10.dtd"><dwr><allow><create creator="new" javascript="timeInfoJavaBean" scope="application"><param name="class" value="com.px1987.dwrexampl.model.TimeInfoJavaBean"/><include method="getSystemTime"/><include method="setOneTimeInfoVOBean"/></create><create creator="new" javascript="cityManageBean" scope="application"> <param name="class" value="com.px1987.dwrexampl.model.CityManageBean"/><include method="getCityNameInfo"/><include method="checkUserNameValid"/></create><convert converter="bean" match="com.px1987.dwrexampl.model.TimeInfoVOBean"> <param name="include" value="hourText,minuteText,secondText"/> </convert></allow></dwr>（2）编译该项目并再次部署本项目，在浏览器中查看其*.js文件名称：输入http://localhost:8080/DWRWebTest/dwr/index.html然后点击上面的“cityManageBean”的超链接，将出现下面的内容从而获得在页面中对该JavaBean进行远程引用时的*.js文件名称<script type='text/javascript' src='/DWRWebTest/dwr/interface/cityManageBean.js'></script>（3）也可以对我们的业务组件中的方法在线测试1）对checkUserNameValid方法在线测试2）对getCityNameInfo方法在线测试与代码中的实际返回的值保持一致。

1.1跟我学DWR框架——如何应用DWR框架中的JavaScript系统库及应用示例1.1.1DWR框架中的util.js系统库及应用示例1、DWR框架中的util.js系统库（1）DWR框架中的util.js系统库的主要作用util.js系统库主要包含了一些实用的工具函数来帮助开发人员应用JavaScript数据（例如从服务器返回的数据）来操作Web应用系统中的Web页面中的各个元素。

2、DWRUtil.addOptions方法的应用示例（1）数组参数——DWRUtil.addOptions(selectid, array)1）代码示例<script type="text/javascript">var arrayFive = [ 'One', 'Two', 'Three', 'Four', 'Five' ];function testAddOptionsBasic(){DWRUtil.addOptions('addOptionsBasic', arrayFive);if (DWRUtil.getValue('addOptionsBasic') == "One"){success();}if (DWRUtil.getText('addOptionsBasic') == "One"){success();}}</script>2）示例代码的执行结果示图<select id="addOptionsBasic"> </select>注意：此形式的函数产生的列表框中的key和value相同。

最后产生出如下的<select>标签：<select id ="addOptionsBasic" name="addOptionsBasic"><option value="One" selected>One</option><option value="Two">Two</option><option value="Three">Three</option><option value="Four">Four</option><option value="Five">Five</option></select>（2）对象数组（指定text）1）应用要点DWRUtil.addOptions(selectid, data, prop) 用每个数组元素创造一个option，option的值由数组中的value决定，而显示的内容则由数组中的name决定。

DWR(Direct Web Remoting)是一个WEB远程调用框架.利用这个框架可以让AJAX开发变得很简单.利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地客户端调用一样(DWR根据Java类来动态生成JavaScrip代码).DWR确实是一个非常优秀的项目，它通过反射，将java翻译成javascript，然后利用回调机制，轻松实现了javascript调用Java代码。

其大概开发过程如下：1.编写业务代码，该代码是和dwr无关的。

2.确认业务代码中哪些类、哪些方法是要由javascript直接访问的。

3.编写dwr组件，对步骤2的方法进行封装。

4.配置dwr组件到dwr.xml文件中，如果有必要，配置convert，进行java和javascript类型互转。

5.通过反射机制，dwr将步骤4的类转换成javascript代码，提供给前台页面调用。

5.编写网页，调用步骤5的javascript中的相关方法（间接调用服务器端的相关类的方法），执行业务逻辑，将执行结果利用回调函数返回。

6.在回调函数中，得到执行结果后，可以继续编写业务逻辑的相关javascript代码。

下面以用户注册的例子，来说明其使用。

（注意，本次例子只是用于演示，说明DWR的使用，类设计并不是最优的）。

1.先介绍下相关的Java类User: 用户类，public class User {//登陆ID，主键唯一private String id;//姓名private String name;//口令private String password;//电子邮件private String email;//以下包含getXXX和setXXX方法.......}UserDAO：实现User的数据库访问，这里作为一个演示，编写测试代码public class UserDAO {//存放保存的数据private static Map dataMap = new HashMap();//持久用户public boolean save(User user) {if (dataMap.containsKey(user.getId()))return false;System.out.println("下面开始保存用户");System.out.println("id："+user.getId());System.out.println("password："+user.getPassword());System.out.println("name："+user.getName());System.out.println("email："+user.getEmail());dataMap.put(user.getId(), user);System.out.println("用户保存结束");return true;}//查找用户public User find(String id) {return (User)dataMap.get(id);}}DWRUserAccess：DWR组件，提供给javascript访问的。

1.1跟我学DWR框架技术——应用DWR框架实现显示在线用户信息的应用示例（第三部分）1.1.1在项目中添加与Struts框架相关的表单组件和Action组件1、添加ActionForm组件程序类名称为erInfoActionForm，程序包名称为org.apache.struts.action.ActionForm，userInfoActionForm，请求的URL地址为/showUserInfo2、添加Action类程序类名称为com.px1987.dwrexampl.action.SearchUserInfoAction，基类选择为org.apache.struts.action.Action。

3、编程该Action类的程序代码，代码示例如下package com.px1987.dwrexampl.action;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import org.apache.struts.action.Action;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionForward;import org.apache.struts.action.ActionMapping;import erInfoActionForm; public class SearchUserInfoAction extends Action{public ActionForward execute(ActionMapping mapping, ActionForm form, HttpServletRequest request, HttpServletResponse response) { UserInfoActionForm userInfoActionForm = (UserInfoActionForm) form;return mapping.findForward("SearchSuccess");}}4、添加查询的同步显示的JSP页面SearchSuccess.jsp（1）页面创建的局部截图（2）SearchSuccess.jsp页面的代码示例<%@ page language="java" pageEncoding="gb2312"%><%@ taglib uri="/tags-bean" prefix="bean" %><%@ taglib uri="/tags-html" prefix="html" %><%@ taglib uri="/tags-logic" prefix="logic" %><%@ taglib uri="/tags-tiles" prefix="tiles" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html:html lang="true"><head><html:base /><title>SearchSuccess.jsp</title><meta http-equiv="pragma" content="no-cache"><meta http-equiv="cache-control" content="no-cache"><meta http-equiv="expires" content="0"><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="This is my page"><!--<link rel="stylesheet" type="text/css" href="styles.css">--></head><body>您的查询成功地执行了！</body></html:html>5、为Action类提供Forward的定义（1）创建的过程局部截图（2）创建的结果截图（1）部署本示例项目（2）在浏览器的URL地址栏中输入如下的测试地址：http://localhost:8080/DWRWebTest/userManager/showUserInfo.jsp（2）改变查询方式为按照部门名称来查询（3）输入正确的UserID后，将能够获得下面的信息（4）输入错误的UserID后，将获得下面的错误信息1.1.2对前面的实现进一步改进以访问数据库系统1、数据连接接口和实现类组件2、DAO组件的接口和实现类3、准备数据库数据库表 userInfo，在该表中至少包含userName和userPassWord两个字段。