Ajax控制項和類庫簡析

http://www.51cto.com 2006-04-03 15:52 作者:Kris Hadloc 出處:IT專家網

使用者的互動操作(interaction)驅動著Web網站。理解如何處理響應資訊，特別是在使用新的互動操作形式(例如AJAX)的時候，這一點非常重要的。Kris Hadloc解釋了AJAX要求-回應過程的本質，你應該瞭解這些內容，更好地為使用者互動操作服務。 請求和響應 AJAX引擎分很多個方面，每個方面都很重要。如果引擎執行發送請求和接收響應資訊的事務，那麼它就有很多的處理響應資訊的方法。響應資訊是處理過程中的一個重要的部分，這是因為使用者最終會與響應資訊互動操作。本文詳細解釋了如何處理AJAX響應資訊，並為使用者提供反饋資訊，根據需要進行更新。我們從請求的就緒狀態開始，接著解釋響應資訊的狀態、回調(callback)和分析響應資訊。本文還解釋了響應資訊的其它一些方面，例如載入訊息、錯誤處理和顯示響應資訊。 我建立了一個樣本可供大家下載。這個樣本包含了一個物件導向的AJAX引擎，你可以在任何AJAX應用程式中再次使用它。在討論響應資訊之前，我要指出如何建立AJAX引擎並發出請求。首先，讓我們來看看AJAX引擎的代碼(沒有帶上響應資訊處理部分)： document.write(""); 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://images.51cto.com/wuyou/images/loader.gif"〉"; ajax.checkReadyState('body', loader, loader, loader); 不僅checkReadyState方法處理請求狀態，它所包含的HTTP對象也會檢測和返回請求的狀態。 使用者的互動操作(interaction)驅動著Web網站。理解如何處理響應資訊，特別是在使用新的互動操作形式(例如AJAX)的時候，這一點非常重要的。Kris Hadloc解釋了AJAX要求-回應過程的本質，你應該瞭解這些內容，更好地為使用者互動操作服務。 請求和響應 AJAX引擎分很多個方面，每個方面都很重要。如果引擎執行發送請求和接收響應資訊的事務，那麼它就有很多的處理響應資訊的方法。響應資訊是處理過程中的一個重要的部分，這是因為使用者最終會與響應資訊互動操作。本文詳細解釋了如何處理AJAX響應資訊，並為使用者提供反饋資訊，根據需要進行更新。我們從請求的就緒狀態開始，接著解釋響應資訊的狀態、回調(callback)和分析響應資訊。本文還解釋了響應資訊的其它一些方面，例如載入訊息、錯誤處理和顯示響應資訊。 我建立了一個樣本可供大家下載。這個樣本包含了一個物件導向的AJAX引擎，你可以在任何AJAX應用程式中再次使用它。在討論響應資訊之前，我要指出如何建立AJAX引擎並發出請求。首先，讓我們來看看AJAX引擎的代碼(沒有帶上響應資訊處理部分)： document.write("src=\"js/HTTP.js\">>"); 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://images.51cto.com/wuyou/images/loader.gif"〉"; ajax.checkReadyState('body', loader, loader, loader); 不僅checkReadyState方法處理請求狀態，它所包含的HTTP對象也會檢測和返回請求的狀態。