跟我学DWR框架技术——如何应用MyEclipse开发工具开发实现基于DWR框架的Web应用示例(第二部分)

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框架应用技术及示例 (2)1.1.1 DWR（Direct Web Remoting）和AJAX本质的差别 (2)1.1.2 运行其Demo示例以了解技术细节 (10)1.1.3 体验DWR的开发过程 (17)1.1DWR框架应用技术及示例1.1.1DWR（Direct Web Remoting）和AJAX本质的差别1、使用AJAX技术时的实现难度（1）使用AJAX必须要对各种前台技术非常了解因为在Ajax中主要包含如下的关键技术●使用XHTML和CSS标准化呈现；●使用DOM实现动态显示和交互, 当需要在JavaScript 代码和服务器之间传递XML 和改变HTML 表单的时候，我们需要DOM技术；●使用XML和XSLT进行数据交换与处理；●使用XMLHttpRequest进行异步数据读取；●最后用JavaScript绑定和处理所有数据；这对于一个普通的Java程序员来说，这种要求是有点过分了！如何使普通的java程序员快速进行AJAX的开发呢，那么就要求我们使用一些AJAX框架，来屏蔽各种前台技术。

（2）详细学习Ajax 时的“低级”编码并不是那么容易所有 Ajax 代码都使用了现代浏览器（包括最新版的 Internet Explorer and Firefox）的一个内置对象，叫做XMLHttpRequest。

JavaScript 代码可通过该对象异步地调用服务器。

不幸的是，不同的浏览器以稍微不同的方式实现XMLHttpRequest对象。

同一浏览器（例如 Internet Explorer）的更复杂的混合、不同版本实现该对象的方式不同。

再加上JavaScript 本身通常对于不同的浏览器和版本是不同的，因此不好对付。

（3）XML 请求和响应在客户端浏览器和服务器后端之间传输的标准化问题由于缺乏关于数据应该如何通过 XML 请求和响应在浏览器代码和服务器后端之间传输的标准化，因而事情更加复杂。

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决定。

w <」avarunctiori pcpijleTeLiU(^Td) netSMTi 沏网【】f *1". *l*i *3H >jDWRUtil addOptHjns(，Blrshd"^ data);C [T J ZIDWRDWR 框架介绍及使用方法—— giser062 2014-12-041 DWR 介绍DWR 是一个RPC 类库，可以很容易的用Javascript 调用Java 方 法，也可以用Java 调用Javascript 方法(也称为 Reverse AjaX 。

主页：/dwr/index.html 下载：java. net/projects/dwr/dow nloads/dow nload/DWR_3.x/3.0_RC3/dw r.jar官方文档：directwebremoti /dwr/docume ntati on/i ndex.html1.1 Javascript 调用 JavaAjfix serviceisttLsub ic classpg ic Stnny[] gE^ptc~s()HTML / Javascriptrunctlon rvrntHonctiffrC)page tiTnn«Javapqg-^.html1.2 Java 调用 Javascript (Reverse AjaX2快速使用指南2.1下载安装dwr JAR 文件下载dwr.jar 文件，并且复制到 Web 工程的WEB-INF/lib 目录里2.2 下载安装 Commons Logging JAR^件dwr.jar 依赖 com mon s-loggi ng.jar ,下载该 com mon s-logg in g.jar ， 并且复制到 Web 工程的WEB-INF/lib 目录里2.3 配置 DWR servlet将下面的Servlet 配置容添加到 Web 应用程序的 WEB-INF/web.xml 里。

DWR(direct web remote)是一个基于服务器端的ajax框架。

通过该框架，我们可以使用js来直接调用java方法。

是一个基于浏览器其端的ajax框架，只需要引入即可使用。

Jquery:1.引入jar包到WEB-INF/lib2.中写入：<servlet><servlet-name>dwr-invoker</servlet-name><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.建立java类(普通java类即可，不是servlet)TestClasspublic class TestClass {public void testMethod1(){"hello dwr!");}}4.在/WEB-INF/中配置java类：<xml version="" encoding="UTF-8">5.<!DOCTYPE dwr PUBLIC "-html中使用，需要首先引入：(需要保证dwr这个目录位于web应用的根目录)<script src='dwr/interface/'></script><script src='dwr/'></script><script src='dwr/'></script>6.在javascript方法中调用后台java类方法：function test(){();}用dwr调用有参数或有返回值的java方法：f unction test(){("bbb",parseInfo);nnerHTML=data;}DWR调用的简单顺序：1.js调用相应的方法发送请求。

1.1跟我学DWR框架技术——应用DWR框架实现无刷新页面的数据查询的Web应用示例（第三部分）1.1.1对前面的实现进一步改进以访问数据库系统1、数据连接接口和实现类组件2、DAO组件的接口和实现类3、准备数据库数据库表名称为userInfo，在该表中至少包含userName和userPassWord两个字段。

注意：上面的内容已经在前面实现过，因此可以不需要重复！4、修改UserInfoManageBean中的findOneUserInfo方法为下面的代码package com.px1987.webcrm.model.imple;import ng.reflect.InvocationTargetException;import java.util.List;import mons.beanutils.BeanUtils;import erManageDAOJDBCImple;import erManageDAOInterface;import erInfoPO;import com.px1987.webcrm.exception.WebCRMException;import erInfoManageInterface;public class UserInfoManageBean implements UserInfoManageInterface { public UserInfoManageBean() {}@Overridepublic boolean checkUserNameValid(String userName) {UserManageDAOInterface oneUserManageDAOBean=null;boolean checkUserNameExistResult=false;try {oneUserManageDAOBean=new UserManageDAOJDBCImple();} catch (WebCRMException e) {e.printStackTrace();}try {checkUserNameExistResult=oneUserManageDAOBean.checkOneUserInfoExist(userName);} catch (WebCRMException e) {e.printStackTrace();}return checkUserNameExistResult;}public UserInfoVO findOneUserInfo(String userID){UserManageDAOInterface oneUserManageDAOBean=null;UserInfoPO oneReturnUserInfoPO=null;UserInfoVO oneUserInfoVO=null;try {oneUserManageDAOBean=new UserManageDAOJDBCImple();} catch (WebCRMException e) {e.printStackTrace();}try {oneReturnUserInfoPO=oneUserManageDAOBean.queryOneUserInfo(userID);} catch (WebCRMException e) {e.printStackTrace();System.out.println("出现了错误："+e.getMessage());}if(oneReturnUserInfoPO==null){return null;}oneUserInfoVO=new UserInfoVO();try {BeanUtils.copyProperties(oneUserInfoVO, oneReturnUserInfoPO);}catch (InvocationTargetException e) {e.printStackTrace();}catch (IllegalAccessException e){e.printStackTrace();}return oneUserInfoVO;}public List<UserInfoVO> findSomeUserInfo(String userSex){//该方法后面再实现return null;}}注意：此时的VO对象中的各个属性来自于数据库表中的记录。

1.1跟我学DWR框架技术——应用MyEclipse开发工具基于DWR框架的Web应用（第一部分）1.1.1构建本示例的Web应用系统1、在Eclipse中创建一个Web项目项目名称为DWRWebTest，同时指定其Web应用的名称为DWRWebTest。

2、在项目中添加Struts相关的系统库3、设置项目的包名称为com.px1987.dwrexampl4、添加DWR的系统包文件（1）导入我们的系统包（2）定位到我们的系统包所在的目录处（3）最后将产生出下面的状态5、在web.xml中部署DWR的Servlet（1）DWR 1.14版的uk.ltd.getahead.dwr.DWRServlet的基本配置 <servlet><display-name>DWR Servlet</display-name><servlet-name>dwr-invoker</servlet-name><servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> </servlet><servlet-mapping><servlet-name>dwr-invoker</servlet-name><url-pattern>/dwr/*</url-pattern></servlet-mapping>（2）为该uk.ltd.getahead.dwr.DWRServlet提供各种配置参数DWR 1.14版最后的配置内容如下<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4"xmlns="/xml/ns/j2ee"xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/xml/ns/j2ee/xml/ns/j2ee/web-app_2_4.xsd"><display-name>DWRWebTest</display-name><servlet><servlet-name>dwr-invoker</servlet-name><servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class> <init-param><param-name>logLevel</param-name><param-value>DEBUG</param-value></init-param><init-param><param-name>config</param-name><param-value>/WEB-INF/dwr.xml</param-value></init-param><param-name>debug</param-name><param-value>true</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>dwr-invoker</servlet-name><url-pattern>/dwr/*</url-pattern></servlet-mapping></web-app>DWR 2.0版最后的配置内容如下<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4"xmlns="/xml/ns/j2ee"xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/xml/ns/j2ee/xml/ns/j2ee/web-app_2_4.xsd"><display-name>DWRWebTest</display-name><servlet><servlet-name>dwr-invoker</servlet-name><servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param><param-name>logLevel</param-name><param-value>DEBUG</param-value></init-param><init-param><param-name>config</param-name><param-value>/WEB-INF/dwr.xml</param-value></init-param><init-param><param-name>debug</param-name><param-value>true</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>dwr-invoker</servlet-name><url-pattern>/dwr/*</url-pattern></servlet-mapping></web-app>6、添加log4J（1）DWR中的log的实现并没有强制某个Logging的形式DWR并不需要要求我们强制某个Logging的形式，可以为各种的Logging的实现。

利用DWR实现“实时校验”------验证用户注册时的用户名称是否重名的应用1、验证用户注册时的用户名称是否重名的应用（1）常规的实现方法在某个用户注册的应用中，当用户注册时检查用户名是否可用，以前的做法是在旁边加一个按钮，点击“检查”，就向服务器发出请求，然后等待……服务器返回信息，继续操作。

（2）利用Ajax技术来实现以上的操作则不必等待服务器返回信息用户输入用户名或企业名称的时候，当输入文本框失去焦点（用户的名称输入完毕）的时候，则会自动向服务器发出请求，用户继续做下面的操作，不必点击“检查”，也不必等待服务器返回信息，检查与用户操作是异步的，可同时进行。

当服务器信息返回的时候，会自动在面页相应位置显示返回信息，不必刷新页面，相当于局部刷新的效果。

（3）本例的时序图2、在Web应用中添加一个包含有注册表单的JSP页面（1）页面名称为userRegister.jsp（2）编辑该JSP以添加一个实现注册的表单，并对用户在注册表单中所输入的用户的名称进行实时检查<%@ page language="java" pageEncoding="GB18030"%><%@ taglib uri="/tags-bean" prefix="bean" %><%@ taglib uri="/tags-html" prefix="html" %><%@ taglib uri="/tags-logic" prefix="logic" %><%@ taglib uri="/tags-tiles" prefix="tiles" %><%String webContext = request.getContextPath();%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html:html lang="true"><head><html:base /><title>userRegister.jsp</title><script type='text/javascript' src='<%=webContext%>/webapp.js'></script><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><html:form action="/register.do" method="post" ><html:hidden property="action" value="2"/>用户名称：<html:text property="userName" onblur="checkUserNameValid(this.value)" style="background:#FFFFFF"/><div id="showStr" style="background-color:#FF9900;display:none"> </div><br /> 用户密码：<html:password property="userPassWord" /><br /><html:submit property="submitButton" value="提交" disabled="true"/></html:form></body></html:html>3、在webapp.js中添加下面的方法function checkUserNameValid(inputedUserName){userInfoManageBean.checkUserNameValid(inputedUserName,checkUserNameValidCallBackFun); }checkUserNameValidCallBackFun = function(returnCheckUserNameBoolean){if(!returnCheckUserNameBoolean){document.getElementById ("userName").style.background= "#FFFFFF";$("showStr").style.display = "none"; // $=document.getElementById$("submitButton").disabled = false;}else{$("showStr").style.display = "";$("userName").style.background= "#FF0000";$("showStr").innerText = "您所输入的用户名称已经存在了！";$("submitButton").disabled = true;}}5、添加ActionForm组件com.px1987.dwrexampl.actionform.RegisterActionForm ，registerActionForm，org.apache.struts.action.ActionFormuserPassWord 和userNameprivate String userName;private String userPassWord;String action=null;/** Generated by MyEclipse Struts* Template path: templates/java/JavaClass.vtl*/package com.px1987.dwrexampl.actionform;import javax.servlet.http.HttpServletRequest;import org.apache.struts.action.ActionErrors;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionMapping;/*** MyEclipse Struts* Creation date: 09-21-2007** XDoclet definition:* @struts.form name="registerActionForm"*/public class RegisterActionForm extends ActionForm {* Generated fields*//** userName property */private String userName;/** userPassWord property */private String userPassWord;String action=null;/** Generated Methods*//*** Method validate* @param mapping* @param request* @return ActionErrors*/public ActionErrors validate(ActionMapping mapping,HttpServletRequest request) {// TODO Auto-generated method stubreturn null;}/*** Method reset* @param mapping* @param request*/public void reset(ActionMapping mapping, HttpServletRequest request) { // TODO Auto-generated method stub}/*** Returns the userName.* @return String*/public String getUserName() {return userName;}/*** Set the userName.* @param userName The userName to setpublic void setUserName(String userName) {erName = userName;}/*** Returns the userPassWord.* @return String*/public String getUserPassWord() {return userPassWord;}/*** Set the userPassWord.* @param userPassWord The userPassWord to set*/public void setUserPassWord(String userPassWord) {erPassWord = userPassWord;}public String getAction() {return action;}public void setAction(String action) {this.action = action;}}5、添加一个Action以对该表单进行响应和处理（1）类名称为RegisterAction，Type名称为com.px1987.dwrexampl.action. RegisterAction（2）/register将产生出该Action（3）编程该Actionpackage 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 com.px1987.dwrexampl.actionform.RegisterActionForm;import java.io.*;public class RegisterAction extends Action{public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response){RegisterActionForm registerActionForm = (RegisterActionForm) form;// TODO Auto-generated method stubreturn mapping.findForward("registerSuccess");}}7、添加registerSuccess.jsp<%@ page language="java" pageEncoding="GB18030"%><%@ 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>registerSuccess.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>8、registerSuccess5、添加一个实现对用户名称等信息进行检查的业务接口（1）业务组件接口为UserInfoManageInterface，包名称为com.px1987.dwrexampl.model在该接口中定义下面的方法package com.px1987.dwrexampl.model;public interface UserInfoManageInterface{public boolean checkUserNameValid(String userName);}6、添加一个实现对用户名称等信息进行检查的业务接口的实现类组件（1）实现类UserInfoManageBean，包名称为com.px1987.dwrexampl.model（2）编程该实现类package com.px1987.dwrexampl.model;public class UserInfoManageBean implements UserInfoManageInterface{public UserInfoManageBean(){// TODO 自动生成构造函数存根}public boolean checkUserNameValid(String userName){boolean okOrNot=false;if(userName.equals("yang")) //实际应该改变为对数据库系统的访问{okOrNot=true;}else{okOrNot=false;}return okOrNot;}}7、公开该业务类中的各个方法（1）在dwr-timeBean.xml文件中添加下面的内容<create creator="new" javascript="userInfoManageBean" scope="application"><param name="class" value="erInfoManageBean"/><include method="checkUserNameValid"/></create>（2）文件的完整内容为下面<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 2.0//EN" "/dwr//dwr20.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><convert converter="bean" match="com.px1987.dwrexampl.model.TimeInfoVOBean"> <param name="include" value="hourText,minuteText,secondText"/></convert><create creator="new" javascript="userInfoManageBean" scope="application"><param name="class" value="erInfoManageBean"/><include method="checkUserNameValid"/></create></allow></dwr>8、查看我们的业务类所对应的*.js文件（1）再部署该应用（2）输入http://localhost:8080/DWRWebTest/dwr/index.html进入DWR的在线测试页面然后点击上面的“userInfoManageBean”的超链接，将出现下面的内容从而获得在页面中对该JavaBean进行远程引用时的*.js文件名称<script type='text/javascript' src='/DWRWebTest/dwr/interface/userInfoManageBean.js'></script> （3）也可以对我们的业务组件中的方法在线测试或者9、在我们的userRegister.jsp中包含上面的各个*.js文件<%@ page language="java" pageEncoding="GB18030"%><%@ taglib uri="/tags-bean" prefix="bean" %><%@ taglib uri="/tags-html" prefix="html" %><%@ taglib uri="/tags-logic" prefix="logic" %><%@ taglib uri="/tags-tiles" prefix="tiles" %><%String webContext = request.getContextPath();%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html:html lang="true"><head><html:base /><title>userRegister.jsp</title><script type='text/javascript' src='<%=webContext%>/dwr/interface/userInfoManageBean.js'></script> <script type='text/javascript' src='<%=webContext%>/dwr/engine.js'></script><script type='text/javascript' src='<%=webContext%>/dwr/util.js'></script><script type='text/javascript' src='<%=webContext%>/webapp.js'></script><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><html:form action="/register.do" method="post" ><html:hidden property="action" value="2"/>用户名称：<html:text property="userName" onblur="checkUserNameValid(this.value)" style="background:#FFFFFF"/><div id="showStr" style="background-color:#FF9900;display:none"> </div><br /> 用户密码：<html:password property="userPassWord" /><br /><html:submit property="submitButton" value="提交" disabled="true"/></html:form></body></html:html>9、再部署并执行我们的userRegister.jsp（http://localhost:8080/DWRWebTest/userRegister.jsp）（1）当我们输入用户名称为：yang时，将出现下面的错误提示内容----表示该用户已经存在了。

1.1跟我学DWR框架技术——如何应用MyEclipse开发工具开发实现基于DWR框架的Web应用示例（第一部分）1.1.1构建项目及系统环境1、在Eclipse中创建一个Web项目名称为DWRWebTest，同时指定其Web应用的名称为DWRWebTest当然，也可以在原有的Web项目的基础上进一步扩展。

2、添加DWR的系统包（1）导入我们的系统包（2）定位到DWR系统包所在的目录处（3）最后将产生出下面的状态3、在web.xml中部署DWR的Servlet——下面为DWR 2.X或者3.X版最后的配置内容如下<?xml version="1.0" encoding="UTF-8"?><web-app version="2.4"xmlns="/xml/ns/j2ee"xmlns:xsi="/2001/XMLSchema-instance"xsi:schemaLocation="/xml/ns/j2ee/xml/ns/j2ee/web-app_2_4.xsd"><servlet><servlet-name>dwr-invoker</servlet-name><servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class> <init-param><param-name>config</param-name><param-value>/WEB-INF/dwr.xml</param-value></init-param><init-param><param-name>debug</param-name><param-value>true</param-value></init-param><init-param><param-name>logLevel</param-name><param-value>DEBUG</param-value></init-param><load-on-startup>1</load-on-startup></servlet><servlet-mapping><servlet-name>dwr-invoker</servlet-name><url-pattern>/dwr/*</url-pattern></servlet-mapping></web-app>注意其中的如下设置项目：<param-name>debug</param-name>是将DWR设置为调试方式，这样一方面可以在控制台中显示详细的运行状态信息，而且也还可以通过http://localhost:port/app/dwr/进入DWR所提供的在线测试页，可以看到部署的每个DWR 的Java类。

1.1跟我学DWR框架技术——应用DWR框架相关技术实现实时补全的Web应用示例1.1.1构建本示例项目的Web应用系统相关的程序和页面1、提供用户信息补全的业务层组件（1）接口InfoCompleteInterface，包名称为com.px1987.dwrexampl.model（2）设计该接口package com.px1987.dwrexampl.model;import java.util.List;public interface InfoCompleteInterface{public List getUserNameInfo(String userNamePart);}（3）实现类InfoCompleteImpl，包名称为com.px1987.dwrexampl.model（4）将产生出下面的状态2、编程InfoCompleteImpl实现类package com.px1987.dwrexampl.model;import java.util.*;import com.px1987.dwrexampl.dao.*;public class InfoCompleteImpl implements InfoCompleteInterface {{}public List getUserNameInfo(String userNamePart) {String selectSQL="select userName from UserInfo where userName like '%" + userNamePart+"%'";OperateDBInterface operateDBBeanID=new OperateDBBean();java.sql.ResultSet resultSet=operateDBBeanID.SelectDBData(selectSQL);List allUserNameInfo=new ArrayList();try{while(resultSet.next()){allUserNameInfo.add(resultSet.getString("userName"));}}catch(java.sql.SQLException e){e.printStackTrace();System.out.println("异常内容为："+e.getMessage());}finally{operateDBBeanID.closeDBCon();}return allUserNameInfo;}}3、将该业务组件类发布为远程组件-------在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><create creator="new" javascript="userInfoManageBean" scope="application"><param name="class" value="erInfoManageBean"/><include method="checkUserNameValid"/><include method="findOneUserInfo"/><include method="findSomeUserInfo"/></create><create creator="new" javascript="infoCompleteBean" scope="application"><param name="class" value="CompleteImpl"/> <include method="getUserNameInfo"/></create><convert converter="bean" match="com.px1987.dwrexampl.model.TimeInfoVOBean"> <param name="include" value="hourText,minuteText,secondText"/> </convert><convert converter="bean" match="erInfoVO"> <param name="include" value="userName,userDepartment,userAdminLevel,departAdminLevel,userImage,registerTime"/ ></convert></allow><signatures><![CDATA[import java.util.List;import ng.String;import erInfoManageBean;import erInfoVO;List<UserInfoVO> UserInfoManageBean.findSomeUserInfo(String userDepartment) ;List<String> getUserNameInfo(String userName);]]></signatures></dwr>4、在线查看该远程组件（1）启动服务器并输入http://localhost:8080/DWRWebTest/dwr/index.html（2）点击上面的infoCompleteBean链接，将出现下面的内容所要包含的*.js文件为<script type='text/javascript' src='/DWRWebTest/dwr/interface/infoCompleteBean.js'></script>（3）对getUserNameInfo方法进行在线测试注意：保证数据库服务正确启动，并且按照UserInfo数据库表中的实际数据来输入！4、添加一个infoComplete.jsp页面（1）在userManager目录中新建infoComplete.jsp页面（2）设计其内容<%@ 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" %><%String webContext=request.getContextPath();%><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html:html lang="true"><head><html:base /><script type='text/javascript' src='<%=webContext%>/dwr/engine.js'></script><script type='text/javascript' src='<%=webContext%>/dwr/util.js'></script><script type='text/javascript' src='<%=webContext%>/webapp.js'></script><script type='text/javascript' src='<%=webContext%>/dwr/interface/infoCompleteBean.js'></script><title>infoComplete.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><html:form action="/infoComplete.do" method="post" ><table width="308" border="0"><tr><td width="117"><div align="right">输入用户名称：</div></td><td width="181"><html:text property="userName" onkeyup="showUserNameInfo(this.value)"/></td></tr><tr><td>&nbsp;</td><td><table width="100%" border="1" id="dataTable" style="display:none" bordercolorlight="#4DA6FF" bordercolordark="#ECF5FF" bgcolor="#F0F8FF"><tr><td><html:select property="allUserNameInfo" onchange="userName.value=options[selectedIndex].value;"></html:select></td></tr></table></td></tr></table></html:form></body></html:html>5、在webapp.js中添加showUserNameInfo函数function showUserNameInfo(inputedUserName){if(inputedUserName==""||inputedUserName.length==0){$("dataTable").style.display = "none"; //将表格行隐藏return; //当没有输入时不发出请求}infoCompleteBean.getUserNameInfo(inputedUserName, showAllUserNameCallBackFun); }function showAllUserNameCallBackFun(returnSomeUserNameInfoList) //代表返回值的数组{if(returnSomeUserNameInfoList.length==0) //有匹配的数据吗---表示没有匹配的数据{$("dataTable").style.display = "none"; //将表格行隐藏return;}var userNameString="";$("dataTable").style.display = "";DWRUtil.removeAllOptions("allUserNameInfo");DWRUtil.addOptions('allUserNameInfo', returnSomeUserNameInfoList);}6、添加ActionForm表单类（1）类名称为CompleteActionForm、包名称为infoCompleteActionForm（2）在该表单组件类中添加如下的两个成员属性private String userName;private String allUserNameInfo;（3）完整的代码示例/** Template path: templates/java/JavaClass.vtl*/package com.px1987.dwrexampl.actionform;import javax.servlet.http.HttpServletRequest;import org.apache.struts.action.ActionErrors;import org.apache.struts.action.ActionForm;import org.apache.struts.action.ActionMapping;/*** MyEclipse Struts* Creation date: 09-28-2007** XDoclet definition:* @struts.form name="infoCompleteActionForm"*/public class InfoCompleteActionForm extends ActionForm { /** Generated fields*//** userName property */private String userName;private String allUserNameInfo;/** Generated Methods*//*** Method validate* @param mapping* @param request* @return ActionErrors*/public ActionErrors validate(ActionMapping mapping,HttpServletRequest request) {// TODO Auto-generated method stubreturn null;}/*** Method reset* @param mapping* @param request*/public void reset(ActionMapping mapping, HttpServletRequest request) { }/*** Returns the userName.* @return String*/public String getUserName() {return userName;}/*** Set the userName.* @param userName The userName to set*/public void setUserName(String userName) {erName = userName;}public String getAllUserNameInfo() {return allUserNameInfo;}public void setAllUserNameInfo(String allUserNameInfo) {this.allUserNameInfo = allUserNameInfo;}}7、添加Action类（1）类名称为CompleteAction、/infoComplete（2）编程InfoCompleteAction程序类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 CompleteActionForm;public class InfoCompleteAction extends Action{public ActionForward execute(ActionMapping mapping, ActionForm form,HttpServletRequest request, HttpServletResponse response) {InfoCompleteActionForm infoCompleteActionForm = (InfoCompleteActionForm) form;// TODO Auto-generated method stubreturn mapping.findForward("showInfo");}}8、添加返回的页面showInfo.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>showInfo.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>9、添加ForWard输入showInfo10、再部署并执行本应用（http://localhost:8080/DWRWebTest/userManager/infoComplete.jsp）并且在控制台中能够看到下面的执行结果-----多次向后台的业务方法进行请求调用。

将Dreamweaver和MyEclipse开发工具相互整合
1、在DW中新建一个Web项目sshchims
（1）项目名称为sshchims，路径指向WebRoot目录
（2）最终的结果
2、在项目中添加美工提供的页面模板及相关的资源文件
3、在DW中新建JSP页面、CSS和JS等程序——JSP中包含（引用）模板页
4、再测试userLogin.jsp页面
将能够看到在页面中应用了模板页中的相关的资源。

5、对JSP中的各种文件正确地进行定位
（1）方式一：以WebRoot站点根目录为定位基准并应用${pageContext.request.contextPath}动态获得当前项目的Web Context的名称字符串
<link href="${${pageContext.request.contextPath}}/css/skin.css" rel="stylesheet" type="text/css">
（2）方式二：采用<base>标签进行本页面——但该方式没有成功？
<base href="${${pageContext.request.contextPath}}/" />。

目录1.1 DWR的配置文件说明 (2)1.1.1 1、DWR的配置文件dwr.xml中的标签 (2)1.1.2 DWR的配置文件dwr.xml中的<create>标签的说明 (3)1.1.3 dwr.xml中的签名(Signatures) (16)1.1.4 DWR中的安全技术 (21)1.1DWR的配置文件说明1.1.11、DWR的配置文件 dwr.xml中的标签1、基本的格式任何一个dwr.xml的文件都需要包含DWR DOCTYPE的声明行，格式如下：2、整个配置文件的大体结构如下其中的<init>标签是申明被用来创建远程beans 而且这个类能被用来以某种过程转换。

大多数例子我们将不需要用它，如果我们想去定义一个新的Creator 或者Converter ，就要在此被申明。

在init 部分里有了定义只是告诉DWR 这些扩展类的存在，给出了如何使用的信息。

这时他们还没有被使用。

这种方式很像Java 中的import 语句。

多数类需要在使用前先import 一下，但是只有import 语句并不表明这个类已经被使用了。

每一个creator 和converter 都用id 属性，以便后面使用。

3、各个组成标签（1）<create>标签利用它来实现对远程对象（服务器端的JavaBean 组件）转变为客户端的JavaScript 对象。

（2）<convert>标签利用它来实现将服务器端的某中类的类型转变为JavaScript 中能够识别的对象类型。

（3）签名(Signatures)1.1.2 DWR 的配置文件 dwr.xml 中的<create>标签的说明1、dwr.xml 文件中的<create>标签的一般结构<allow><create creator ="..." javascript ="..." scope ="..."><param name="..." value="..."/><auth method="..." role="..."/><exclude method="..."/><include method="..."/>...</allow>2<allow><create creator="new" javascript="JDate" scope="application"><include method="toString"/></create></allow>上面的配置信息表示将java.util.Date提供给客户端调用,并且引用名称是JDate。

DWR框架入门教程2009-10-20 17:01DWR（Direct Web Remoting）是一个开放源码的使用 Apache 许可协议的解决方案，它包含服务器端 Java 库、一个 DWR Servlet 以及 JavaScript 库。

虽然DWR 不是 Java 平台上唯一可用的 Ajax-RPC 工具包，但是它是最成熟的，而且提供了许多有用的功能。

为什么要使用DWR，我们首先介绍基本AJAX流程，从中可以看到引入DWR会带来什么好处。

1、AJAX的基本介绍Ajax (Asynchronous JavaScript And XML)描述了一种使用混合了HTML(或XHTML)和层叠样式表作为表达信息,来创建交互式的Web应用的开发技术;文档对象模型（DOM）、JavaScript、动态地显示和与表达信息进行交互;并且，XMLHttpRequest对象与Web服务器异步地交换和处理数据。

使用AJAX，我们可以开发出有很好交互性的B/S程序，同时AJAX局部和异步刷新的特性也大大减小了对服务器和网络的压力。

对于非AJAX的B/S程序来说HTML、DOM、JS同样是不可或缺的关键技术，因此引入AJAX技术主要是增加了对于XMLHttpRequest对象的使用。

我们使用AJAX来开发一个简单的AJAX程序。

例1：服务端的TestAjaxServlet:public void doPost(HttpServletRequest req, HttpServletResponse res) throws java.io.IOException { res.getWriter().write("Getting Message uses AJAX directly!"); }请将些Servlet配置成ajax/testAjaxServlet.客户端的使用AJAX去调用服务端的TestAjaxServlet并响应：function getAjaxMessage() { var http_request = false; if(window.XMLHttpRequest) { // Mozilla, Safari,... http_request = new XMLHttpRequest(); if (http_request.overrideMimeType){ http_request.overrideMimeType("text/html"); } } else { if (window.ActiveXObject) { // IE try { http_request = newActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } } if (http_request === false) { alert("Cannot create XMLHTTP instance"); return false; } http_request.onreadystatechange = function (){ document.getElementById(‘MessageSpan’).innerHTML =http_request.responseText; }; http_request.open("POST",“ajax/testAjaxServlet.do“, true);http_request.setRequestHeader("Content-type","application/x-www-form-urlencoded");http_request.setRequestHeader("Content-length", parameters.length);http_request.setRequestHeader("Connection", "close");http_request.send(parameters); }当客户端调用getAjaxMessage()成功后，页面上的“MessageSpan”部分会出面“Getting Message uses AJAX directly!”，表明调用成功，且页面没有整体全部的刷新，在处理没有完成的时候，用户和页面上其它的UI交互并不受影响。

基于DWR框架的WEB应用的设计与实现
张栗;张凤元;危胜军
【期刊名称】《计算机技术与发展》
【年(卷),期】2008(018)008
【摘要】AJAX动态技术的广泛应用,增加了WEB项目开发的复杂性和难度.AJAX 框架技术有效地解决了这一问题,在实现功能的同时提高了开发效率,具有推广意义.讨论了AJAX技术的特点和应用情况,并针对基于AJAX的动态客户端开发中的效率问题,提出了使用DWR框架设计实现AJAX应用效果的实例解决方案,采用客户端脚本语言对服务器端远程调用技术完成动态显示功能,优化了开发效率,并给出动态HTML页面中部分代码和服务器端的设计方法.
【总页数】4页(P84-87)
【作者】张栗;张凤元;危胜军
【作者单位】北京化工大学,信息科学与技术学院,北京,100029;北京化工大学,信息科学与技术学院,北京,100029;北京理工大学,计算机网络攻防对抗技术实验室,北京,100081
【正文语种】中文
【中图分类】TP393.09
【相关文献】
1.基于代理的Web应用安全管控系统设计与实现 [J], 杨永群;章翔凌;黄勤龙;肖志恒
2.基于DWR框架的高校排课系统设计与实现 [J], 黄森;付宁
3.基于DWR框架的教学管理系统设计与实现 [J], 许莉莉;俞巍
4.基于R语言的北京市医耗联动综合改革数据分析Web应用系统的设计与实现[J], 杨辉
5.基于Vue.js的Web应用开发教学案例设计与实现 [J], 胡开华;张玉静;陈明禄;何文鑫
因版权原因，仅展示原文概要，查看原文内容请购买。