深入理解AJAX響應資訊的處理(1)

來源:互聯網
上載者:User
ajax|響應 作者:陶剛編譯出處:天極開發責任編輯: 方舟 [ 2006-03-09 17:26 ]使用者的互動操作(interaction)驅動著Web網站   使用者的互動操作(interaction)驅動著Web網站。理解如何處理響應資訊,特別是在使用新的互動操作形式(例如AJAX)的時候,這一點非常重要的。Kris Hadloc解釋了AJAX請求-響應過程的本質,你應該瞭解這些內容,更好地為使用者互動操作服務。

   請求和響應

  AJAX引擎分很多個方面,每個方面都很重要。如果引擎執行發送請求和接收響應資訊的事務,那麼它就有很多的處理響應資訊的方法。響應資訊是處理過程中的一個重要的部分,這是因為使用者最終會與響應資訊互動操作。本文詳細解釋了如何處理AJAX響應資訊,並為使用者提供反饋資訊,根據需要進行更新。我們從請求的就緒狀態開始,接著解釋響應資訊的狀態、回調(callback)和分析響應資訊。本文還解釋了響應資訊的其它一些方面,例如載入訊息、錯誤處理和顯示響應資訊。

  我建立了一個樣本可供大家下載。這個樣本包含了一個物件導向的AJAX引擎,你可以在任何AJAX應用程式中再次使用它。在討論響應資訊之前,我要指出如何建立AJAX引擎並發出請求。首先,讓我們來看看AJAX引擎的代碼(沒有帶上響應資訊處理部分):

document.write("<script type=\"text/javascript\" src=\"js/HTTP.js\"></script>");
function Ajax()
{
 this.toString = function() { return "Ajax"; }
 this.http = new HTTP();
 this.makeRequest = function(_method, _url, _callbackMethod)
 {
  this.request = (window.XMLHttpRequest)? new XMLHttpRequest(): new ActiveXObject("MSXML2.XMLHTTP");
  this.request.onreadystatechange = _callbackMethod;
  this.request.open(_method, _url, true);
  this.request.send(_url);
 }
}

  為了建立這個對象並發出請求,你只需要使用下面兩行代碼:

var ajax = new Ajax();
ajax.makeRequest('GET', 'xml/content.xml', onResponse);

  上面的第二行代碼反映了你選擇的要求方法、XML的路徑或請求的伺服器端指令碼、當接收到響應資訊時你希望調用的回調方法。現在你對AJAX引擎和如何發出請求已經有了一定的瞭解,我們來看看如何處理請求。

   就緒(Ready)狀態

  就緒狀態由回調方法來處理,當我們做出請求的時候,回調方法就已經設定好了。在例子中,onResponse被設定為回調方法,它在本文中被用於處理所有的分析代碼的操作。我們將使用下面的代碼來檢測回調方法中的AJAX對象的就緒狀態:

function onResponse()
{
 if(ajax.checkReadyState('body', 'loading...', 'loading...', 'loading...') == "OK")
 {
  // 此處是分析代碼
 }
}

  上面的代碼顯示,我們將向checkReadyState方法傳遞四個參數。第一個參數是我們希望顯示的載入(loading)訊息div的ID、其它三個參數都是自訂的對應於不同狀態的載入訊息。我選擇的用於載入訊息的div的名字是body,它使得新資料在被載入的時候,內容和載入訊息是合并在一起的。下面是實際的checkReadyState方法,它處理了我們剛才討論的代碼,並在div中向我們傳遞進去的參數來顯示它。這個方法也被包含在樣本AJAX引擎中了。

this.checkReadyState = function(_id, _1, _2, _3)
{
 switch(this.request.readyState)
 {
  case 1:
   document.getElementById(_id).innerHTML = _1;
   break;
  case 2:
   document.getElementById(_id).innerHTML = _2;
   break;
  case 3:
   document.getElementById(_id).innerHTML = _3;
   break;
  case 4:
   document.getElementById(_id).innerHTML = "";
   return this.http.status(this.request.status);
 }
}

  checkReadyState方法為使用者提供頁面狀態的反饋資訊是有用處的。下表顯示了它檢測的值:

狀態
0 Uninitialized(未初始化)
1 Loading(正在載入)
2 Loaded(已經載入)
3 Interactive(互動)
4 Complete(完成)

  你可以為每種載入狀態添加一個自訂的訊息--它可以是一個簡單的字串,也可以是字串格式的圖片標籤(例如顯示一個動畫的載入GIF)。下面就是一個例子:

var loader = "<img src='http://tech.chinaasp.com/20051123/ajax/images/loader.gif'>";
ajax.checkReadyState('body', loader, loader, loader);

  不僅checkReadyState方法處理請求狀態,它所包含的HTTP對象也會檢測和返回請求的狀態。
  • Ajax: 一個建立Web應用的新途徑
  • Ajax的錯誤處理機制探討(2)
  • Ajax的錯誤處理機制探討(1)
  • 初次體驗.NET Ajax無重新整理技術
  • Rails系統中的AJAX開發技術簡析(4)


相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.