DWR学习笔记(一)js 2010-01-02 19:22:58 阅读6 评论1 字号:大中小 订阅 一.DWR简介
1.DWR是一个可以允许你去创建AJAX WEB站点的JAVA开源库。 它可以让你在浏览器中的Javascript代码调用Web服务器上的Java代码,就像Java代码在浏览器中一样。 2.DWR包含2个主要部分: I.一个运行在服务器端的Java Servlet,它处理请求并且向浏览器发回响应。 II.运行在浏览器端的JavaScript,它发送请求而且还能动态更新网页。 3.DWR工作原理是通过动态把Java类生成为Javascript。 它的代码就像Ajax魔法一样,你感觉调用就像发生在浏览器端,但是实际上代码调用发生在服务器端,DWR负责数据的传递和转换。 这种从Java到JavaScript的远程调用功能的方式使DWR用起来有种非常像RMI或者SOAP的常规RPC机制, 而且DWR的优点在于不需要任何的网页浏览器插件就能运行在网页上。 4.Java从根本上讲是同步机制,然而AJAX却是异步的。 所以你调用远程方法时,当数据已经从网络上返回的时候,你要提供有反调(callback)功能的DWR(JS函数)。 二.DWR的使用步骤:一共有五步: *导入dwr.jar *配置web.xml *配置dwr.xml *生成java类 *生成JSP页面 1.导入DWR到工程 A.将dwr.jar库文件拷贝到项目的lib目录(dwr.jar会要求一个辅助类库commons-logging.jar来支持日志输出) B.将engine.js和util.js两个DWR的js文件拷贝到项目的js目录(下载的zip文件 \java\org\directwebremoting中有这两个文件) **注意:经测试engine.js和util.js不需要导入项目js目录中, 然后界面中使用的是dwr.jar中的engine.js和util.js文件,直接导入就行,见下边jsp文件 当然如果导入也不会有错,只不过没有使用罢了,但是导入的话可以有种提示自己要在页面导入这两个文件的作用。 2.注册DWR到项目的web.xml配置文件(其实就是添加一个DWR的Servlet) <servlet> <servlet-name>dwr-invoker</servlet-name> <servlet-class>org.directwebremoting.servlet.DwrServlet</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> **说明:让给servlet处理所有/dwr/前缀开始的所有请求。 3.配置DWR的配置文件dwr.xml(该文件可从war包中拷贝,放到项目的WEB-INF中,和web.xml位与同目录) <dwr> <allow> <create creator="new" javascript="service"> <param name="class" value="com.lj.firstdwr.Service" /> </create> </allow> </dwr> **说明:配置想要在浏览器js中调用的java类,一个<create>表示一个类的配置, javascript属性是浏览器中调用该类的变量名,即js中直接调用service的方法就是调用value属性指定的Service类中的方法 4.编写刚配置的Service类:就是一个普通的java类,没有任何特殊的地方 package com.lj.firstdwr; public class Service{ public String sayHello(String name){ //可以是访问数据库的复杂代码 return "Hello World! My Name is: " + name; } } 5.编写前台JSP通过js来调用Service类中的sayHello()方法 **注意: A.此时要在JSP文件中引入上面加入到js目录中的两个js文件engine.js是必须的,util.js提供很多工具方法。 B.因为要调用Service类,因为该类注册到dwr.xml配置文件中, 那么DWR会在dwr/interface/(该目录是DWR规定的固定不变的)目录生成 一个代表Service类的service.js文件(文件名和javascript="service"属性值相同), 加入这个js文件后才可以通过js调用service变量操作Service类中的方法。 <html> <head> //<script type="text/javascript" src="js/util.js"></script> //<script type="text/javascript" src="js/engine.js"></script> **注意:将js改成dwr,代表engine.js和util.js文件使用的是dwr.jar库中的文件,而不是自己导入的,如果使用自己导入的会有错!! <script type="text/javascript" src="dwr/util.js"></script> <script type="text/javascript" src="dwr/engine.js"></script> <script type="text/javascript" src="dwr/interface/service.js"></script> //编写JS文件调用Service类中的sayHello()方法 <script type="text/javascript"> function firstDwr(){ //参数列表的除最后一个都是sayHello()方法的参数,最后一个参数DWR规定为设定回调函数 service.sayHello("lijie",callBack); } //回调函数 function callBack(data){ alert(data); } /* 这个等同于上边的两个方法的加合,这里就是把回调函数直接放到最后一个参数中最为一个匿名函数,这样比较简洁 function firstDwr(){ service.sayHello("lijie", function(data){ alert(data); } ); } */ </script> </head> <body> <!--触发JavaScript事件--> <input type="button" name="button" value="测试" onclick="firstDwr()"> </body> </html> |
|