JavaRSS.com中的Ajax應用

ajax|rss

【導讀】AJAX 是一個架構(architecture)並不是一種技術，本文作者介紹AJAX是如何很好的應用在 www.JavaRSS.com 裡面的。

像其他人一樣，當我看到一下RIA應用，例如Google Maps和Google Suggest的時候我都非常驚訝。我希望知道是如何?的。現在，謎底揭開了，那就是AJAX。這是在我花了一段時間研究AJAX之後才知曉的。這裡有一個很好的例子讓我們知道AJAX是如何很好的應用在 www.JavaRSS.com 裡面的。 什麼是AJAX：AJAX 是一個架構(architecture)並不是一種技術。AJAX代表非同步JavaScript和XML。 妙語(Punch Line)： 消極式載入 問題：當JavaRSS.com首頁載入時，他同時載入了所有條目的介紹(如果你在設定中啟用了)。這些介紹只有當你滑鼠移動到該條目的上面的時候才顯示。 現在的問題是使用者不可能是滑鼠移過所有的條目，所以積極式載入所有的介紹不是個好主意。 解決方案: 使用AJAX，當滑鼠移過的時候從伺服器動態載入條目的介紹。 這麼做可以使初始頁的載入大小減小一半甚至更多，這樣一來頁面載入就更快，就內能得到一個更好的使用者體驗。 時序圖： 點擊看原圖 我們首先會在onmouseover事件中調用JavaScript函數getDescription。下面是html代碼: <a href="/" >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="/" >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 ); }