Ajax非同步回調機制__Ajax

什麼是Ajax。   

 

Ajax即"Asynchronous javascript and XML”(非同步JavaScript和XML)，是一種建立互動式網頁應用的Web開發技術。

主要包含了以下幾種技術：

        .基於web標準（standards-based presentation）XHTML+CSS的表示；

        .使用 DOM（Document Object Model）進行動態顯示及互動；

        .使用 XML 和 XSLT 進行資料交換及相關操作；

        .使用 XMLHttpRequest 進行非同步資料查詢、檢索；

        .使用 JavaScript 將所有的東西綁定在一起。

 

Ajax的兩項強大效能：

        .無需重新裝載整個頁面便能向伺服器發送請求。            

        .對XML文檔的解析和處理。

 

步驟 1 – "請!" --- 如何發送一個HTTP請求

 

（1）為了用JavaScript向伺服器發送一個HTTP請求, 需要一個具備這種功能的類執行個體. 這樣的類首先由Internet Explorer以ActiveX對象引入, 被稱為XMLHTTP 。

後來Mozilla, Safari 和其他瀏覽器紛紛仿效, 提供了XMLHttpRequest 類,它支援微軟的ActiveX對象所提供的方法和屬性。

 

因此, 為了建立一個跨瀏覽器的這樣的類執行個體(對象), 可以應用如下代碼:

    

if (window.XMLHttpRequest) { // Mozilla, Safari, ...
http_request = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
http_request = new ActiveXObject( " Microsoft.XMLHTTP " );
}

(上例對代碼做了一定簡化,這是為瞭解釋如何建立XMLHTTP類執行個體. 實際的代碼執行個體可參閱本篇步驟3.)

 

（2）如果伺服器的響應沒有XML mime-type header,某些Mozilla瀏覽器可能無法正常工作。 為瞭解決這個問題, 如果伺服器響應的header不是text/xml ,

可以調用其它方法修改該header。

 

http_request = new XMLHttpRequest();
http_request.overrideMimeType( ' text/xml ' );

 

 （3）接下來要決定當收到伺服器的響應後,需要做什麼。這需要告訴HTTP請求對象用哪一個JavaScript函數處理這個響應。

可以將對象的onreadystatechange 屬性設定為要使用的JavaScript的函數名,如下所示:

 

http_request.onreadystatechange = nameOfTheFunction;

 注意:在函數名後沒有括弧,也無需傳遞參數.另外還有一種方法,可以定義函數及其對響應要採取的行為,如下所示: 

 

http_request.onreadystatechange = function(){
// do the thing
};

 

（4）在定義了如何處理響應後,就要發送請求了.可以調用HTTP請求類的open() 和send() 方法, 如下所示:

 

http_request.open( ' GET ' , ' http://www.example.org/some.file ' , true );
http_request.send( null );

.open() 的第一個參數是HTTP請求方式 – GET, POST, HEAD 或任何伺服器所支援的您想調用的方式。

按照HTTP規範,該參數要大寫;否則,某些瀏覽器(如Firefox)可能無法處理請求。

.第二個參數是請求頁面的URL。由於自身安全特性的限制,該頁面不能為第三方網域名稱的頁面。同時一定要保證在所有的頁面中都使用準確的網域名稱,

否則調用open()會得到"permission denied"的錯誤提示。一個常見的錯誤是訪問網站時使用domain.tld,而當請求頁面時,卻使用www.domain.tld 。

.第三個參數佈建要求是否為非同步模式。如果是TRUE , JavaScript函數將繼續執行,而不等待伺服器響應。這就是"AJAX"中的"A"。

 

如果第一個參數是"POST",send() 方法的參數可以是任何想送給伺服器的資料。 這時資料要以字串的形式送給伺服器,如下所示:

 

name = value & anothername = othervalue & so = on

 如果第一個參數是”GET”,send()方法的參數為null。

 

步驟 2 – "收到!" --- 處理伺服器的響應

 

當發送請求時,要提供指定處理響應的JavaScript函數名。

 

http_request.onreadystatechange = nameOfTheFunction;

 

 

（1）我們來看看這個函數的功能是什麼。首先函數會檢查請求的狀態。如果狀態值是4,就意味著一個完整的伺服器響應已經收到了,您將可以處理該響應。

 

if (http_request.readyState == 4 ) {
// everything is good, the response is received
} else {
// still not ready
}

readyState 的取值如下:

0（未初始化）  1（正在裝載）  2（裝載完畢）  3（互動中）  4（完成）

 

（2）接著,函數會檢查HTTP伺服器響應的狀態值。我們著重看值為200 OK 的響應。

 

if (http_request.status == 200 ) {
// perfect!
} else {
// there was a problem with the request,
// for example the response may be a 404 (Not Found)
// or 500 (Internal Server Error) response codes
}

 

 

（3）在檢查完請求的狀態值和響應的HTTP狀態值後, 您就可以處理從伺服器得到的資料了。有兩種方式可以得到這些資料:

          .http_request.responseText – 以文本字串的方式返回伺服器的響應

          .http_request.responseXML – 以XMLDocument 對象方式返迴響應。處理XMLDocument 對象可以用JavaScript DOM函數

 

步驟 3 – "萬事俱備!" - 簡單一實例

 

附一個簡單完整的非同步回呼函數makeRequest(url, functionName, httpType, sendData)：

 

// AJAX的POST請求
// 定義XMLHttpRequest對象執行個體
var http_request = false ;
/* ************************************************************************
* 方法說明：可複用的http請求發送函數
* 參數說明：
*　url：目標URL
*　functionName：要回調的函數
*　httpType：請求方式(GET/POST)
*　sendData：用POST方式發出請求時想傳給伺服器的資料，
*　　　　　 資料以查詢字串的方式列出，如：name=value&anothername=othervalue。
*　　　　　 若用GET方式：請傳null
************************************************************************ */
function makeRequest(url, functionName, httpType, sendData) {

http_request = false ;
if ( ! httpType) httpType = " GET " ;

if (window.XMLHttpRequest) { // Non-IE...
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType( ' text/xml ' );
}
} else if (window.ActiveXObject) { // IE
try {
http_request = new ActiveXObject( " Msxml2.XMLHTTP " );
} catch (e) {
try {
http_request = new ActiveXObject( " Microsoft.XMLHTTP " );
} catch (e) {}
}
}

if ( ! http_request) {
alert( ' Cannot send an XMLHTTP request ' );
return false ;
}

http_request.onreadystatechange = functionName;
http_request.open(httpType, url, true );
http_request.setRequestHeader( ' Content-Type ' , ' application/x-www-form-urlencoded ' );
http_request.send(sendData);
}

 

(1)我們現在將整個過程完整地做一次,發送一個HTTP請求。我們在用戶端OrderDelivery.js用JavaScript請求一個OrderDelivery.ashx伺服器檔案

 

function EnterProductBarCode(orderGoodsId,orderNumber){
......
var requestUrl = " ../JavaScript/OrderDelivery.ashx?function=EnterProductBarCode&OrderGoodsID= " + orderGoodsId + " &OrderNumber= " + orderNumber + " &ProductBarCode= " + productBarCode;
makeRequest(requestUrl,EnterProductBarCodeBack, " POST " , null );
}

 

(2)OrderDelivery.ashx收到requestUrl, 並根據function參數的值，執行相應的函數。執行完畢，返回資料給用戶端的回呼函數。

 

public void ProcessRequest (HttpContext context) {
string function = context.Request.Params[ " function " ];
try {
if (function == " EnterProductBarCode " ){
context.Response.Write(...這裡返回資料給用戶端的回呼函數...);
return ;
}
if (...){......}
}
catch (Exception e)
{
context.Response.Write(e.Message);
}
}

 

（3）用戶端OrderDelivery.js的回呼函數EnterProductBarCodeBack使用http_request.responseText擷取伺服器端返回的資料。並進行處理。

 

function EnterProductBarCodeBack(){
var str = http_request.responseText;
if (http_request.readyState == 4 ) {
if (http_request.status == 200 ) {
...處理str...
}
}
}