DIV CSS 佈局教程網

　　頁面重載提出了一個在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請求。控制權馬上就被返回到浏覽器，當服務器響應到達時，回調函數將會被調用。
　　
　　在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核心知識。