初学DWR Ajax框架

初学Ajax开源框架DWR,使用2.0.5版本,新建web项目dwrtest
下载地址：http://directwebremoting.org/dwr/download
中文文档：http://wiki.javascud.org/display/dwrcn/Home

1.配置web.xml文件，配置一个servlet
 * <servlet-name>dwr</servlet-name>
     <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>
      <url-pattern>/dwr/*</url-pattern>
     
 * 复制dwr.jar和commons-logging-*.jar文件到lib目录

2.新建处理类，并把该类配置到dwr.xml文件里，dwr.xml文件从源代码中复制到WEB-INF目录
 * 处理类名UserAjax，一个方法：检查参数，然后返回结果如Boolean
  配置dwr.xml：页面端可以通过"userAjax"访问这个类方法并得到返回结果
   <allow>
  <create javascript="userAjax" creator="new">
   <param name="class" value="com.wfy.dwr.UserAjax"/>
  </create>
   </allow>

3.编写页面端jsp或html，利用JavaScript技术
 * 这里的配置格式固定，是约定src="dwr/engine.js"是必须的，它处理所有与服务器的通信
  这里使用了相对路径
  <script type="text/javascript" src="dwr/engine.js"></script>
  <script type="text/javascript" src="dwr/interface/userAjax.js"></script>
  <!-- 这里的dwr/interface/也是约定,userAjax.js也是框架自动生成我们只需在此引用就可以 -->
  
 * 还有一个可选配置util.js: 帮你使用从服务器取来的数据改变页面(还有一些灵巧的小功能)
  <script type="text/javascript" src="dwr/util.js"></script>

 * 用javascript脚本编写Ajax回调函数，接收返回值并处理
    function callback(boolean){
     if(boolean){
        ${"error"}.style.visibility="hidden";
     }else{
        ${"error"}.style.visibility="visible";
        form1.username.value="";
     }
    }

 * 用JavaScript脚本编写调用处理类的函数
    function validate(){
       var name = form1.username.value;
       //这个是调用dwr.xml配置里的处理类的方法
       userAjax.existUser(name,callback);
    }
    这条语句的主要功能：1.传递页面端的内容给服务端处理类的方法
    2.指明了回调函数是callback
 
 * 表单form1.username的onchange="validate()"
  当username输入框内容改变失去焦点后，这个方法就会执行，然后由框架动态生成的
  脚本方法就会把我们输入的值发送给服务端，服务端接收到request分析地址是/dwr/*
  找到我们在web.xml里配置的DWRservlet处理请求后将结果返回给页面端

 * 框架自动生成的脚本参见http://localhost:8080/dwrtest/dwr/
  dwr/interface/userAjax.js内容为：
  // Provide a default path to dwr.engine
  if (dwr == null) var dwr = {};
  if (dwr.engine == null) dwr.engine = {};
  if (DWREngine == null) var DWREngine = dwr.engine;
  
  if (userAjax == null) var userAjax = {};
  userAjax._path = '/dwrtest/dwr';
  userAjax.existUser = function(p0, callback) {
    dwr.engine._execute(userAjax._path, 'userAjax', 'existUser', p0, callback);
  }
  
dwr/engine.js关于此方法描述  
/**
 * @private Send a request. Called by the Javascript interface stub
 * @param path part of URL after the host and before the exec bit without leading or trailing /s
 * @param scriptName The class to execute
 * @param methodName The method on said class to execute
 * @param func The callback function to which any returned data should be passed
 *       if this is null, any returned data will be ignored
 * @param vararg_params The parameters to pass to the above class
 */
dwr.engine._execute = function(path, scriptName, methodName, vararg_params) {  

评论

2 楼 iwfy 2008-11-13  

我也是初学，还不清楚具体的实现过程，但感觉不是转变成JavaScript对象，而是根据配置的类名、方法、参数等信息在页面端调用，页面端就知道用哪个类的哪个方法响应请求，替代了原来的Servlet的部分任务（分析请求地址、方法、参数，分发给响应的业务逻辑）就是包装了AJAX的发送请求、回调函数等操作，在请求到达服务器端后，处理基本跟Struts的方式差不多。
至于javabean对象的传递还没有了解。

1 楼 andylj511 2008-11-13  

DWR好像就是将JAVA的一个类转变成一个javaScript的一个对象然后调用它中间的每一个方法