AJax技术

java web开发:Ajax技术(四):DWR

字号+ 作者:H5之家 来源:H5之家 2017-05-27 15:00 我要评论( )

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

一 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接受数据,并调用,使用DOM动态生成具体的数据添加到当前网页中

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

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

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

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

二Ajax升级——DWR

DWR——WEB远程调用框架

三什么是DWR
  • 使用DWR之后,可以,异常处理,跨站请求伪造保护等等功能,可以和主流的框架(如Spring)整合等等特性

  • DWR可以根据主要的要调用的Java类动态生成JavaScript函数,在JavaScript中调用Java类的方法可以像调用JavaScript自身的方法一样方便

  • 四DWR组成
  • 运行在服务器端的servlet(DWR封装),调用普通java类处理客户端的请求并返回数据
  • 运行在客户端的javaScript代码,用来发送Ajax请求并动态生成页面
  • 五 添加DWR框架支持
  • <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>

  • 运行测试——运行项目,在浏览器中输入::8080/工程名/dwr/
  • 访问到包含[Modules known to DWR],说明DWR框架配置ok!
  • 六 第一个简单的DWR实例——HelloDWR

    (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 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+"http://www.xuebuyuan.com/"; %> <!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 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" /> 服务器返回的数据: <input type="text"/> </body> </html>

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

     

    1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

    相关文章
    • 理解AJAX工作原理 构建网站的有效方法1.1

      理解AJAX工作原理 构建网站的有效方法1.1

      2017-05-27 15:01

    • 用Nginx 修改头信息,让AJAX跨域正常请求

      用Nginx 修改头信息,让AJAX跨域正常请求

      2017-05-27 09:00

    • ajax页面无刷新技术 浅谈Ajax技术实现页面无刷新

      ajax页面无刷新技术 浅谈Ajax技术实现页面无刷新

      2017-05-26 16:02

    • Ajax技术及其应用研究

      Ajax技术及其应用研究

      2017-05-26 16:00

    网友点评