原始的AJax：直接使用XMLHttpRequest
如上所述，AJax的核心是JavaScript對象XMLHttpRequest。下面的示例文章評價系統將帶您熟悉AJax的底層基本知識：http://tearesolutions.com/ajax-demo/raw-AJax.Html。注：如果您已經在本地WebLogic容器中安裝了AJax-demo.war，可以導航到http://localhost:7001/ajax-demo/raw-AJax.Html，
浏覽應用程序，參與投票，並親眼看它如何運轉。熟悉了該應用程序之後，繼續閱讀，進一步了解其工作原理細節。
首先，您擁有一些簡單的定位點標記，它連接到一個JavaScriptcastVote(rank)函數。
function castVote(rank) {
var url = "/AJax-demo/static-article-ranking.Html";
var callback = processAJaxResponse;
executeXhr(callback, url);
}
該函數為您想要與之通信的服務器資源創建一個URL並調用內部函數executeXhr，提供一個回調JavaScript函數，一旦服務器響應可用，該函數就被執行。由於我希望它運行在一個簡單的apache環境中，“cast vote URL”只是一個簡單的Html頁面。在實際情況中，被調用的URL將記錄票數並動態地呈現包含投票總數的響應。
下一步是發出一個XMLHttpRequest請求：
function executeXhr(callback, url) {
// branch for native XMLHttpRequest object
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = callback;
req.open("GET", url, true);
req.send(null);
} // branch for IE/Windows ActiveX version
else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = callback;
req.open("GET", url, true);
req.send();
}
}
}
如您所見，執行一個XMLHttpRequest並不簡單，但非常直觀。和平常一樣，在JavaScript領域，大部分的工作量都花在確保浏覽器兼容方面。在這種情況下，首先要確定XMLHttpRequest是否可用。如果不能用，很可能要使用Internet Explorer，這樣就要使用所提供的ActiveX實現。
executeXhr()方法中最關鍵的部分是這兩行：
req.onreadystatechange = callback;
req.open("GET", url, true);
第一行定義了JavaScript回調函數，您希望一旦響應就緒它就自動執行，而req.open()方法中所指定的“true”標志說明您想要異步執行該請求。
一旦服務器處理完XMLHttpRequest並返回給浏覽器，使用req.onreadystatechange指派所設置的回調方法將被自動調用。
function processAJaxResponse() {
// only if req shows "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200) {
502 502'votes').innerHtml = req.responseText;
} else {
alert("There was a problem retrIEving the XML data:
" +
req.statusText);
}
}
}
該代碼相當簡潔，並且使用了幾個幻數，這使得難以一下子看出發生了什麼。為了弄清楚這一點，下面的表格列舉了常用的XMLHttpRequest對象屬性。
屬性
描述
onreadystatechange
每次狀態改變所觸發事件的事件處理程序
readyState
對象狀態值：
* 0 = 未初始化（uninitialized）
* 1 = 正在加載（loading）
* 2 = 加載完畢（loaded）
* 3 = 交互（interactive）
* 4 = 完成（complete）
responseText
從服務器進程返回的數據的字符串形式
responseXML
從服務器進程返回的DOM兼容的文檔數據對象
status
從服務器返回的數字代碼，比如404（未找到）或200（就緒）
statusText
伴隨狀態碼的字符串信息
現在processVoteResponse()函數開始顯示出其意義了。它首先檢查XMLHttpRequest的整體狀態以保證它已經完成（readyStatus == 4），然後根據服務器的設定詢問請求狀態。如果一切正常（status == 200）,就使用innerHtml屬性重寫DOM的“votes”節點的內容。
既然您親眼看到了XMLHttpRequest對象是如何工作的，就讓我們利用一個旨在簡化Javascript與Java應用程序之間的異步通信的框架來對具體的細節進行抽象。
AJax: DWR方式
按照與文章評價系統相同的流程，我們將使用Direct Web Remoting（DWR）框架實現同樣的功能。
假定文章和投票結果存儲在一個數據庫中，使用某種對象/關系映射技術來完成抽取工作。為了部署起來盡可能地簡單，我們不會使用數據庫進行持久性存儲。此外，為使應用程序盡可能通用，也不使用Web框架。相反，應用程序將從一個靜態Html文件開始，可以認為它由服務器動態地呈現。除了這些簡化措施，應用程序還應該使用Spring Framework關聯一切，以便輕松看出如何在一個“真實的”應用程序中使用DWR。
現在應該下載示例應用程序並熟悉它。該應用程序被壓縮為標准的WAR文件，因此您可以把它放置到任何一個Web容器中——無需進行配置。部署完畢之後，就可以導航到http://localhost:7001/ajax_demo/dwr-AJax.Html來運行程序。
可以查看Html 源代碼，了解它如何工作。給人印象最深的是，代碼如此簡單——所有與服務器的交互都隱藏在JavaScript對象ajaxSampleSvc的後面。更加令人驚訝的是，AJaxSampleSvc服務不是由手工編寫而是完全自動生成的！讓我們繼續，看看這是如何做到的。
引入DWR
如同在“原始的AJax”一節所演示的那樣，直接使用XMLHttpRequest創建異步請求非常麻煩。不僅JavaScript代碼冗長，而且必須考慮服務器端為定位AJax請求到適當的服務所需做的工作，並將結果封送到浏覽器。
設計DWR的目的是要處理將Web頁面安裝到後端服務上所需的所有信息管道。它是一個Java框架，可以很輕松地將它插入到Web應用程序中，以便JavaScript代碼可以調用服務器上的服務。它甚至直接與Spring Framework集成，從而允許用戶直接向Web客戶機公開bean。
DWR真正的巧妙之處是，在用戶配置了要向客戶機公開的服務之後，它使用反射來生成Javascript對象，以便Web頁面能夠使用這些對象來訪問該服務。然後Web頁面只需接合到生成的JavaScript對象，就像它們是直接使用服務一樣；DWR無縫地處理所有有關AJax和請求定位的瑣碎細節。
讓我們仔細分析一下示例代碼，弄清它是如何工作的。
應用程序細節：DWR分析
關於應用程序，首先要注意的是，它是一個標准的Java應用程序，使用分層架構（Layered Architecture）設計模式。使用DWR通過JavaScript公開一些服務並不影響您的設計。
下面是一個簡單的Java服務，我們將使用DWR框架直接將其向JavaScript代碼公開：
package com.tearesolutions.service;
public interface AJaxSampleSvc {
Article castVote(int rank);
}
這是一個被簡化到幾乎不可能的程度的例子，其中只有一篇文章可以投票。該服務由Spring管理，它使用的bean名是AJaxSampleSvc，它的持久性需求則依賴於ArticleDao。詳情請參見applicationContext.XML。
為了把該服務公開為JavaScript對象，需要配置DWR，添加dwr.XML文件到WEB-INF目錄下：
<?XML version="1.0" encoding="UTF-8"?>
<!DOCTYPE dwr PUBLIC
"-//GetAhead Limited//DTD Direct Web Remoting 0.4//EN"
"http://www.getahead.ltd.uk/dwr/dwr.dtd">
<dwr>
<allow>
<create creator="spring" Javascript="AJaxSampleSvc">
<param name="beanName" value="AJaxSampleSvc" />
</create>
<convert converter="bean" match="com.tearesolutions.model.Article"/>
<exclude method="toString"/>
<exclude method="setArticleDao"/>
</allow>
</dwr>
dwr.XML文件告訴DWR哪些服務是要直接向JavaScript代碼公開的。注意，已經要求公開Spring bean AJaxSampleSvc。DWR將自動找到由應用程序設置的SpringApplicationContext。為此，必須使用標准的servlet 過濾器ContextLoaderListener來初始化Spring ApplicationContext。
DWR被設置為一個servlet，所以把它的定義添加到web.XML：
<?XML version="1.0" encoding="UTF-8"?>
<!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD
Web Application 2.3//EN" "http://Java.sun.com/dtd/web-app_2_3.dtd">
<web-app>
<display-name>AJax Examples</display-name>
<listener>
<listener-class>
org.springframework.web.context.ContextLoaderListener
</listener-class>
</listener>
<servlet>
<servlet-name>AJax_sample</servlet-name>
<servlet-class>com.tearesolutions.web.AJaxSampleServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet>
<servlet-name>dwr-invoker</servlet-name>
<display-name>DWR Servlet</display-name>
<description>Direct Web Remoter Servlet</description>
<servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>
</init-param>
</servlet>
<servlet-mapping>
<servlet-name>AJax_sample</servlet-name>
<url-pattern>/AJax_sample</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>dwr-invoker</servlet-name>
<url-pattern>/dwr/*</url-pattern>
</servlet-mapping>
</web-app>
做完這些之後，可以加載http://localhost:7001/AJax-demo/dwr，看看哪些服務可用。結果如下：
圖3. 可用的服務
單擊AJaxSampleSvc鏈接，查看有關如何在Html頁面內直接使用服務的示例實現。其中包含的兩個JavaScript文件完成了大部分的功能：
<script type='text/Javascript'
src='/ajax-demo/dwr/interface/AJaxSampleSvc.JS'></script>
<script type='text/Javascript'
src='/AJax-demo/dwr/engine.JS'></script>
AJaxSampleSvc.JS是動態生成的：
function AJaxSampleSvc() { }
AJaxSampleSvc.castVote = function(callback, p0)
{
DWREngine._execute(callback, '/AJax-demo/dwr',
'AJaxSampleSvc', 'castVote', p0);
}
現在可以使用Javascript對象AJaxSampleSvc替換所有的XMLHttpRequest代碼，從而重構raw-ajax.html文件。可以在dwr-AJax.Html文件中看到改動的結果；下面是新的JavaScript函數：
function castVote(rank) {
AJaxSampleSvc.castVote(processResponse, rank);
}
function processResponse(data) {
var voteText = "
Thanks for Voting!
"
+ "
Current ranking: " + data.voteAverage + " out of 5
"
+ "
Number of votes placed: " + data.numberOfVotes + "
";
502 502'votes').innerHtml = voteText;
}
驚人地簡單，不是嗎？由AJaxSampleSvc對象返回的Article域對象序列化為一個JavaScript對象，允許在它上面調用諸如numberOfVotes()和voteAverage()之類的方法。在動態生成並插入到DIV元素“votes”中的Html代碼內使用這些數據。
下一步工作
在後續文章中，我將繼續有關AJax的話題，涉及下面這些方面：
* AJax最佳實踐
像許多技術一樣，Ajax是一把雙刃劍。對於一些用例，其應用程序其實沒有必要使用Ajax，使用了反而有損可用性。我將介紹一些不適合使用的模式，突出說明Ajax的一些消極方面，並展示一些有助於緩和這些消極方面的機制。例如，對Netflix電影浏覽器來說，AJax是合適的解決方案嗎？或者，如何提示用戶確實出了一些問題，而再次單擊按鈕也無濟於事？
* 管理跨請求的狀態
在使用AJax時，最初的文檔DOM會發生一些變化，並且有大量的頁面狀態信息存儲在客戶端變量中。當用戶跟蹤一個鏈接到應用程序中的另一個頁面時，狀態就丟失了。當用戶按照慣例單擊Back按鈕時，呈現給他們的是緩存中的初始頁面。這會使用戶感到非常迷惑！
* 調試技巧
使用JavaScript在客戶端執行更多的工作時，如果事情不按預期方式進行，就需要一些調試工具來幫助弄清出現了什麼問題。