AJAX in Action

像其他人一樣，當我看到一下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代碼: Java & J2EE News Java & J2EE News

 

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的Google網站: