跟我学DWR框架技术——如何应用MyEclipse开发工具开发实现基于DWR框架的Web应用示例(第二部分)
- 格式:doc
- 大小:356.00 KB
- 文档页数:9
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的实现。
1.1跟我学DWR框架技术——如何应用MyEclipse开发工具开发实现基于DWR框架的Web应用示例(第二部分)1.1.1对本示例项目进行在线测试1、输入http://127.0.0.1:8080/sshwebcrm/dwr/index.html后,将进入DWR的在线测试页面能够看到我们前面的java.util.Date的本地化的结果的*.js文件。
2、点击上面的JDate的链接将出现下面的状态----其中的javascriptDate.js是动态生成的。
3、点击上面的javascriptDate.js的链接将可以看到动态生成的javascriptDate.js内容4、可以在线测试1.2项目开发示例1.2.1构建出客户端页面1、在项目中添加一个JSP页面(1)该页面为showTime.jsp(2)注意页面设计的一些规则●对于JSP页面都需要在页面的最开始部分增加以下语句<%@ page contentType="text/html; charset=gb2312" %>●对于HTML页面都需要在页面的最开始部分增加以下语句<meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content="text/html; charset=gb2312"> (3)注意表单中的各个成员控件的命名规则页面编码过程中用到的所有控件命名都需要遵循相应规则,方便程序的可读性。
采用控件类型缩写前缀(小写)+英文单词(第一个字母大写)的方法来命名每一个控件。
具体规则推荐如下:2、修改前面的showTime.jsp能够对我们的java.util.Date进行访问(1)在页面中引入我们的JDate.js和DWR其它的*.js文件的方法在上面的提示中告诉我们,为了能够在页面中使用我们的java.util.Date类,应该包含的JavaScript的引用要求:<script type='text/javascript' src='/webcrm/dwr/interface/JDate.js'></script> <script type='text/javascript' src='/webcrm/dwr/engine.js'></script>当然,还需要添加下面的内容<script type='text/javascript' src='/webcrm/dwr/util.js'></script>(2)注意:在*.jsp页面中可以利用JSTL进行包装。
<script type='text/javascript' src="<c:url value='/dwr/util.js'/>"></script> <script type='text/javascript' src="<c:urlvalue='/dwr/engine.js'/>"></script><script type='text/javascript' src="<c:url value='/dwr/interface/JDate.js'/>"></script>(3)修改前面的showTime.jsp页面对java.util.Date进行访问<%@ page isELIgnored="false" pageEncoding="GB18030"%><html><head><title>index</title><script type='text/javascript' src='${pageContext.request.contextPath}/dwr/interface/javascriptDate.js'></sc ript><script type='text/javascript'src='${pageContext.request.contextPath}/dwr/engine.js'></script><script type='text/javascript'src='${pageContext.request.contextPath}/dwr/util.js'></script><script type='text/javascript'>function showTime(){JDate.toString(callBackFun1);}callBackFun1 = function(toStringReturnTimeString){alert("当前的服务器端的时间为:"+toStringReturnTimeString);/**document.getElementById("showTimeResult").innerHTML=toStringReturnTimeString;*/}</script></head><body bgcolor="#ffffff"><jsp:include page="/commonPage/pageHead.jsp" ></jsp:include><jsp:include page="/commonPage/navMenuBar.jsp" ></jsp:include><br/><br/><a href="#" onclick="javascript:showTime()">点击我可以获得当前服务器端的时间</a><div id="showTimeResult"></div><br/><jsp:include page="/commonPage/authorInfo.jsp" ></jsp:include></body></html>3、再执行本Web应用(1)在浏览器的URL地址栏中输入如下的测试页面地址信息http://127.0.0.1:8080/sshwebcrm/showTime.jsp,可以直接在页面中显示输出。
(2)点击上面的超链接,将出现下面的提示(3)同时,在状态台的面板中出现下面的状态提示3、显示地公开声明java.util.Date类中的方法(1)默认时是将类中的所有的public方法都发布——也就是允许在客户端被访问(2)可以只发布部分方法-----只需要将dwr.xml中的配置内容改变为下面的内容<?xml version="1.0" encoding="UTF-8"?><!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "/dwr/dwr30.dtd"><allow><create creator="new" javascript="javascriptDate" scope="application"><param name="class" value="java.util.Date"></param><include method="toString"/></create></allow></dwr>注意:也可以应用适配器模式进行接口的转换。
(3)再启动http://127.0.0.1:8080/sshwebcrm/dwr/test/javascriptDate后,将看到下面的内容而对于被屏蔽的方法,将不可以调用(红色标示的方法)。
除了toString()以外的其它的方法都被屏蔽掉了---对客户端来说,将成为不可见的方法,这样可以提高我们JavaBean 类中的方法的安全性。
4、将页面中的JavaScript脚本放到一个外部文件中——分离“脚本”和“标签”(1)添加外部*.js文件(dwrDemoJavaScript.js)在如下示图中输入文件名称(2)设计该dwrDemoJavaScript.js的内容function showTime(){JDate.toString(callBackFun);}callBackFun = function(toStringReturnTimeString){alert("当前的时间是:"+toStringReturnTimeString);/**document.getElementById("showTimeResult").innerHTML=toStringReturnTimeString;*/// $("showTimeResult").innerHTML =toStringReturnTimeString; }(3)修改前面的showTime.jsp页面为下面的内容——引用dwrDemoJavaScript.js文件<script type='text/javascript'src='${pageContext.request.contextPath}/javascript/dwrDemoJavaScript.js'> </script>(5)再执行本项目(输入http://127.0.0.1:8080/webcrm/dwrdemo/showTime.jsp),将同样看到前面一样的结果这样的好处是将JavaScript都统一地放到某个外部文件中,将能够更好地重用和分离!。