AJAX技术简介与DWR框架应用入门

13年前

AJAX技术简介与DWR框架应用入门

传统WEB应用程序及其缺点

       从上图可以看出,每次用户操作向服务器发出请求之后,必须等待服务器处理并响应之后,才能继续下一次操作。

       这种模式的缺点是:

1、  用户体验不友好:在等待服务器响应的过程中,浏览器处于一片空白状态,没有C/S模式应用程序那种快捷性。

2、  浪费网络带宽:大家可以试想一下,如果一个页面上有很多图片,FLASH等多媒体内容,仅仅为了更新其中一些文字等,服务器就必须把整个页面重新发送一次,浪费了大量的网络带宽。

应用了AJAX技术之后的WEB应用程序

       从上图可以看出,客户端和服务器之间多了一层AJAX引擎( Ajax engine ),它负责将客户端的请求发送给服务器,这样客户端的页面就不用刷新了,不会进入无响应的空白状态。它还要负责将服务器的响应更新到客户端的局部区域。也就是所谓的“局部刷新”,这样客户端和服务器之间的请求/响应就由AJAX来完成了,解决了传统WEB应用程序的缺点。

       并且这样客户端就可以连续向服务器发出多个请求,而不用一定要等到上一个请求的响应回来后才能再请求。这就是所谓的“异步”。通过AJAX可以将WEB应用程序做得像C/S程序一样,这就是时下流行的RIA – Rich Internet Application Internet应用程序,即胖客户端技术。

 

什么是AJAX?

       AJAX Asynchronous Javascript and XML 异步JavascriptXML的缩写。其实并不是新技术,只是一堆现有技术的整合使用。

       AJAX技术的主要组成是:

1、  Javascript:客户端脚本技术,以前主要用于表单验证和一些网页特效,并不是主力开发语言,随着AJAX的发展,Javascript成为了非常重要的开发语言,也得到了广泛的研究,它是整个AJAX各项相关技术的关键。(粘合剂)

2、  XML:标准的跨平台数据交换技术。可以看成一种文本型数据库,也常用于配置文件。在AJAX技术体系中,它主要扮演客户端和服务器之间的数据交换标准。服务器响应XML给客户端,客户端解析XML并显示到页面上。

3、  HTML & CSS:标准的表示层技术。

4、  DOM:文档对象模型,是一棵树型结构。Javascript要通过它才能动态改变页面的内容。

5、  XMLHttpRequest对象:集成在客户端浏览器中的异步请求对象,最初是由微软发明的,现在已经广泛存在于各主流浏览器中。它是用来对服务器发出请求,并接收服务器响应的,属于AJAX技术的核心对象。(核心)

AJAX经典应用示例:

Google Map

 

 

 

 

 

AJAX的一个简单示例——登录验证:

 

上图是一个登录界面,当我们在用户名文本框中输入名字,然后让文本框失去焦点时,文本框之后会显示出用户名存在或不存在。大家可以想象,这个效果绝非仅仅用Javascript表单验证能够解决的问题,因为用户名是存在数据库中的,所以这个验证肯定是请求了服务器,但客户端的页面并没有刷新,这就是AJAX的一种典型的应用。

 

实现步骤

       1、创建一个登录表单。

                     略。

       2、文本框失去焦点事件中进行AJAX请求。(重点

2-1.创建XMLHttpRequest对象

                     因为各种浏览器创建该对象的方式不同,所以直接用以下方法则可。

function getXmlHttpRequest(){

       if(window.ActiveXObject){          //IE

              var ieArr=["Msxml2.XMLHTTP.6.0","Msxml2.XMLHTTP.3.0",

              "Msxml2.XMLHTTP","Microsoft.XMLHTTP"];

              for(var i=0;i<ieArr.length;i++)

              {

                     var xhr= new ActiveXObject(ieArr[i]);

              }

              return xhr;

       } else if(window.XMLHttpRequest){    //IE

              return new XMLHttpRequest();

       }

}

              2-2.设置当服务器响应回来后调用的函数

                     xhr.onreadystatechange = showUserNameTip;

2-3.通过XMLHttpRequest对象发出请求

                     xhr.open(“GET”,”ValidateUserNameServlet?uName=”+uName);

                     xhr.send(null);

              2-4.编写回调函数。

                     function showUserNameTip() {

if(xhr.readyState==4) {         //交互完成

                                   //Http状态码 200。表示服务器已成功处理请求

                                   if(xhr.status==200) {

                                          //得到服务器响应的文本

                                          var respTxt = xhr.responseText;

                                   }

}

                     }

3、  写服务器端代码(JSPServlet)来完成验证。

 

至此,大家已经初步了解了AJAX的应用,如果想要了解AJAX基础的更多细节,建议学习《AJAX基础教程》,着重看下第二、三章。

DWR简介。

随着2005AJAX概念和技术体系的明确,AJAX应用大量发展,上面的代码大家或许会觉得有些复杂,这还只是响应一些文本,如果服务器要发送数组,对象,甚至集合给客户端。那处理起来需要自己写很多代码,复杂度很高。

所以我们也许应该用一些别人为我们写好的框架,来简化我们AJAX应用的编写。这里,向大家隆重推荐 DWR框架,这是一个专门提供给JAVA开发者的AJAX应用框架。( Framework )。它能让JAVA WEB中的AJAX应用变得简单。

 

DWR的官方网站是 www.directwebremoting.org 。见下图

点击 Download DWR进入下载页面,见下图。

可以看到最新版本是 3.0

其中 JAR File DWRjar包,应该放在我们自己项目的WEB-INF\lib目录下。

WAR File DWR的示例程序,应该放在<Tomcat安装目录>\webapps目录下。

SourcesDWR的源代码,其中包含了DWRJavaDoc文档。

 

演示DWR的几个示例。

DWR的运行原理简介

DWR是一种JavaAJAX框架,从图上可以看出,如果服务器上有一个Java类,我们可以在客户端上直接调用这个类的方法,就好象这个类是用Javascript写的一样,

其实DWR可以动态生成Javascript代码,为我们服务器上的类生成一个“远端代理”。我们通过调用动态生成的Javascript就用到了DWR向服务器发出一个请求,然后服务器将响应给DWR,再返回给客户端,由Javascript来处理响应。

 

下面介绍一个新技术 Reverse AJAX,就是反转AJAX。我们知道通常情况下,都是客户端主动去请求服务器获取信息,但DWR中集成了一种叫做反转AJAX的技术,可以由服务器通知客户端更新。这样能够做出实时性很高的WEB应用程序。

见上图,DWR在服务器端直接通知三个客户端更新他们的下拉列表,这样的机制以前是无法实现的。

 

DWR的基本配置步骤

1、  配置DWRServlet,在web.xml中添加以下内容

<!-- 配置DWR调用器的Servlet -->

    <servlet>

        <servlet-name>dwr-invoker</servlet-name>

        <servlet-class>org.directwebremoting.servlet.DwrServlet</servlet-class>

      

       <!-- 打开DWR的调试模式 -->   

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

2、  WEB-INF目录下,添加一个dwr.xml文件,该文件用来配置允许客户端远程调用的类。

<?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>

       <!-- 创建HelloService的方式 -->

       <create creator="new" javascript="HelloService">

            <param name="class" value="demo1_1.HelloService"/>

    </create>

    </allow>

</dwr>

<dwr>是根标签

<allow>表示允许访问的配置

<create>标签标识配置一个类

       属性:creator 配置当远程调用发生时,类的创建方式,通常是 new

                javascript 配置远程调用的类名

                scope 配置将对象放在哪个作用范围,通常是 application session

       子标签<param>用来配置参数

              属性 name 通常是 class

                      value 指类的完整名称 ( 包名.类名 )

 

3、  dwr.jarcommons-logging-1.0.4.jar包拷贝到项目中的WEB-INF\lib目录下。

完成第一个示例,具体代码见 DWR示例一.rar