頁面重載提出了一個在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代碼。
Ajax處理過程
一個Ajax交互從一個稱為XMLHttpRequest的JavaScript對象開始。如同名字所暗示的，它允許一個客戶端腳本來執行HTTP請求，并且將會解析一個XML格式的服務器響應。Ajax處理過程中的第一步是創建一個XMLHttpRequest實例。使用HTTP方法(GET或POST)來處理請求，并將目標URL設置到XMLHttpRequest對象上。
現在，記住Ajax如何首先處于異步處理狀態?當你發送HTTP請求，你不希望瀏覽器掛起并等待服務器的響應，取而代之的是，你希望通過頁面繼續響應用戶的界面交互，并在服務器響應真正到達后處理它們。
要完成它，你可以向XMLHttpRequest注冊一個回調函數，并異步地派發XMLHttpRequest請求�？刂茩囫R上就被返回到瀏覽器，當服務器響應到達時，回調函數將會被調用。
在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 {
// 嘗試按新版Inte.netExplorer方法創建
xmlreq = new ActiveXObject
("Msxml2.XMLHTTP");
} catch (e1) {
// 創建請求的ActiveX對象失敗
try {
// 嘗試按老版InternetExplorer方法創建
xmlreq = new ActiveXObject
("Microsoft.XMLHTTP");
} catch (e2) {
// 不能通過ActiveX創建XMLHttpRequest
}
}
}
return xmlreq;
}
稍后，我將討論如何對待不支持XMLHttpReauest的瀏覽器的一些技巧�，F在，列表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核心知識。
文章來源于領測軟件測試網 http://www.kjueaiud.com/
