AJAX技术简介与DWR框架应用入门
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 即 异步Javascript和XML的缩写。其实并不是新技术，只是一堆现有技术的整合使用。
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.XMLHTT
"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、 写服务器端代码（JSP或Servlet）来完成验证。
略
至此，大家已经初步了解了AJAX的应用，如果想要了解AJAX基础的更多细节，建议学习《AJAX基础教程》，着重看下第二、三章。
DWR简介。
随着2005年AJAX概念和技术体系的明确，AJAX应用大量发展，上面的代码大家或许会觉得有些复杂，这还只是响应一些文本，如果服务器要发送数组，对象，甚至集合给客户端。那处理起来需要自己写很多代码，复杂度很高。
所以我们也许应该用一些别人为我们写好的框架，来简化我们AJAX应用的编写。这里，向大家隆重推荐 DWR框架，这是一个专门提供给JAVA开发者的AJAX应用框架。（ Framework ）。它能让JAVA WEB中的AJAX应用变得简单。
DWR的官方网站是 www.directwebremoting.org 。见下图
点击 Download DWR进入下载页面，见下图。
可以看到最新版本是 3.0
其中 JAR File 是DWR的jar包，应该放在我们自己项目的WEB-INF\lib目录下。
WAR File 是DWR的示例程序，应该放在<Tomcat安装目录>\webapps目录下。
Sources是DWR的源代码，其中包含了DWR的JavaDoc文档。
演示DWR的几个示例。
DWR的运行原理简介
DWR是一种Java的AJAX框架，从图上可以看出，如果服务器上有一个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.jar和commons-logging-
完成第一个示例，具体代码见 DWR示例一.rar
chasego 
jopen 
ajax 
openkk