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