`
445822357
  • 浏览: 740855 次
文章分类
社区版块
存档分类
最新评论

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

分享到:
评论

相关推荐

    使用DWR框架简化Ajax开发

    DWR现在已经在java平台的AJAX应用中使用比较广泛,下面将以前项目中用到的部分内容(测试部分)贴出来,以供参考

    AJAX DWR框架实现部分刷新效果

    一个简单的案例,用DWR框架简化AJAX开发。

    dwr3api+DWR文档.pdf

    内容:dwr函数,和初级入门手册 简化ajax开发

    dwr.zip_ajax_dwr_java xml_java 远程控制_远程控制

    DWR(直接Web远程控制)项目是在Apache许可下的一个开源的AJAX解决方案,利用这个框架可以让AJAX开发变得很简单. 利用DWR可以在客户端利用JavaScript直接调用服务端的Java方法并返回值给JavaScript就好像直接本地...

    开发ajax之dwr入门例子

    dwr入门有帮助!~ 导入dwr.jar文件! 简单设置下,就可以开发了! 大大简化开发时间

    DWR框架引用类(AJAX)

    基于ajax的JAVA框架,很实用,能帮助开发者简化AJAX的开发过程

    OA办公自动化管理系统(Struts1.2+Hibernate3.0+Spring2+DWR).rar

    OA办公自动化管理系统是一个...通过学习这个资料包,开发者可以掌握Struts1.2、Hibernate3.0、Spring2和DWR等技术的应用,提高自己的开发技能。同时,这个资料包也为企业提供了一个可靠的、成熟的办公自动化管理系统,

    基于JavaEE平台实战

    本部分课程包含两块内容...本课程通过对一些有趣实用的Web开发项目进行由浅入深的分析,引导开发人员了解基于DWR的Ajax在实际应用中的各种方法和技术,并帮助开发人员从传统的开发方式逐步平稳地转换到Ajax开发方式中。

    ext+Json+dwr+spring+hibernate整合项目实例与资源

    我们一般会使用遵循MVC设计模式的Struts来规范程序结构,使用优秀的ORM组件Hibernate来简化数据库访问操作,使用系统黏合剂Spring来提高开发效率,使用异步访问的Ajax来提高用户体验。而今天我们要做的一个demo是一...

    dwr+spring+hibernate的示例

    1、在dwr中尝试编写的一些通用的代码,... &lt;br&gt;3、如何在spring中实现单dao,使这个单dao既可以与hibernate隔离,使其低耦合高内聚,提高可维护性,又能满足各个bus的业务需要,简化开发的过程。(转载分享) &lt;br&gt;

    OA办公自动化管理系统(Struts1.2+Hibernate3.0+Spring2+DWR)130224.rar

    它通过ORM(对象关系映射)技术将Java对象与数据库表进行映射,使得开发人员可以以面向对象的方式操作数据库,简化了数据访问的复杂性。Spring2作为IoC(控制反转)容器,负责管理对象之间的依赖关系。它通过配置...

    源码基于JSP的OA办公自动化管理系统(Struts1.2+Hibernate3.0+Spring2+DWR).rar

    后端数据持久层由Hibernate3.0负责,它通过对象关系映射(ORM)简化了数据库的操作,并且提供了丰富的缓存机制和事务管理功能,有效提升了数据处理的效率和安全性。Spring2则贯穿于整个系统,以其依赖注入和面向切面...

    基本于J2EE的Ajax宝典.rar

    第 18章 使用 AjaxTags 简化开发 54 18.1 AjaxTags 的下载和安装 54 18.1.1 AjaxTags 概述 55 18.1.2 下载和安装 AjaxTags 55 18.2 AjaxTags 入门 57 18.2.1 编写处理类 57 18.2.2 使用标签 59 18.3 处理类的...

    ExtJs人力资源管理系统(HRMS)

    我们一般会使用遵循MVC设计模式的Struts来规范程序结构,使用优秀的ORM组件Hibernate来简化数据库访问操作,使用系统黏合剂Spring来提高开发效率,使用异步访问的Ajax来提高用户体验。而今天我们要做的一个demo是一...

    EasyJWeb服务调度和自定义邮件引擎技术的CRM系统实战开发

    EasyJWeb对于中小型的软件项目来说是十分优秀的,内置的Action可以轻易的捕获前台的请求,而EasyJWeb提供了类似于DWR的Ajax技术,大大简化了Ajax的调用过程,提高了开发效率和运行速度。作为国内的MVC框架,EasyJWeb...

    jquery插件使用方法大全

    (详情可以参见:jQuery.ajax文档) 此外,系统的可扩展性大大增强,可以附加各种数据处理器、过滤器和传输机制,为开发新的Ajax插件提供了方便。 2. 延迟对象 延迟对象(Deferred Object,jQuery.Deferred对象)是...

Global site tag (gtag.js) - Google Analytics