跟我学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的实现。