AJAX in Action

ajax

像其他人一樣，當我看到一下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="/" >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文檔。

<--String channelId = request.getParameter("channelId");String itemId = request.getParameter("itemId");//String description = new Channel(channelId).getItemDescription(itemId);String description = "This is the description for the channelId: " + channelId + "and itemId: " + itemId;if (description != null) {   response.setContentType("text/xml");   response.setHeader("Cache-Control", "no-cache");   response.getWriter().write("");} else {   //nothing to show   response.setStatus(HttpServletResponse.SC_NO_CONTENT);}-->

檢測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 = uninitialized1 = loading2 = loaded3 = interactive4 = 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 );}
AJAX in Action
  

   

    

     

    
    

     
【字型：大 中 小】 【列印本稿】 2006-5-3 15:57:08 www.okajax.com ( 264)
    
   
  
JSP Code: <--String channelId = request.getParameter("channelId");String itemId = request.getParameter("itemId");description = "This is the description for the channelId: " + channelId + "and itemId: " + itemId;if (description != null) {   response.setContentType("text/xml");   response.setHeader("Cache-Control", "no-cache");   response.getWriter().write("");} else {   //nothing to show   response.setStatus(HttpServletResponse.SC_NO_CONTENT);}-->

  
資源:
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 

<