kapok

          垃圾桶,嘿嘿,我藏的這么深你們還能找到啊,真牛!

            BlogJava :: 首頁 :: 新隨筆 :: 聯系 :: 聚合  :: 管理 ::
            455 隨筆 :: 0 文章 :: 76 評論 :: 0 Trackbacks
          <2005年7月>
          262728293012
          3456789
          10111213141516
          17181920212223
          24252627282930
          31123456

          常用鏈接

          留言簿(28)

          隨筆分類

          隨筆檔案

          Corba

          EAI

          Online Document

          Open Source

          Portal

          RSS Links

          Weblogic

          不錯的鏈接

          工具集合

          數據倉庫相關

          搜索

          最新評論

          閱讀排行榜

          評論排行榜

          http://blog.csdn.net/zmxj/archive/2005/05/31/384951.aspx

          AJAX in Action

          轉自:http://nicholasdsj.blogdriver.com/nicholasdsj/692452.html

          像其他人一樣,當我看到一下RIA應用,例如Google Maps和Google Suggest的時候我都非常驚訝。我希望知道是如何實現的。現在,謎底揭開了,那就是AJAX。這是在我花了一段時間研究AJAX之后才知曉的。這里有一個很好的例子讓我們知道AJAX是如何很好的應用在 JavaRSS.com 里面的。

          什么是AJAX: AJAX 是一個架構(architecture)并不是一種技術。AJAX代表異步的JavaScript和XML。

          妙語(Punch Line): 延遲加載

          問題: 當JavaRSS.com首頁加載時,他同時加載了所有條目的介紹(如果你在設置中激活了)。這些介紹只有當你鼠標移動到該條目的上面的時候才顯示。

          現在的問題是用戶不可能是鼠標移過所有的條目,所以預先加載所有的介紹不是個好主意。

          解決方案: 使用AJAX,當鼠標移過的時候從服務器動態加載條目的介紹。

          這么做可以使初始頁的加載大小減小一半甚至更多,這樣一來頁面加載就更快,就內能得到一個更好的用戶體驗。

          時序圖:

          AJAX Sequence Diagram

          我們首先會在onmouseover事件中調用JavaScript函數getDescription。下面是html代碼:

          <a href="/" onmouseover="getDescription(3,1)">Java & J2EE News<a>
          下面是 getDescription 函數的代碼:
              var url = 'http://localhost:8080/getDescription.jsp?channelId=' + channelId + '&itemId=' + itemId;
              if (window.XMLHttpRequest) {
                  req = new XMLHttpRequest();
              } else if (window.ActiveXObject) {
                  req = new ActiveXObject("Microsoft.XMLHTTP");
              }
              req.onreadystatechange = processRequest;
              req.open("GET", url, true);
              req.send(null);
          

          XMLHttpRequest 對象將用來進行http連接并取回xml文檔。我們需要檢測一下是否是IE并且創建 XMLHttpRequest 對象。

              if (window.XMLHttpRequest) {
                  req = new XMLHttpRequest();
              } else if (window.ActiveXObject) {
                  req = new ActiveXObject("Microsoft.XMLHTTP");
              }
          
          

          設置回調函數,并且發送"GET"請求至服務器接收xml文檔:

              req.onreadystatechange = processRequest;
              req.open("GET", url, true);
              req.send(null);
          

          JSP將根據適當的條目編號創建具有相應介紹的xml文檔。

          
          
          

          檢測HTTP請求返回狀態碼,狀態為200,即OK。

          function processRequest() {
              if (req.readyState == 4) {
                  if (req.status == 200) {
                    parseMessages();
                  } else {
            alert ( "Not able to retrieve description" );
                  }
              }
          }
          

          readyState = 4 的情況下文檔被加載。

          readyState Status Codes:
          	0 = uninitialized
          	1 = loading
          	2 = loaded
          	3 = interactive
          	4 = complete
          

          最后,我們解析XML文檔并顯示介紹。

          問題: 唯一的問題就是我遭遇到的 "&" 字符。 "&" 在XML文檔里面不是一個有效字符。所以我需要將他轉換成 "&"。

          function parseMessages() {
          	response  = req.responseXML.documentElement;
          	itemDescription = response.getElementsByTagName('description')[0].firstChild.data;
          	alert(itemDescription);
          }
          

          下面是所有的代碼:

          HTML Code:
          <a href="/" onmouseover="getDescription(3,1)">Java & J2EE News<a>
          
          JavaScript Code:
          
          function getDescription(channelId,itemId) {
              var url = 'http://localhost:8080/getDescription.jsp?channelId=' + channelId + '&itemId=' + itemId;
              if (window.XMLHttpRequest) {
                  req = new XMLHttpRequest();
              } else if (window.ActiveXObject) {
                  req = new ActiveXObject("Microsoft.XMLHTTP");
              }
              req.onreadystatechange = processRequest;
              req.open("GET", url, true);
              req.send(null);
          }
          
          function processRequest() {
              if (req.readyState == 4) {
                  if (req.status == 200) {
                    parseMessages();
                  } else {
                    alert ( "Not able to retrieve description" );
          				}
              }
          }
          
          function parseMessages() {
          	response  = req.responseXML.documentElement;
          	itemDescription = response.getElementsByTagName('description')[0].firstChild.data;
          	alert ( itemDescription );
          }
          
          JSP Code:
          
          
          

          資源:
          AJAX Java BluePrints Solutions Catalog
          AJAX in Wikipedia
          W3C HTTP Status Codes

          使用AJAX的Google站點:
          Gmail
          Google Suggest
          Google Maps

          關于作者: Jay 具有10年以上的IT工作經驗,并且自從Java & J2EE誕生那天起就開始接觸他們了。

          譯者Nicholas@NirvanaStudio

          posted on 2005-07-27 12:17 笨笨 閱讀(245) 評論(0)  編輯  收藏 所屬分類: J2EEALL
          主站蜘蛛池模板: 商都县| 德清县| 隆子县| 永福县| 庆阳市| 海南省| 广饶县| 兴安盟| 岑溪市| 秦安县| 凌云县| 镇平县| 沙洋县| 临桂县| 宜川县| 大竹县| 灵山县| 固镇县| 萝北县| 嘉峪关市| 工布江达县| 嘉禾县| 丰城市| 巍山| 襄城县| 家居| 遂宁市| 盖州市| 乐山市| 阳高县| 临泽县| 垣曲县| 平江县| 华亭县| 临清市| 卓尼县| 和田县| 上高县| 彭泽县| 泰和县| 安龙县|