在Eclipse中开发基于DWR的AJAX的Web应用Struts1.docx

1、在Eclipse中开发基于DWR的AJAX的Web应用Struts1在Eclipse中开发基于DWR的AJAX的Web应用（1）1、在Eclipse中创建一个Web项目，名称为DWRWebTest，同时指定其Web应用的名称为DWRWebTestcom.px1987.dwrexampl2、添加DWR的系统包（1）导入我们的系统包（2）定位到我们的系统包所在的目录处（3）最后将产生出下面的状态3、在web.xml中部署DWR的Servlet（1）DWR 1.14版的uk.ltd.getahead.dwr.DWRServlet的基本配置 DWR Servlet dwr-invoker uk.ltd

2、.getahead.dwr.DWRServlet dwr-invoker /dwr/*（2）为该uk.ltd.getahead.dwr.DWRServlet提供各种配置参数 DWR 1.14版最后的配置内容如下web-app version=2.4 xmlns= xmlns:xsi=http:/www.w3.org/2001/XMLSchema-instance xsi:schemaLocation= DWRWebTest dwr-invoker uk.ltd.getahead.dwr.DWRServlet logLevel DEBUG config /WEB-INF/dwr.xml debu

3、g true 1 dwr-invoker /dwr/* DWR 2.0版最后的配置内容如下web-app version=2.4 xmlns= xmlns:xsi=http:/www.w3.org/2001/XMLSchema-instance xsi:schemaLocation= DWRWebTest dwr-invoker org.directwebremoting.servlet.DwrServlet logLevel DEBUG config /WEB-INF/dwr.xml debug true 1 dwr-invoker /dwr/* 4、添加log4J（1）DWR中的log的实

4、现并没有强制某个Logging的形式DWR并不需要要求我们强制某个Logging的形式，可以为各种的Logging的实现。一般我们采用Commons-Logging-然后再采用Log4J的实现。（2）需要在web.xml中增加下面的配置项目 在 web.xml 文件中对前面的uk.ltd.getahead.dwr.DWRServlet添加下面的配置参数-前面已经设置好了！ logLevel DEBUG（3）同时，将（日志）log4j.properties的文件内容放在WEB-INF/classes目录下（4）其内容可以为下面的内容log4j.rootLogger=INFO, stdout, l

5、ogfilelog4j.appender.stdout=org.apache.log4j.ConsoleAppenderlog4j.appender.stdout.layout=org.apache.log4j.PatternLayoutlog4j.appender.stdout.layout.ConversionPattern=%d %p %c - %nlog4j.appender.logfile=org.apache.log4j.RollingFileAppenderlog4j.appender.logfile.File=mylog.loglog4j.appender.logfile.Ma

6、xFileSize=512KB# Keep three backup files.log4j.appender.logfile.MaxBackupIndex=3# Pattern to output: date priority category - messagelog4j.appender.logfile.layout=org.apache.log4j.PatternLayoutlog4j.appender.logfile.layout.ConversionPattern=%d %p %c - %m%n执行过程中，能够看到dwr的各种状态提示（5）同时，将在当前的项目的Tomcat目录下，

7、产生下面的日志文件（6）添加commons-logging.jar和log4j-1.2.14.jar s5、设计dwr.xml文件（1）新建一个dwr.xml文件（2）XML文件的内容 该XML文件的内容如下-对DWR1.14版 该XML文件的内容如下-对DWR2.0版 6、添加一个JSP页面（1）该页面为index.jsp（2）将产生出一个空的页面（3）注意页面设计的一些规则 对于JSP页面都需要在页面的最开始部分增加以下语句 对于HTML页面都需要在页面的最开始部分增加以下语句 （4）注意表单中的各个成员控件的命名规则 页面编码过程中用到的所有控件命名都需要遵循相应规则，方便程序的可读性。

8、采用控件类型缩写前缀（小写）+英文单词（第一个字母大写）的方法来命名每一个控件。具体规则如下：控件类型前缀ButtonbtnFormfrmSelectselTextAreatxtInputiptImageimgDIVdiv7、执行本Web应用（1）配置服务器（2）部署本应用将看到下面的结果（3）启动服务器后,将看到异常抛出原因是DWR2.0 加入了JDK5的注释(annotations)，DwrServlet初始化的时候会去检查注释的类。可以通过对DwrServlet添加下面的来避免。 classes java.lang.Object 再启动服务器,将不再出现异常抛出，并能够看到log信息。（

9、4）输入http:/localhost:8080/DWRWebTest/dwr后能够看到我们前面的java.util.Date的本地化的结果的*.js文件。如果出现下面的异常也就是：DWR例程的运行异常从网上下载了一个dwr的例子，部署在tomcat下，想领略一下ajax的风采。但是输入地址后，出现如下的异常：javax.xml.transform.TransformerFactoryConfigurationError: Provider org.apache.xalan.processor.TransformerFactoryImpl not foundjavax.xml.transfor

10、m.TransformerFactory.newInstance(Unknown Source)uk.ltd.getahead.dwr.convert.DOMConverter.(DOMConverter.java:134)sun.reflect.NativeConstructorAccessorImpl.newInstance0(Native Method)sun.reflect.NativeConstructorAccessorImpl.newInstance(NativeConstructorAccessorImpl.java:39).看到org.apache.xalan是not fou

11、nd的异常，就到apache.org上下载了一个xalan，放到web-inf/lib下，再启动tomcat，问题解决！（5）点击上面的JDate的链接将出现下面的状态-其中的JDate.js是动态生成的。（6）点击上面的JDate.js的链接将可以看到动态生成的JDate.js内容（7）可以在线测试在页面中访问业务功能组件1、修改前面的index.jsp能够对我们的java.util.Date进行访问（1）在页面中引入我们的JDate.js和DWR其它的*.js文件的方法在上面的提示中告诉我们，为了能够在页面中使用我们的java.util.Date类，应该包含的JavaScript的引用要求

12、： 当然，还需要添加下面的内容 注意：在*.jsp页面中可以利用request.getContextPath()来获得“/DWRWebTest”。（2）修改前面的index.jsp能够对我们的java.util.Date进行访问index script type=text/javascript src=/dwr/interface/JDate.js script type=text/javascript src=/dwr/engine.js script type=text/javascript src=/dwr/util.js function showTime() JDate.toStri

13、ng(callBackFun1); /DWR是如何实现异步？callBackFun1 = function(toStringReturnTimeString)/ alert(当前的服务器端的时间为：+toStringReturnTimeString);document.getElementById(showResultMessage).innerHTML = toStringReturnTimeString;/*function callBackFun1(toStringReturnTimeString) alert(当前的服务器端的时间为：+toStringReturnTimeString)

14、;*/ 点击我可以获得当前服务器端的时间 9、再执行本Web应用（1）输入http:/localhost:8080/DWRWebTest/index.jsp（2）点击上面的超链接，将出现下面的提示或者显示出下面的对话框（3）同时，在状态台的面板中出现下面的状态提示2、显示地公开声明java.util.Date类中的方法（1）默认时是将类中的所有的public方法都发布（2）可以只发布部分方法-只需要将dwr.xml中的配置内容改变为下面的内容 （3）再启动http:/localhost:8080/DWRWebTest/dwr/test/JDate后，将看到下面的内容 正常情况下，为下面的状态

15、而对于被屏蔽的方法，将不可以调用（灰色标示的方法）。除了toString()以外的其它的方法都被屏蔽掉了-对客户端来说，将成为不可见的方法，这样可以提高我们JavaBean类中的方法的安全性。3、将页面中的JavaScript脚本放到一个外部文件中（1）添加外部*.js文件（webapp.js）输入文件名称（2）指定其编码为中文编码（3）设计该webapp.js的内容function showTime() JDate.toString(callBackFun);callBackFun = function(toStringReturnTimeString) alert(当前的时间是：+toSt

16、ringReturnTimeString);（3）修改前面的index.jsp页面为下面的内容index script type=text/javascript src=/dwr/interface/JDate.js script type=text/javascript src=/dwr/engine.js script type=text/javascript src=/dwr/util.js script type=text/javascript src=/webapp.js 点击我可以获得当前的时间 （5）再执行本项目（输入http:/localhost:8080/DWRWebTest

17、/index.jsp），将同样看到前面一样的结果或者出现下面的对话框这样的好处是将JavaScript都统一地放到某个外部文件中，将能够更好地重用！在项目中添加我们自己的JavaBean1、添加一个JavaBean（它作为我们的业务组件JavaBean）（1）提供一个接口TimeInfoInterface，包名称为com.px1987.dwrexampl.model设计该接口package com.px1987.dwrexampl.model;public interface TimeInfoInterface public String getSystemTime();（2）提供一个上面的接

18、口的实现类类名称为TimeInfoJavaBean，包名称为com.px1987.dwrexampl.model编程该JavaBean并且提供一个义务处理方法package com.px1987.dwrexampl.model;import java.util.Date;public class TimeInfoJavaBean implements TimeInfoInterface public TimeInfoJavaBean() /注意：应该提供一个默认的构造方法的声明 / TODO 自动生成构造函数存根 public String getSystemTime() return new Date().toLocaleString(); 2、对该JavaBean进行远程