原文地址：http://blog.csdn.net/eric_lu/archive/2005/10/11/499831.aspx
面向Java開發者的Ajax：構建動態的Java應用程序
Ajax鋪設了更好的開發Web應用的道路
級別：中級
Philip McCarthy (mailto:[email protected]?subject=Build dynamic Java applications), Software Development Consultant, Independent Consultant
9月20日2005年
頁面重載提出了一個在Web應用開發中最大的可用性障礙，對於java開發來說也是一個重大的挑戰。在本系列中，作者Philip McCarthy介紹了通過後臺通道的方法來創建動態Web應用的經驗。Ajax（Asynchronous JavaScript and XML）是一個結合了Java技術、XML、以及JavaScript的編程技術，可以讓你構建基於Java技術的Web應用，並打破了使用頁面重載的慣例。
Ajax，異步JavaScript與XML，是使用客戶端腳本與Web服務器交換數據的Web應用開發方法。這樣，Web頁面不用打斷交互流程進行重新加裁，就可以動態地更新。使用Ajax，你可以創建接近本地桌面應用的，直接的、高可用的、更豐富的、更動態的Web用戶接口界面。
Ajax不是一個技術，它更像是一個模式—標誌並描述有用的設計技巧的一種方法。對於剛瞭解它的許多開發人員來說，它是一種新的感覺，但是實現Ajax的所有組件都已存在了許多年。當前的熱鬧是因爲在2004與2005年出現了一些基於Ajax的非常動態的WebUI，尤其是Google的GMail與Maps應用系統、與照片共享網站Flickr。這些UI充分地使用了後臺通道，也被一些開發者稱爲“Web 2.0”，並導致了大家對Ajax應用興趣的猛漲。
在本系列中，我將給出所有你需要的開發你自己的Ajax應用的工具。在這第一篇文章中，我將解釋在Ajax背後的概念，示範爲基於Web的應用系統創建一個Ajax接口的基本步驟。我將使用示例代碼來示範實現Ajax動態接口的服務器端Java代碼與客戶端JavaScript腳本。最後，我將指出一些Ajax方法中易犯的錯誤，以及在創建Ajax應用時應該考慮的廣泛範圍內的可用性與易訪問性方面的問題。
一個更好的購物車
你可以使用Ajax來加強傳統的Web應用，通過消除頁面載入來使交互更流暢。爲了示範它，我將使用一個簡單的，能動態更新加入的物品購物車。結合一個在線商店，這個方法可以不用等待點擊後的頁面重載，而讓我們繼續瀏覽並挑選物品到購物車中。雖然，本文中的代碼針對購物車例子，但其中展示的技術可以用到其它的Ajax應用中。列表1中展示了購物車示例所使用的HTML代碼。在整篇文章中，我都將會引用到這些HTML代碼。
列表1：購物車示例的相關代碼片斷
<!-- Table of products from store's catalog, one row per item -->
<th>Name</th> <th>Description</th> <th>Price</th> <th></th>
...
<tr>
<!-- Item details -->
<td>Hat</td> <td>Stylish bowler hat</td> <td>$19.99</td>
<td>
<!-- Click button to add item to cart via Ajax request -->
<button οnclick="addToCart('hat001')">Add to Cart</button>
</td>
</tr>
...
<!-- Representation of shopping cart, updated asynchronously -->
<ul id="cart-contents">
<!-- List-items will be added here for each item in the cart -->
</ul>
<!-- Total cost of items in cart displayed inside span element -->
Total cost: <span id="total">$0.00</span>
Ajax處理過程
一個Ajax交互從一個稱爲XMLHttpRequest的JavaScript對象開始。如同名字所暗示的，它允許一個客戶端腳本來執行HTTP請求，並且將會解析一個XML格式的服務器響應。Ajax處理過程中的第一步是創建一個XMLHttpRequest實例。使用HTTP方法（GET或POST）來處理請求，並將目標URL設置到XMLHttpRequest對象上。
現在，記住Ajax如何首先處於異步處理狀態？當你發送HTTP請求，你不希望瀏覽器掛起並等待服務器的響應，取而代之的是，你希望通過頁面繼續響應用戶的界面交互，並在服務器響應真正到達後處理它們。要完成它，你可以向XMLHttpRequest註冊一個回調函數，並異步地派發XMLHttpRequest請求。控制權馬上就被返回到瀏覽器，當服務器響應到達時，回調函數將會被調用。
在Java Web服務器上，到達的請求與任何其它HttpServletRequest一樣。在解析請求參數後，servlet執行必需的應用邏輯，將響應序列化到XML中，並將它寫回HttpServletResponse。
回到客戶端，註冊在XMLHttpRequest上的回調函數現在會被調用來處理由服務器返回的XML文檔。最後，通過更新用戶界面來響應服務器傳輸過來數據，使用JavaScript來操縱頁面的HTML DOM。圖1是Ajax處理過程的一個時序圖。
圖1：Ajax處理過程
現在，你應該對Ajax處理過程有了一個高層視圖。我將進入其中的每一步看看更細節的內容。如果你找不到自己的位置時，就回頭再看看圖1，加—因爲Ajax方法的異步本質，所以時序圖並不是筆直向前的。
發送一個XMLHttpRequest
我將從Ajax時序圖的起點開始：從瀏覽器創建併發送一個XMLHttpRequest。不幸的是，在不同的瀏覽器中創建XMLHttpRequest的方法都不一樣。列表2中示例的JavaScript函數消除了這些與瀏覽器種類相關的問題，正確檢測與當前瀏覽器相關的方法，並返回一個可以使用的XMLHttpRequest。最好將它看成備用代碼，將它簡單拷貝到你的JavaScript庫中，在需要一個XMLHttpRequest時使用它即可。
列表2：跨瀏覽器創建一個XMLHttpRequest
/*
* 返回一個新建的XMLHttpRequest對象，若瀏覽器不支持則失敗
*/
function newXMLHttpRequest() {
var xmlreq = false;
if (window.XMLHttpRequest) {
// 在非Microsoft瀏覽器中創建XMLHttpRequest對象
xmlreq = new XMLHttpRequest();
} else if (window.ActiveXObject) {
//通過MS ActiveX創建XMLHttpRequest
try {
// 嘗試按新版InternetExplorer方法創建
xmlreq = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e1) {
// 創建請求的ActiveX對象失敗
try {
// 嘗試按老版InternetExplorer方法創建
xmlreq = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e2) {
// 不能通過ActiveX創建XMLHttpRequest
}
}
}
return xmlreq;
}
稍後，我將討論如何對待不支持XMLHttpReauest的瀏覽器的一些技巧。現在，列表2中展示的示例函數將總是可以返回一個XMLHttpReauest實例。
回到購物車例子的場景中，只要用戶針對某一個目錄條目點擊了Add to Cart按鈕，我就要調用一個Ajax交互。名爲addToCart()的onclick函數通過Ajax調用（如列表1中所示）來負責更新購物車的狀態。在列表3中，addToCart()要做的第一件事就是通過調用newXMLHttpReauest函數（如列表2中所示）來獲取一個XMLHttpRequest的實例，並且註冊一個回調函數來接受服務器響應（我將在稍後詳細解釋，請參見列表6）。
因爲，此請求將會修改服務器狀態，我將使用一個HTTP POST來處理它。通過POST傳送數據需要三個步驟：首先，我需要打開一個到進行通訊的服務器資源的POST連接—在現在例子中是一個URL映射爲cart.do的服務器端servlet。下一步，設置XMLHttpRequest的頭信息，以標誌請求的內容爲form-encoded。最後，將form-encoded數據作爲請求體，併發送此請求。
列表3中集中展示了這些步驟。
列表3：發送一個添加到購物車XMLHttpRequest
/*
* 通過產品編碼，在購物車中添加一個條目
* itemCode – 需要添加條目的產品編碼
*/
function addToCart(itemCode) {
// 獲取一個XMLHttpRequest實例
var req = newXMLHttpRequest();
// 設置用來從請求對象接收回調通知的句柄函數
var handlerFunction = getReadyStateHandler(req, updateCart);
req.onreadystatechange = handlerFunction;
// 打開一個聯接到購物車servlet的HTTP POST聯接
// 第三個參數表示請求是異步的
req.open("POST", "cart.do", true);
// 指示請求體包含form數據
req.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded");
// 發送標誌需要添加到購物車中條目的form-encoded數據
req.send("action=add&item="+itemCode);
}
結合以上內容，你可以瞭解到Ajax處理過程的第一部分—就是在客戶端創建併發送HTTP請求。下一步是用來處理請求的Java Servlet代碼。
Servlet請求處理
通過一個servlet來處理XMLHttpRequest與處理一個來自瀏覽器的普通的HTTP請求基本上相似。可以通過調用HttpServletRequest.getParameter()來獲取由POST請求體傳送過來的form-encoded數據。Ajax請求也與普通的WEB請求樣都成爲此應用同一HttpSession會話進程的一部分。這對於購物車例子來說很有肜，因爲我們可以通過會話將多個請求的狀態都保存到同一個JavaBean購物車對象中，並可以序列化。
列表4是處理Ajax請求並更新購物車的簡單servlet的代碼片斷。從用戶會話中檢索出一個Cart Bean，並按請求的參數更新它。之後Cart Bean被序列化到XML，並被寫回ServletRespone。注意，一定要將響應內容的類型設置爲application/xml，否則，XMLHttpRequest將不能將響應內容解析爲一個XML DOM。
列表4：處理Ajax請求的Servlet代碼
public void doPost(HttpServletRequest req, HttpServletResponse res)
throws java.io.IOException {
Cart cart = getCartFromSession(req);
String action = req.getParameter("action");
String item = req.getParameter("item");
if ((action != null)&&(item != null)) {
// 在購物車中添加或移除一個條目
if ("add".equals(action)) {
cart.addItem(item);
} else if ("remove".equals(action)) {
cart.removeItems(item);
}
}
// 將購物車狀態序列化到XML
String cartXml = cart.toXml();
// 將XML寫入response.
res.setContentType("application/xml");
res.getWriter().write(cartXml);
}
列表5展示了由Cart.toXml()方法生成的XML。注意到生成的cart元素的屬性，是一個通過System.currentTimeMillis()生成的時間戳。
列表5：Cart對象序列化得到的XML
<?xml version="1.0"?>
<cart generated="1123969988414" total="$171.95">
<item code="hat001">
<name>Hat</name>
<quantity>2</quantity>
</item>
<item code="cha001">
<name>Chair</name>
<quantity>1</quantity>
</item>
<item code="dog001">
<name>Dog</name>
<quantity>1</quantity>
</item>
</cart>
如果你觀察一下下載站點提供的例子應用源碼中的Cart.java，你將會看到它通過簡單地追加字符串來生成XML。對於本例子來說，它已經足夠了，我將會在本系統文章的以後一期中介紹一些更好的方法。
現在你知道了CartServlet如何響應一個XMLHttpRequest。下一步是返回到客戶端，如何用服務器響應來更新頁面狀態。
通過JavaScript來處理服務器響應
XMLHttpRequest的readyState屬性是一個給出請求生命週期狀態的數字值。它從表示“未初始化”的0變化到表示“完成”的4。每次readyState改變時，都會引發readystatechange事件，通過onreadystatechange屬性配置回調處理函數將會被調用。
在列表3中，你已看到通過調用函數getReadyStateHandler()創建了一個處理函數，並被配置給onreadystatechange屬性。getReadyStateHandler()使用了這樣的事實：函數是JavaScript中的主要對象。這意味着，函數可以作爲參數被傳遞到其它函數，並且可以創建並返回其它函數。getReadystateHandler()要做是就是返回一個函數，來檢查XMLHttpRequet是否已經完成處理，並傳遞XML服務器響應到由調用者指定的處理函數。列表6是getReadyStateHandler()的代碼。
列表6：函數getReadyStateHandler()
/*
* Returns a function that waits for the specified XMLHttpRequest
* to complete, then passes its XML response to the given handler function.
* req - The XMLHttpRequest whose state is changing
* responseXmlHandler - Function to pass the XML response to
*/
function getReadyStateHandler(req, responseXmlHandler) {
// 返回一個監聽XMLHttpRequest實例的匿名函數
return function () {
// 如果請求的狀態是“完成”
if (req.readyState == 4) {
// 檢查是否成功接收了服務器響應
if (req.status == 200) {
// 將載有響應信息的XML傳遞到處理函數
responseXmlHandler(req.responseXML);
} else {
// 有HTTP問題發生
alert("HTTP error: "+req.status);
}
}
}
}
HTTP狀態碼
在列表6中，XMLHttpRequest的status屬性被測試用來確定請求是否成功完成。當處理簡單的GET與POST請求，你可以認爲只要不是200（OK）的狀態就表示發生了錯誤。若服務器發送了一個重定向響應（例如，301或302），瀏覽器會透明地完成重定向並從新位置獲取相應的資源；XMLHttpRequest不會看到重定向狀態碼。同時，瀏覽器自動添加一個緩存控制：對於所有XMLHttpRequest都使用no-cache header，這樣客戶端代碼就可以不用處理304（not-modified）響應。
關於getReadyStateHandler()
getReadyStateHandler()是相對比較複雜的一段代碼，特別當你不能熟悉閱讀JavaScript時。折中方案是在你的JavaScript庫中包含此函數，你可以簡單地處理Ajax服務器響應，而不用去注意XMLHttpRequest的內部細節。重要是你自己要理解在代碼中如何使用getReadyStateHandler()。
在列表3中，你看到getReadyStateHandler()被這樣調用：
handlerFunction=getReadyStateHandler(req,updateCart)。
由它返回的函數將會檢查在req變量中的XMLHttpRequest是否已完成，並調用由updateCart指定的回調方法處理響應XML。
提取購物車數據
列表7中展示了updateCart（）中的代碼。此函數使用DOM來解析購物車XML文檔，並更新WEB頁面（參見列表1）來反映新的購物車內容。注意對用來提取數據的XML DOM的調用。Cart元素上生成的屬性，即序列化時生成的時間戳，通過檢測它可以保證不會用老的數據來覆蓋新的購物車數據。Ajax請求天生就是異步的，通過這個檢測可以有效避免在過程外到達的服務器響應的干擾。
列表7：更新頁面來反映出購物車XML文檔內容
function updateCart(cartXML) {
// 從文檔中獲取根元素“cart”
var cart = cartXML.getElementsByTagName("cart")[0];
// 保證此文檔是最新的
var generated = cart.getAttribute("generated");
if (generated > lastCartUpdate) {
lastCartUpdate = generated;
// 清除HTML列表，用來顯示購物車內容
var contents = document.getElementById("cart-contents");
contents.innerHTML = "";
// 在購物車內按條目循環
var items = cart.getElementsByTagName("item");
for (var I = 0 ; I < items.length ; I++) {
var item = items[I];
// 從name與quantity元素中提取文本節點
var name = item.getElementsByTagName("name")[0].firstChild.nodeValue;
var quantity = item.getElementsByTagName("quantity")[0].firstChild.nodeValue;
// 爲條目創建並添加到HTML列表中
var li = document.createElement("li");
li.appendChild(document.createTextNode(name+" x "+quantity));
contents.appendChild(li);
}
}
// 更新購物車的金額累計
document.getElementById("total").innerHTML = cart.getAttribute("total");
}
到現在，關於Ajax處理過程的教程已經結束，也許你想讓應用運行起來，並看看它的實際運作（參見下載部分）。這個例子非常簡單，有非常大的改進的餘地。比如，我在服務器端代碼中包含了從購物車中移除條目的代碼，但從客戶端UI中沒有訪問的途徑。作爲一個練習，嘗試在現有的JavaScript基礎上實際這個功能。
使用Ajax的挑戰
與任何技術一樣，使用Ajax在相當多的方面都可能範錯誤。我在這兒討論的問題目前都缺少解決方案，並將會隨着Ajax的成熟而解決或提高。隨着開發Ajax應用經驗的不斷獲取，開發者社區中將會出現最好的實踐經驗與指導方針。
XMLHttpRequest的有效性
Ajax開發者面對的一個最大問題是當XMLHttpRequest不可用時如何反應。雖然大部分現代瀏覽器支持XMLHttpRequest，但還是有少量的用戶，他們的瀏覽器不能支持，或由於瀏覽器安全設置而阻止對XMLHttpRequest的使用。若你的Web應用發佈於公司內部的Intranet上，你很可能可以指定支持哪種瀏覽器，並可以確保XMLHttpRequest是可用的。若你在公共WEB上發佈，則你必須意識到由於假定XMLHttpRequest是可用的，所有就阻止了老瀏覽器、手持設備瀏覽器等等用戶來使用你的系統。
然而，你應該盡力保證應用系統“正常降級”使用，在系統中保留適用於不支持XMLHttpRequest的瀏覽器的功能。在購物車例子中，最好的方法是有一個Add to Cart按鈕，可以進行常規的提交處理，並刷新頁面來反映購物車狀態的變化。Ajax行衛可以在頁面被載入時通過JavaScript添加到頁面中，只在XMLHttpRequest可用的情況下，爲每個Add to Cart按鈕加上JavaScript處理函數。另一個方法是在用戶登錄時檢測XMLHttpRequest，再決定是提供Ajax版本還是常規基於form提交的版本。
可用性考慮
圍繞着Ajax應用的大部分問題都是很普通的問題。例如，讓用戶知道他們的輸入已經被註冊並處理，是很重要的，因爲在XMLHttpRequest處理過程中並不能提供通常的漏斗旋轉光標。一種方法是將“確認”按扭上的文本替換爲“正在更新中…”，以避免用戶在等待響應時多次點擊按鈕。
另一個問題是，用戶可能沒有注意到他們正在觀看的頁面已經被更新。可以通過使用各種視覺技巧來將用戶的眼光吸引到頁面的更新區域。還有一個問題是通過Ajax更新頁面打斷了瀏覽器“退回前頁”按鈕的正常工作，地址欄中的URL不能反映頁面的全部狀態，並且不能使用書籤功能。參見Resource章節中列出的網站地址上的文章來了解更多Ajax應用關於可用性方面的問題。
服務器負載
使用Ajax界面代替傳統的基於form的界面可能戲劇性地增加傳遞到服務器的請求數量。例如，一個普通的Google搜索給服務器造成一次命中，並在用戶確認搜索表單時發生。然而，Google Suggest，將會試圖自動完成你的搜索詞，在用戶打字時將會往服務器發送多個請求。在開發一個Ajax應用時，要注意到你將會發送多少請求到用戶器端，以及服務器的負載指標。你可以通過在客戶端適當地緩存請求、與服務器響應來緩減負載壓力。你也應該在設計Ajax應用時儘量在客戶端處理更多的邏輯，而不用與服務器端通訊。
處理異步
一定要記住，沒有任何東西可以保證XMLHttpRequest將 會按照它們被髮送的順序來依次結束。實際上，你在設計系統時，腦子裏應該始終假定它們不會按原來順序結束。在購物車例子中，使用了一個最後更新的時間戳來 保證最新的數據不會被改寫。這個非常基本的方法可以在購物車場景中工作，但可能不能在其它情況下工作。在設計時刻就要考慮你該如何處理異步服務器響應。
結論
你現在應該對於Ajax的基本原則有了一個良好的瞭解，另外，你應該理解一些更高級的隨Ajax方法而來的設計問題。創建一個成功的Ajax應用需要一系列的方法—從JavaScript UI設計到服務器端架構—但是你現在應該已經具備了需要使用到的Ajax核心知識。