<rt id="bn8ez"></rt>
<label id="bn8ez"></label>

  • <span id="bn8ez"></span>

    <label id="bn8ez"><meter id="bn8ez"></meter></label>

    無為

    無為則可為,無為則至深!

      BlogJava :: 首頁 :: 聯(lián)系 :: 聚合  :: 管理
      190 Posts :: 291 Stories :: 258 Comments :: 0 Trackbacks

    Ajax 為更好的 Web 應(yīng)用程序鋪平了道路

    級別: 中級

    Philip McCarthy , 軟件開發(fā)顧問, 獨立咨詢顧問


    2005 年 10 月 20 日

    在 Web 應(yīng)用程序開發(fā)中,頁面重載循環(huán)是最大的一個使用障礙,對于 Java&#8482; 開發(fā)人員來說也是一個嚴(yán)峻的挑戰(zhàn)。在這個系列中,作者 Philip McCarthy 介紹了一種創(chuàng)建動態(tài)應(yīng)用程序體驗的開創(chuàng)性方式。Ajax(異步 javascript 和 XML)是一種編程技術(shù),它允許為基于 Java 的 Web 應(yīng)用程序把 Java 技術(shù)、XML 和 javascript 組合起來,從而打破頁面重載的范式。
    Ajax(即異步 javascript 和 XML)是一種 Web 應(yīng)用程序開發(fā)的手段,它采用客戶端腳本與 Web 服務(wù)器交換數(shù)據(jù)。所以,不必采用會中斷交互的完整頁面刷新,就可以動態(tài)地更新 Web 頁面。使用 Ajax,可以創(chuàng)建更加豐富、更加動態(tài)的 Web 應(yīng)用程序用戶界面,其即時性與可用性甚至能夠接近本機桌面應(yīng)用程序。

    Ajax 不是一項技術(shù),而更像是一個 模式 —— 一種識別和描述有用的設(shè)計技術(shù)的方式。Ajax 是新穎的,因為許多開發(fā)人員才剛剛開始知道它,但是所有實現(xiàn) Ajax 應(yīng)用程序的組件都已經(jīng)存在若干年了。它目前受到重視是因為在 2004 和 2005 年出現(xiàn)了一些基于 Ajax 技術(shù)的非常棒的動態(tài) Web UI,最著名的就是 Google 的 GMail 和 Maps 應(yīng)用程序,以及照片共享站點 Flickr。這些用戶界面具有足夠的開創(chuàng)性,有些開發(fā)人員稱之為“Web 2.0”,因此對 Ajax 應(yīng)用程序的興趣飛速上升。

    在這個系列中,我將提供使用 Ajax 開發(fā)應(yīng)用程序需要的全部工具 。在第一篇文章中,我將解釋 Ajax 背后的概念,演示為基于 Java 的 Web 應(yīng)用程序創(chuàng)建 Ajax 界面的基本步驟。我將使用代碼示例演示讓 Ajax 應(yīng)用程序如此動態(tài)的服務(wù)器端 Java 代碼和客戶端 javascript。最后,我將指出 Ajax 方式的一些不足,以及在創(chuàng)建 Ajax 應(yīng)用程序時應(yīng)當(dāng)考慮的一些更廣的可用性和訪問性問題。

    更好的購物車

    可以用 Ajax 增強傳統(tǒng)的 Web 應(yīng)用程序,通過消除頁面裝入從而簡化交互。為了演示這一點,我采用一個簡單的購物車示例,在向里面添加項目時,它會動態(tài)更新。這項技術(shù)如果整合到在線商店,那么用戶可以持續(xù)地瀏覽和向購物車中添加項目,而不必在每次點擊之后都等候完整的頁面更新。雖然這篇文章中的有些代碼特定于購物車示例,但是演示的技術(shù)可以應(yīng)用于任何 Ajax 應(yīng)用程序。清單 1 顯示了購物車示例使用的有關(guān) HTML 代碼,整篇文章中都會使用這個 HTML。


    清單1. 購物車示例的有關(guān)片斷

    <!-- 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 onclick="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 對象。顧名思義,它允許客戶端腳本執(zhí)行 HTTP 請求,并解析 XML 服務(wù)器響應(yīng)。Ajax 往返過程的第一步是創(chuàng)建 XMLHttpRequest 的實例。在 XMLHttpRequest 對象上設(shè)置請求使用的 HTTP 方法(GET 或 POST)以及目標(biāo) URL。

    現(xiàn)在,您還記得 Ajax 的第一個 a 是代表 異步(asynchronous) 嗎?在發(fā)送 HTTP 請求時,不想讓瀏覽器掛著等候服務(wù)器響應(yīng)。相反,您想讓瀏覽器繼續(xù)對用戶與頁面的交互進行響應(yīng),并在服務(wù)器響應(yīng)到達時再進行處理。為了實現(xiàn)這個要求,可以在 XMLHttpRequest 上注冊一個回調(diào)函數(shù),然后異步地分派 XMLHttpRequest。然后控制就會返回瀏覽器,當(dāng)服務(wù)器響應(yīng)到達時,會調(diào)用回調(diào)函數(shù)。

    在 Java Web 服務(wù)器上,請求同其他 HttpServletRequest 一樣到達。在解析了請求參數(shù)之后,servlet 調(diào)用必要的應(yīng)用程序邏輯,把響應(yīng)序列化成 XML,并把 XML 寫入 HttpServletResponse。

    回到客戶端時,現(xiàn)在調(diào)用注冊在 XMLHttpRequest 上的回調(diào)函數(shù),處理服務(wù)器返回的 XML 文檔。最后,根據(jù)服務(wù)器返回的數(shù)據(jù),用 javascript 操縱頁面的 HTML DOM,把用戶界面更新。圖 1 是 Ajax 往返過程的順序圖。


    圖 1. Ajax 往返過程

    現(xiàn)在您對 Ajax 往返過程有了一個高層面的認識。下面我將放大其中的每一步驟,進行更詳細的觀察。如果過程中迷了路,請回頭看圖 1 —— 由于 Ajax 方式的異步性質(zhì),所以順序并非十分簡單。


    分派 XMLHttpRequest

    我將從 Ajax 序列的起點開始:創(chuàng)建和分派來自瀏覽器的 XMLHttpRequest。不幸的是,不同的瀏覽器創(chuàng)建 XMLHttpRequest 的方法各不相同。清單 2 的 javascript 函數(shù)消除了這些依賴于瀏覽器的技巧,它可以檢測當(dāng)前瀏覽器要使用的正確方式,并返回一個可以使用的 XMLHttpRequest。最好是把它當(dāng)作輔助代碼:只要把它拷貝到 javascript 庫,并在需要 XMLHttpRequest 的時候使用它就可以了。


    清單 2. 創(chuàng)建跨瀏覽器的 XMLHttpRequest

    /*
     * Returns a new XMLHttpRequest object, or false if this browser
     * doesn't support it
     */
    function newXMLHttpRequest() {

      var xmlreq = false;

      if (window.XMLHttpRequest) {

        // Create XMLHttpRequest object in non-Microsoft browsers
        xmlreq = new XMLHttpRequest();

      } else if (window.ActiveXObject) {

        // Create XMLHttpRequest via MS ActiveX
        try {
          // Try to create XMLHttpRequest in later versions
          // of Internet Explorer

          xmlreq = new ActiveXObject("Msxml2.XMLHTTP");

        } catch (e1) {

          // Failed to create required ActiveXObject

          try {
            // Try version supported by older versions
            // of Internet Explorer

            xmlreq = new ActiveXObject("Microsoft.XMLHTTP");

          } catch (e2) {

            // Unable to create an XMLHttpRequest with ActiveX
          }
        }
      }

      return xmlreq;
    }
      
     


    稍后我將討論處理那些不支持 XMLHttpRequest 的瀏覽器的技術(shù)。目前,示例假設(shè)清單 2 的 newXMLHttpRequest 函數(shù)總能返回 XMLHttpRequest 實例。

    返回示例的購物車場景,我想要當(dāng)用戶在目錄項目上點擊 Add to Cart 時啟動 Ajax 交互。名為 addToCart() 的 onclick 處理函數(shù)負責(zé)通過 Ajax 調(diào)用來更新購物車的狀態(tài)(請參閱 清單 1)。正如清單 3 所示,addToCart() 需要做的第一件事是通過調(diào)用清單 2 的 newXMLHttpRequest() 函數(shù)得到 XMLHttpRequest 對象。接下來,它注冊一個回調(diào)函數(shù),用來接收服務(wù)器響應(yīng)(我稍后再詳細解釋這一步;請參閱 清單 6)。

    因為請求會修改服務(wù)器上的狀態(tài),所以我將用 HTTP POST 做這個工作。通過 POST 發(fā)送數(shù)據(jù)要求三個步驟。第一,需要打開與要通信的服務(wù)器資源的 POST 連接 —— 在這個示例中,服務(wù)器資源是一個映射到 URL cart.do 的 servlet。然后,我在 XMLHttpRequest 上設(shè)置一個頭,指明請求的內(nèi)容是表單 編碼的數(shù)據(jù)。最后,我用表單編碼的數(shù)據(jù)作為請求體發(fā)送請求。

    清單 3 把這些步驟放在了一起。


    清單 3. 分派 Add to Cart XMLHttpRequest

    /*
     * Adds an item, identified by its product code, to the shopping cart
     * itemCode - product code of the item to add.
     */
    function addToCart(itemCode) {

      // Obtain an XMLHttpRequest instance
      var req = newXMLHttpRequest();

      // Set the handler function to receive callback notifications
      // from the request object
      var handlerFunction = getReadyStateHandler(req, updateCart);
      req.onreadystatechange = handlerFunction;
      
      // Open an HTTP POST connection to the shopping cart servlet.
      // Third parameter specifies request is asynchronous.
      req.open("POST", "cart.do", true);

      // Specify that the body of the request contains form data
      req.setRequestHeader("Content-Type", 
                           "application/x-www-form-urlencoded");

      // Send form encoded data stating that I want to add the 
      // specified item to the cart.
      req.send("action=add&item="+itemCode);
    }


    這就是建立 Ajax 往返過程的第一部分,即創(chuàng)建和分派來自客戶機的 HTTP 請求。接下來是用來處理請求的 Java servlet 代碼。


    servlet 請求處理

    用 servlet 處理 XMLHttpRequest,與處理普通的瀏覽器 HTTP 請求一樣。可以用 HttpServletRequest.getParameter() 得到在 POST 請求體中發(fā)送的表單編碼數(shù)據(jù)。Ajax 請求被放進與來自應(yīng)用程序的常規(guī) Web 請求一樣的 HttpSession 中。對于示例購物車場景來說,這很有用,因為這讓我可以把購物車狀態(tài)封裝在 JavaBean 中,并在請求之間在會話中維持這個狀態(tài)。

    清單 4 是處理 Ajax 請求、更新購物車的簡單 servlet 的一部分。Cart bean 是從用戶會話中獲得的,并根據(jù)請求參數(shù)更新它的狀態(tài)。然后 Cart 被序列化成 XML,XML 又被寫入 ServletResponse。重要的是把響應(yīng)的內(nèi)容類型設(shè)置為 application/xml,否則 XMLHttpRequest 不會把響應(yīng)內(nèi)容解析成 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)) {

        // Add or remove items from the Cart
        if ("add".equals(action)) {
          cart.addItem(item);

        } else if ("remove".equals(action)) {
          cart.removeItems(item);

        }
      }

      // Serialize the Cart's state to XML
      String cartXml = cart.toXml();

      // Write XML to response.
      res.setContentType("application/xml");
      res.getWriter().write(cartXml);
    }

     


    清單 5 顯示了 Cart.toXml() 方法生成的示例 XML。它很簡單。請注意 cart 元素的 generated 屬性,它是 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>

     


    如果查看應(yīng)用程序源代碼(可以從 下載 一節(jié)得到)中的 Cart.java,可以看到生成 XML 的方式只是把字符串添加在一起。雖然對這個示例來說足夠了,但是對于從 Java 代碼生成 XML 來說則是最差的方式。我將在這個系列的下一期中介紹一些更好的方式。

    現(xiàn)在您已經(jīng)知道了 CartServlet 響應(yīng) XMLHttpRequest 的方式。下一件事就是返回客戶端,查看如何用 XML 響應(yīng)更新頁面狀態(tài)。


    用 javascript 進行響應(yīng)處理

    XMLHttpRequest 的 readyState 屬性是一個數(shù)值,它指出請求生命周期的狀態(tài)。它從 0(代表“未初始化”)變化到 4(代表“完成”)。每次 readyState 變化時,readystatechange 事件就觸發(fā),由 onreadystatechange 屬性指定的事件處理函數(shù)就被調(diào)用。

    在 清單 3 中已經(jīng)看到了如何調(diào)用 getReadyStateHandler() 函數(shù)創(chuàng)建事件處理函數(shù)。然后把這個事件處理函數(shù)分配給 onreadystatechange 屬性。getReadyStateHandler() 利用了這樣一個事實:函數(shù)是 javascript 中的一級對象。這意味著函數(shù)可以是其他函數(shù)的參數(shù),也可以創(chuàng)建和返回其他函數(shù)。getReadyStateHandler() 的工作是返回一個函數(shù),檢查 XMLHttpRequest 是否已經(jīng)完成,并把 XML 響應(yīng)傳遞給調(diào)用者指定的事件處理函數(shù)。清單 6 是 getReadyStateHandler() 的代碼。


    清單 6. getReadyStateHandler() 函數(shù)

    /*
     * 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) {

      // Return an anonymous function that listens to the 
      // XMLHttpRequest instance
      return function () {

        // If the request's status is "complete"
        if (req.readyState == 4) {
          
          // Check that a successful server response was received
          if (req.status == 200) {

            // Pass the XML payload of the response to the 
            // handler function
            responseXmlHandler(req.responseXML);

          } else {

            // An HTTP problem has occurred
            alert("HTTP error: "+req.status);
          }
        }
      }
    }

     

    按此在新窗口瀏覽圖片 HTTP 狀態(tài)碼

    在清單 6 中,檢查 XMLHttpRequest 的 status 屬性以查看請求是否成功完成。status 包含服務(wù)器響應(yīng)的 HTTP 狀態(tài)碼。在執(zhí)行簡單的 GET 和 POST 請求時,可以假設(shè)任何大于 200 (OK)的碼都是錯誤。如果服務(wù)器發(fā)送重定向響應(yīng)(例如 301 或 302),瀏覽器會透明地進行重定向并從新的位置獲取資源;XMLHttpRequest 看不到重定向狀態(tài)碼。而且,瀏覽器會自動添加 Cache-Control: no-cache 頭到所有 XMLHttpRequest,這樣客戶代碼永遠也不用處理 304(未經(jīng)修改)服務(wù)器響應(yīng)。
     
     
    關(guān)于 getReadyStateHandler()

    getReadyStateHandler() 是段相對復(fù)雜的代碼,特別是如果您不習(xí)慣閱讀 javascript 的話。但是通過把這個函數(shù)放在 javascript 庫中,就可以處理 Ajax 服務(wù)器響應(yīng),而不必處理 XMLHttpRequest 的內(nèi)部細節(jié)。重要的是要理解如何在自己的代碼中使用 getReadyStateHandler()。

    在 清單 3 中看到了 getReadyStateHandler() 像這樣被調(diào)用:handlerFunction = getReadyStateHandler(req, updateCart)。在這個示例中,getReadyStateHandler() 返回的函數(shù)將檢查在 req 變量中的 XMLHttpRequest 是否已經(jīng)完成,然后用響應(yīng)的 XML 調(diào)用名為 updateCart 的函數(shù)。

    提取購物車數(shù)據(jù)

    清單 7 是 updateCart() 本身的代碼。函數(shù)用 DOM 調(diào)用檢查購物車的 XML 文檔,然后更新 Web 頁面(請參閱 清單 1),反映新的購物車內(nèi)容。這里的重點是用來從 XML DOM 提取數(shù)據(jù)的調(diào)用。cart 元素的 generated 屬性是在 Cart 序列化為 XML 時生成的一個時間戳,檢查它可以保證新的購物車數(shù)據(jù)不會被舊的數(shù)據(jù)覆蓋。Ajax 請求天生是異步的,所以這個檢查可以處理服務(wù)器響應(yīng)未按次序到達的情況。


    清單 7. 更新頁面,反映購物車的 XML 文檔

    function updateCart(cartXML) {

     // Get the root "cart" element from the document
     var cart = cartXML.getElementsByTagName("cart")[0];

     // Check that a more recent cart document hasn't been processed
     // already
     var generated = cart.getAttribute("generated");
     if (generated > lastCartUpdate) {
       lastCartUpdate = generated;

       // Clear the HTML list used to display the cart contents
       var contents = document.getElementById("cart-contents");
       contents.innerHTML = "";

       // Loop over the items in the cart
       var items = cart.getElementsByTagName("item");
       for (var I = 0 ; I < items.length ; I++) {

         var item = items[I];

         // Extract the text nodes from the name and quantity elements
         var name = item.getElementsByTagName("name")[0]
                                                   .firstChild.nodevalue;
                                                   
         var quantity = item.getElementsByTagName("quantity")[0]
                                                   .firstChild.nodevalue;

         // Create and add a list item HTML element for this cart item
         var li = document.createElement("li");
         li.appendChild(document.createTextNode(name+" x "+quantity));
         contents.appendChild(li);
       }
     }

     // Update the cart's total using the value from the cart document
     document.getElementById("total").innerHTML = 
                                              cart.getAttribute("total");
    }

     


    到此,整個 Ajax 往返過程完成了,但是您可能想讓 Web 應(yīng)用程序運行一下查看實際效果(請參閱 下載 一節(jié))。這個示例非常簡單,有很多需要改進之處。例如,我包含了從購物車中清除項目的服務(wù)器端代碼,但是無法從 UI 訪問它。作為一個好的練習(xí),請試著在應(yīng)用程序現(xiàn)有的 javascript 代碼之上構(gòu)建出能夠?qū)崿F(xiàn)這個功能的代碼。


    使用 Ajax 的挑戰(zhàn)

    就像任何技術(shù)一樣,使用 Ajax 也有許多出錯的可能性。我目前在這里討論的問題還缺乏容易的解決方案,但是會隨著 Ajax 的成熟而改進。隨著開發(fā)人員社區(qū)增加開發(fā) Ajax 應(yīng)用程序的經(jīng)驗,將會記錄下最佳實踐和指南。

    XMLHttpRequest 的可用性

    Ajax 開發(fā)人員面臨的一個最大問題是:在沒有 XMLHttpRequest 可用時該如何響應(yīng)?雖然主要的現(xiàn)代瀏覽器都支持 XMLHttpRequest,但仍然有少數(shù)用戶的瀏覽器不支持,或者瀏覽器的安全設(shè)置阻止使用 XMLHttpRequest。如果開發(fā)的 Web 應(yīng)用程序要部署在企業(yè)內(nèi)部網(wǎng),那么可能擁有指定支持哪種瀏覽器的權(quán)力,從而可以認為 XMLHttpRequest 總能使用。但是,如果要部署在公共 Web 上,那么就必須當(dāng)心,如果假設(shè) XMLHttpRequest 可用,那么就可能會阻止那些使用舊的瀏覽器、殘疾人專用瀏覽器和手持設(shè)備上的輕量級瀏覽器的用戶使用您的應(yīng)用程序。

    所以,您應(yīng)當(dāng)努力讓應(yīng)用程序“平穩(wěn)降級”,在沒有 XMLHttpRequest 支持的瀏覽器中也能夠工作。在購物車的示例中,把應(yīng)用程序降級的最好方式可能是讓 Add to Cart 按鈕執(zhí)行一個常規(guī)的表單提交,刷新頁面來反映購物車更新后的狀態(tài)。Ajax 的行為應(yīng)當(dāng)在頁面裝入的時候就通過 javascript 添加到頁面,只有在 XMLHttpRequest 可用時才把 javascript 事件處理函數(shù)附加到每個 Add to Cart 按鈕。另一種方式是在用戶登錄時檢測 XMLHttpRequest 是否可用,然后相應(yīng)地提供應(yīng)用程序的 Ajax 版本或基于表單的普通版本。

    可用性考慮

    關(guān)于 Ajax 應(yīng)用程序的某些可用性問題比較普遍。例如,讓用戶知道他們的輸入已經(jīng)注冊了可能是重要的,因為沙漏光標(biāo)和 spinning 瀏覽器的常用反饋機制“throbber”對 XMLHttpRequest 不適用。一種技術(shù)是用“Now updating...”類型的信息替換 Submit 按鈕,這樣用戶在等候響應(yīng)期間就不會反復(fù)單擊按鈕了。

    另一個問題是,用戶可能沒有注意到他們正在查看的頁面的某一部分已經(jīng)更新了。可以使用不同的可視技術(shù),把用戶的眼球帶到頁面的更新區(qū)域,從而緩解這個問題。由 Ajax 更新頁面造成的其他問題還包括:“破壞了”瀏覽器的后退按鈕,地址欄中的 URL 也無法反映頁面的整個狀態(tài),妨礙了設(shè)置書簽。請參閱 參考資料 一節(jié),獲得專門解決 Ajax 應(yīng)用程序可用性問題的文章。

    服務(wù)器負載

    用 Ajax 實現(xiàn)代替普通的基于表單的 UI,會大大提高對服務(wù)器發(fā)出的請求數(shù)量。例如,一個普通的 Google Web 搜索對服務(wù)器只有一個請求,是在用戶提交搜索表單時出現(xiàn)的。而 Google Suggest 試圖自動完成搜索術(shù)語,它要在用戶輸入時向服務(wù)器發(fā)送多個請求。在開發(fā) Ajax 應(yīng)用程序時,要注意將要發(fā)送給服務(wù)器的請求數(shù)量以及由此造成的服務(wù)器負荷。降低服務(wù)器負載的辦法是,在客戶機上對請求進行緩沖并且緩存服務(wù)器響應(yīng)(如果可能的話)。還應(yīng)該嘗試將 Ajax Web 應(yīng)用程序設(shè)計為在客戶機上執(zhí)行盡可能多的邏輯,而不必聯(lián)絡(luò)服務(wù)器。

    處理異步

    非常重要的是,要理解無法保證 XMLHttpRequest 會按照分派它們的順序完成。實際上,應(yīng)當(dāng)假設(shè)它們不會按順序完成,并且在設(shè)計應(yīng)用程序時把這一點記在心上。在購物車的示例中,使用最后更新的時間戳來確保新的購物車數(shù)據(jù)不會被舊的數(shù)據(jù)覆蓋(請參閱 清單 7)。這個非常基本的方式可以用于購物車場景,但是可能不適合其他場景。所以在設(shè)計時請考慮如何處理異步的服務(wù)器響應(yīng)。


    結(jié)束語

    現(xiàn)在您對 Ajax 的基本原則應(yīng)當(dāng)有了很好的理解,對參與 Ajax 交互的客戶端和服務(wù)器端組件也應(yīng)當(dāng)有了初步的知識。這些是基于 Java 的 Ajax Web 應(yīng)用程序的構(gòu)造塊。另外,您應(yīng)當(dāng)理解了伴隨 Ajax 方式的一些高級設(shè)計問題。創(chuàng)建成功的 Ajax 應(yīng)用程序要求整體考慮,從 UI 設(shè)計到 javascript 設(shè)計,再到服務(wù)器端架構(gòu);但是您現(xiàn)在應(yīng)當(dāng)已經(jīng)武裝了考慮其他這些方面所需要的核心 Ajax 知識。

    如果使用這里演示的技術(shù)編寫大型 Ajax 應(yīng)用程序的復(fù)雜性讓您覺得恐慌,那么有好消息給您。由于 Struts、Spring 和 Hibernate 這類框架的發(fā)展把 Web 應(yīng)用程序開發(fā)從底層 Servlet API 和 JDBC 的細節(jié)中抽象出來,所以正在出現(xiàn)簡化 Ajax 開發(fā)的工具包。其中有些只側(cè)重于客戶端,提供了向頁面添加可視效果的簡便方式,或者簡化了對 XMLHttpRequest 的使用。有些則走得更遠,提供了從服務(wù)器端代碼自動生成 Ajax 接口的方式。這些框架替您完成了繁重的任務(wù),所以您可以采用更高級的方式進行 Ajax 開發(fā)。我在這個系列中將研究其中的一些。

    Ajax 社區(qū)正在快速前進,所以會有大量有價值的信息涌現(xiàn)。在閱讀這個系列的下一期之前,我建議您參考 參考資料 一節(jié)中列出的文章,特別是如果您是剛接觸 Ajax 或客戶端開發(fā)的話。您還應(yīng)當(dāng)花些時間研究示例源代碼并考慮一些增強它的方式。

    在這個系列的下一篇文章中,我將深入討論 XMLHttpRequest API,并推薦一些從 JavaBean 方便地創(chuàng)建 XML 的方式。我還將介紹替代 XML 進行 Ajax 數(shù)據(jù)傳遞的方式,例如 JSON(javascript Object Notation)輕量級數(shù)據(jù)交換格式。

    下載

    描述 名字 大小  下載方法 
    Sample code j-ajax1.zip 8 KB  FTP 
    按此在新窗口瀏覽圖片 
    按此在新窗口瀏覽圖片 關(guān)于下載方法的信息 按此在新窗口瀏覽圖片 按此在新窗口瀏覽圖片 獲取 Adobe? Reader? 



    凡是有該標(biāo)志的文章,都是該blog博主Caoer(草兒)原創(chuàng),凡是索引、收藏
    、轉(zhuǎn)載請注明來處和原文作者。非常感謝。

    posted on 2006-02-19 10:51 草兒 閱讀(136) 評論(0)  編輯  收藏 所屬分類: Java編程經(jīng)驗談ajax
    主站蜘蛛池模板: 国产无人区码卡二卡三卡免费| 免费少妇a级毛片| 亚洲精品免费网站| 亚洲av高清在线观看一区二区 | 最近免费中文在线视频| 亚洲av乱码中文一区二区三区 | 精品国产日韩亚洲一区在线| 亚洲综合在线另类色区奇米| 午夜免费1000部| 一级毛片完整版免费播放一区| 亚洲黄色高清视频| 亚洲国产精品尤物yw在线| 最近免费中文字幕大全免费 | 日韩一区二区免费视频| 成人A片产无码免费视频在线观看| 亚洲国产综合精品中文第一| 黑人精品videos亚洲人| 在线a人片天堂免费观看高清| 三年片在线观看免费| 亚洲精品无码国产片| 亚洲av色影在线| 亚洲国产日韩在线观频| 免费精品国偷自产在线在线| 亚洲免费一区二区| 亚洲aⅴ天堂av天堂无码麻豆| 久久夜色精品国产噜噜亚洲AV| 亚洲人成国产精品无码| 成全影视免费观看大全二| 亚洲精品免费在线观看| www在线观看免费视频| 亚洲成a∨人片在无码2023| 亚洲第一页中文字幕| 久久亚洲综合色一区二区三区| 国产又黄又爽又刺激的免费网址 | 全黄a免费一级毛片人人爱| 亚洲精品视频在线观看免费| 男人天堂免费视频| 日韩毛片免费一二三| 亚洲妇女无套内射精| 亚洲综合无码无在线观看| 亚洲婷婷在线视频|