java web开发：Ajax技术（四）：DWR——WEB远程调用框架

最新推荐文章于 2022-11-08 17:03:46 发布

大牧莫邪

最新推荐文章于 2022-11-08 17:03:46 发布

阅读量3k

点赞数

分类专栏： ajax 文章标签： dwr ajax JSON java web 局部刷新

本文链接：https://blog.csdn.net/muwenbin_flex/article/details/19979295

版权

ajax 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

一 Ajax原理

Ajax通过其核心引擎（XMLHttpRequest）实现了浏览器客户端和服务器的异步通信功能，主要原理参考下图

（0）打开浏览器网页

（1）在浏览过程中触发事件（如：鼠标单击事件、注册时用户名输入框失去焦点事件等等）

（2）事件调用对应的JavaScript函数——ajaxfunc(){}

（3）函数中，创建并Ajax核心处理对象XMLHttpRequest对象

（4）调用了XMLHttpRequest对象的方法发送了异步请求到服务器

（5）异步请求发出——request

（6）服务器根据用户请求的url地址，根据web.xml中<servlet-mapping><servlet>的配置找到对应的servlet处理类

（7）servlet调用底层的javaBean进行详细业务的处理

（8）底层处理方法返回处理结果

（9）服务器将请求结果封装到响应response中

（10）服务器返回请求结果到浏览器

（11）根据服务器返回的处理结果，XMLHttpRequest接受数据，并调用javaScript，使用DOM动态生成具体的数据添加到当前网页中

可以看到，Ajax技术完成了浏览器客户端的异步请求的发送，在一定程度上提升了用户的感知和网页数据的健全性能

但是对于程序猿们来说，这样的实现方法不但麻烦，而且限制颇多

实现一个Ajax的异步请求，需要在web.xml中配置对应的请求映射关系，还要单独新建处理类的处理方法，在一定程度上使得项目部署的整齐性得到了考研，对于新手来说，这简直就是一种折磨，既然浏览器和服务器要进行这样的异步数据交互，为什么不能在JavaScript中可以直接调用任何一个Java类的方法来处理呢？何必要针对一个功能来的这么麻烦呢？

好吧，程序猿们是一群懒的不像话，但是又非常规范整齐并用自己的聪明才智让自己变的更懒的人，Ajax这样复杂的实现，我们写一次就够了，剩下的，就交给我们简单的操作吧。在JavaScript中直接调用Java中的方法——DWR应运而生

二 Ajax升级——DWR

DWR——WEB远程调用框架

三什么是DWR

DWR（Direct web remoting）web远程调用框架
使用DWR可以轻松实现JavaScript和Java之间的数据交互通信
使用DWR可以轻松实现Java和JavaScript之间的数据交互通信（逆向Ajax）
使用DWR之后，可以自动转换JAVA对象和JavaScript对象，异常处理，跨站请求伪造保护等等功能，可以和主流的框架（如Spring）整合等等特性
DWR可以根据主要的要调用的Java类动态生成JavaScript函数，在JavaScript中调用Java类的方法可以像调用JavaScript自身的方法一样方便

四 DWR组成

运行在服务器端的servlet（DWR封装），调用普通java类处理客户端的请求并返回数据
运行在客户端的javaScript代码，用来发送Ajax请求并动态生成页面

五添加DWR框架支持

搜索DWR官网，进入DWR官网，下载dwr开发所需要的jar包：dwr.jar、commons-logging-1.0.4.jar
将下载好的jar包拷贝到web项目的WEB-INF/lib目录下
配置web.xml文件；在web.xml中增加如下配置

<servlet>
  	<servlet-name>dwr_invoke</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_invoke</servlet-name>
  	<url-pattern>/dwr/*</url-pattern>
  </servlet-mapping>

配置dwr.xml文件，直接从官网的示例中找到WEB-INF/lib/dwr.xml文件，拷贝到单前项目的WEB-INF/lib/目录下，并修改为以下内容

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPEdwr PUBLIC

    "-//GetAheadLimited//DTD Direct Web Remoting 2.0//EN"

    "http://getahead.org/dwr/dwr20.dtd">

<dwr>
</dwr>

运行测试——运行项目，在浏览器中输入：http://localhost:8080/工程名/dwr/
访问到包含[Modules known to DWR]，说明DWR框架配置ok！

六第一个简单的DWR实例——Hello DWR

（1）在项目中创建普通的java类——AjaxService.java

package com.phome;

public class HelloDWR {
	
	public String sayHello() {
		return "hello dwr!";
	}
	
}

（2）配置dwr.xml文件，在dwr.xml中的dwr节点中，插入如下的配置

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC "-//GetAhead Limited//DTD Direct Web Remoting 3.0//EN" "http://getahead.org/dwr/dwr30.dtd">

<dwr>
	<allow>
		<!-- javascript属性名称，规范和要调用的Java类的名称一致 -->
		<!-- creator属性new，表示每次使用这个类时，new一个新的实例对象？ -->
		<create creator="new" javascript="HelloDWR">
			<!-- name属性class表示当前参数是一个java类，value属性指定java类的全名称 -->
			<param name="class" value="com.phome.HelloDWR"></param>
			<!-- 指定客户端端可以调用的方法 -->
			<!--<include method=""/> -->
			<!-- 指定客户端不能调用的方法,和include互斥 -->
			<!-- <exclude method=""/> -->
		</create>
	</allow>
</dwr>

（3）视图页面

<%@ page language="java" import="java.util.*" pageEncoding="GB18030"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'index.jsp' starting page</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<!-- 使用dwr框架，必须引入如下三个js文件 -->
	<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/HelloDWR.js"></script>
	<script type="text/javascript">
		function getInfo() {
			// 直接使用[java类名.方法名()]调用java类的某个方法，参数中指定方法调用完成后，要执行javascript函数
			HelloDWR.sayHello(callback);
		}
		
		// 被指定的要调用的函数，参数data表示服务器返回的数据
		function callback(data) {
			alert(data);
			document.getElementById("info").value = data;
		}
	</script>
  </head>
  
  <body>
  	<input type="button" value="getinfo" οnclick="getInfo()" />
  	服务器返回的数据：
    <input type="text" id="info"/>
  </body>
</html>

七一个简单的注册账号是否可用的验证的实现

大牧莫邪

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
java web开发：Ajax技术（四）：DWR——WEB远程调用框架

一 Ajax原理Ajax通过其核心引擎（XMLHttpRequest）实现了浏览器客户端和服务器的异步通信功能，主要原理参考下图（0）打开浏览器网页（1）在浏览过程中触发事件（如：鼠标单击事件、注册时用户名输入框失去焦点事件等等）（2）事件调用对应的JavaScript函数——ajaxfunc(){}（3）函数中，创建并Ajax核心处理对象XMLHttpRequest对象
复制链接

扫一扫