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的時候我都非常驚訝。我希望知道是如何實現(xiàn)的。現(xiàn)在，謎底揭開了，那就是AJAX。這是在我花了一段時間研究AJAX之后才知曉的。這里有一個很好的例子讓我們知道AJAX是如何很好的應用在 JavaRSS.com 里面的。

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

妙語（Punch Line）: 延遲加載

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

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

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

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

時序圖:

我們首先會在onmouseover事件中調(diào)用JavaScript函數(shù)getDescription。下面是html代碼:

<a href="/" onmouseover="getDescription(3,1)">Java & J2EE News<a>

    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并且創(chuàng)建 XMLHttpRequest 對象。

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

設置回調(diào)函數(shù)，并且發(fā)送"GET"請求至服務器接收xml文檔:

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

JSP將根據(jù)適當?shù)臈l目編號創(chuàng)建具有相應介紹的xml文檔。

檢測HTTP請求返回狀態(tài)碼，狀態(tài)為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工作經(jīng)驗，并且自從Java & J2EE誕生那天起就開始接觸他們了。

譯者：Nicholas@NirvanaStudio