AJAX技術簡介與DWR框架應用入門
<!--[if !mso]>
<![endif]--><o:smarttagtype namespaceuri="urn:schemas-microsoft-com:office:smarttags" name="chsdate">/o:smarttagtype<!--[if !mso]><object classid="clsid:38481807-CA0E-42D2-BF39-B33AF135CC4D" id=ieooui></object>
<![endif]--><!--[if gte mso 10]>
<![endif]-->
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