Ajax学习系列4— 通过DWR简化AJAX开发

前端之家收集整理的这篇文章主要介绍了Ajax学习系列4— 通过DWR简化AJAX开发前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

    DWRDirect Web Remoting)是一个WEB远程调用框架,采取了一个类似AJAX的新方法来动态生成基于JAVA类的JavaScript代码。这样WEB开发人员就可以在JavaScript里使用Java代码,就像它们是浏览器的本地代码(客户端代码)一样。

    其开发过程如下:

    1. 拷贝dwr.jar文件
    2. 修改web.xml文件添加dwr servlet配置
    3. 编写dwr组件,即提供给javascript访问的java类。
    4. 在web-inf下面添加dwr.xml文件,进行配置
    5. 创建jsp页面,需引入dwr的javascript文件调用java方法

    下面以用户注册的例子,来说明其使用。

    修改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>

    引入第三方框架时,都需要做这两件事:加入第三方框架的配置信息(见下面的dwr.xml)和 在web.xml中配置,引入该框架。


    编写dwr组件,即提供给javascript访问的java

    public class User {
    private String id;
    private String name;
    private String password;
            
    //以下包含getXXX和setXXX方法
    .......
      }
     
    DWRUserAccess:
    public class DWRUserAccess {
    public boolean save(User user) {
    System.out.println("id:" + user.getId());
    System.out.println("password:" + user.getPassword());
    System.out.println("name:" + user.getName());
    return true;
    }
     
    public User find(String id) {
    User user = new User();
    user.setId(id);
    user.setName("lisi");
    user.setPassword("lisi");
    return user;
    }
    }

    csdn的代码格式化做的太次毛了,全部对齐了。


    web-inf下面添加dwr.xml文件,进行配置

    < xml version="1.0" encoding="UTF-8" >
    <!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
     
    <dwr>
      <allow>
    <create creator="new" javascript="DWRUserAccess">
          <param name="class" value="test.DWRUserAccess"/>
    </create>
    <convert converter="bean" match="test.User"/>
      </allow>
    </dwr>



    创建jsp页面,需引入dwrjavascript文件,然后调用java方法

    <%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <title>Insert title here</title>
    <script  type="text/javascript" src="dwr/engine.js"></script>
    <script  type="text/javascript" src="dwr/util.js"></script>
    <script  type="text/javascript" src="dwr/interface/DWRUserAccess.js"></script>
    <SCRIPT LANGUAGE="JavaScript">
     
    function saveFun(data) {
    if (data) {
    alert("注册成功!");
    } else {
    alert("登陆ID已经存在!");
    }
    }
     
    function OnSave() {
    var userMap = {};
    userMap.id = loginForm.id.value;
    userMap.password = loginForm.password.value;
    userMap.name = loginForm.name.value;
    // 调用DWRUserAccess类的save方法
    DWRUserAccess.save(userMap,saveFun);
    }
     
    function findFun(data) {
    if (data == null) {
    alert("无法找到用户:"+queryForm.id.value);
    return;
    }
     
    alert("找到用户,nid:"+data.id+",npassword:"+data.password+",nname:"+data.name+",nemail:"+data.email);
    }
     
    function OnFind() {
    // 调用DWRUserAccess类的find方法
    DWRUserAccess.find(queryForm.id.value,findFun);
    }
    </SCRIPT>        
     
    </head>
    <body>
    <B>用户注册</B><br>
    ------------------------------------------------
    <Br>
    <form name="loginForm">
    用户ID:<input type="text" name="id"><br>
    口  令:<input type="password" name="password"><br>
    姓  名:<input type="text" name="name"><br>
    <input type="button" name="submitBtn" value="提交" onclick="OnSave()"><br>
    </form>
     
    <br>
    <br><B>用户查询</B><br>
    ------------------------------------------------
    <Br>
    <form name="queryForm">
    用户ID:<input type="text" name="id"><br>
    <input type="button" name="submitBtn" value="提交" onclick="OnFind()"><br>
    </form>
    <br>
    </body>
    </html>


    分析dwr.xml

    通过dwr.xml把DWRUserAccess java类配置到了dwr中。

    create元素中,creater="new"表示每调用一次DWRUserAccess时,需要new一个这样的类;creator还可以是springejb3等值,意思是对象交给容器管理,就像这段代码所描述

    <create creator="spring" javascript="aclManager">

    <param name="beanName" value="aclManager"/>

    </create>

    javascript="DWRUserAccess",表示提供给前台页面调用的javascirpt文件是DWRUserAccess.js。

    类型转换。convert元素用于数据类型转换,因为javascript的对象到了java中是不认识的,相反也是一样的道理。

    通过转换器,把javascript的map结构转换到javaUser对象或者把java User对象转换到javascriptmap结构。(javascriptmap结构:各个项是用逗号连接的,而每个项的键值对是用冒号连接的,如var userMap = {id:'admin',password:'123456',name:'chenbug'};)转换器也有多种,比如BeanConverterArrayConverter

    分析js代码

    DWRUserAccess.js和DWRUserAccess.java是对应的,我们编写的DWRUserAccess类,经dwr反射后,生成就是对应的javascript代码,实际上我们就是通过这个js文件调用服务器端的DWRUserAccess类的。

    OnSave函数,首先它构造一个map,然后调用DWRUserAccess.save(userMap,saveFun)第一个参数userMap是javascirpt中的map对象,而服务器端的DWRUserAccess中的save方法是这样的:boolean save(User user),参数是一个User对象,所以在服务器端代码执行,会通过convert转换成User对象第二个参数saveFun即是一个回调函数,执行完服务端的方法后,将结果填充到function saveFun(data)中data中。

    OnFind函数,因为服务器端返回的是一个User对象,所以需要通过convert,将User对象转换成avascript的一个map对象,将最终结果填充到回调函数findFun(data)data参数中。

    小结

    这个从JAVA到JavaScript的远程调用,非常像传统的RPC机制,比如RMI或者Web Service,只需要通过网络向远程计算机请求相应的服务,就能达到想要做的事情。

猜你在找的Ajax相关文章