zoukankan      html  css  js  c++  java
  • 通过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,只需要通过网络向远程计算机请求相应的服务,就能达到想要做的事情。

  • 相关阅读:
    Mybatis 原始dao CRUD方法
    JQuery的焦点事件focus() 与按键事件keydown() 及js判断当前页面是否为顶级页面 子页面刷新将顶级页面刷新 window.top.location
    使用actionerror做失败登录验证
    Java项目中的下载 与 上传
    shiro框架 4种授权方式 说明
    javascript 中数组的创建 添加 与将数组转换成字符串 页面三种提交请求的方式
    序列化表单为json对象,datagrid带额外参提交一次查询 后台用Spring data JPA 实现带条件的分页查询 多表关联查询
    Spring data JPA 理解(默认查询 自定义查询 分页查询)及no session 三种处理方法
    orcal 数据库 maven架构 ssh框架 的全注解环境模版 maven中央仓库批量删除lastupdated文件后依然是lastupdated解决方法 mirror aliyun中央仓库
    EasyUI加zTree使用解析 easyui修改操作的表单回显方法 验证框提交表单前验证 datagrid的load方法
  • 原文地址:https://www.cnblogs.com/pangblog/p/3285736.html
Copyright © 2011-2022 走看看