在 進行Ajax開發以前，我們必須先對一些基本的知識進行瞭解。雖然Ajax.NET已經將Ajax實現細節封裝起來，並大大簡化了我們的操作，但是瞭解基 本的Ajax實現方式對於協助我們在開發中能更好理解和實施，以及更有效地最佳化和排錯是至關重要的。此外，雖然我們不必編寫具體的Ajax調用代理，但是 在調用代理前擷取資料，以及返回資料後怎樣使資料能夠正確顯示，這兩部分工作都需要我們具有基本的JavaScript操作DOM模型的能力。接下來我們 將來對這幾方面的知識進行討論。
5.2.1 XMLHttpRequest對象對 於Ajax技術的基礎和核心，XMLHttpRequest對象應該是我們必須要瞭解的一個對象，Ajax實現的關鍵發送非同步請求並接收響應執行回調都是 通過它來完成的。XMLHttpRequest最早是在Microsoft Internet Explorer 5.0以ActiveX組件中被引入的，之後各大瀏覽器廠商都以JavaScript內建對象的方式實現了XMLHttpRequest對象。雖然大家對 它的實現方式有所區別，但是絕大多數瀏覽器都提供了類似的屬性和方法，在實際指令碼編寫方法上區別不大，並且實現得到的效果也基本相同，目前W3C正致力於 將XMLHttpRequest對象制定一個統一的標準使各個瀏覽器廠商遵照執行，以利於Ajax技術的推廣與發展。
XMLHttpRequest提供了一個相對精簡易用的API，下面我們就將簡單地介紹一下它所提供的屬性和方法以及怎麼利用這些屬性和方法完成一次Ajax的請求和響應處理。
1．readyState屬性
當一個XMLHttpRequest對象被建立後，此屬性標識了此對象正處於什麼狀態，我們可以通過對此屬性的訪問，來判斷此次請求的狀態是什麼然後做出相應的操作。具體此屬性的值代表的意義見表5-1。
表5-1
值 |
說 明 |
0 |
未初始化狀態；此時，已經建立一個XMLHttpRequest對象，但是還沒有初始化此對象的屬性 |
1 |
準備發送狀態；此時，已經調用了XMLHttpRequest對象的Open()方法，並且已經準備好將一個XMLHttpRequest請求發送到服務端 |
2 |
已發送狀態；此時，已經調用了XMLHttpRequest對象的Send()方法，但是並沒有收到任何響應 |
3 |
正在接收狀態；此時，已經開始接收HttpResponse響應資訊但是還沒有完成接收 |
4 |
完成響應狀態；此時，已經完成了HttpResponse響應的接收 |
2．responseText屬性
此屬性描述的是一個HttpResponse中的全部常值內容，通過訪問它，可以得到一次XMLHttpRequest得到響應回傳的全部常值內容。只有當ReadyState的值為3或4時此屬性才會有部分或者全部值，否則此屬性只會是空字串。
3．responseXML屬性
只有當 ReadyState屬性為4，並且回應標頭部的Content-Type的MIME類型被指定為XML（text/xml或者 application/xml）時，此屬性才會有值並且被解析為一個XML文檔，否則此屬性為Null。若是回傳的XML文檔結構不良或未完成響應回 傳，此屬性也會為Null，由此可見，此屬性用來描述被XMLHttpRequest解析後的XML文檔的屬性。
4．status屬性
用於描述伺服器Http請求的狀態值，通過此屬性值我們可以判斷伺服器的響應狀態，如我們通常通過判斷status==200來判斷伺服器是否正常返回。但是注意，必須是日readyState為3或4時才能對此屬性進行訪問。
5．status屬性
用於描述伺服器Http請求的狀態文本，通過此屬性我們可以得到伺服器響應的狀態的描述文本，與status屬性同樣，必須在readyState為3或4時才能對此屬性進行訪問。
6．onreadystatechange事件
每當readyState發生改變時觸發此事件，我們一般都通過此事件來觸發回傳處理函數。
7．open()方法
XMLHttpRequest 對象是通過open(method，uri，async，username，password)的方法來進行初始化工作的，通過調用此方法將得到一個可以 用來進行發送（send()方法）的對象。其中method參數是用來指定發送請求的HttpRequest類型，其實值型別為字串，值可以為get、 post、put、delete等；uri參數是用來指定請求被發送到的伺服器位址，該地址會被自動解析為絕對位址，所以在這裡可以用相對位址來表示； async是一個類型為boolean類型的參數，預設情況下為true，此時表示為非同步提交，如果希望發送一個同步請求可以將此值設為false；在服 務器需要驗證訪問使用者的情況，我們可以設定username以及password兩個參數。
當open()方法被調用時，XMLHttpRequest對象將會把readyState屬性設為1，且初始化其他屬性，如果此時一個請求正在被發送或者響應正在被接收，則前一請求的資料和內容將會丟失，請求將會被取消。
8．send()方法
當調用 open()方法後，我們就可以通過調用send()方法按照open()方法設定的參數將請求進行發送。當open()方法中async參數為true 時，在send()方法調用後立即return，否則將會中斷直到請求返回。需要注意的是，send()方法必須在readyState為1時，即調用 open()方法以後調用。在調用send()方法以後到接收到回應標頭之前，readyState的值將被設為2，一旦開始接收到響應訊息， readyState將會被設為3，直到響應接收完成，readyState的值才會被設為4。
9．abort()方法
該方法可以暫停一個HttpRequest的請求發送或是HttpResponse的接收，並且將XMLHttpRequest對象設定為初始化狀態。
10．setRequestHeader()方法
該方法用於在調用open()方法後，設定HttpRequest頭的資訊，setRequestHeader（header,value）方法包含兩個參數，前一個是header鍵名稱，後一個是其值。
11．getResponseHeader()方法
此方法在readyState為3或4時，用於擷取HttpResponse的頭部資訊，此外我們還可以通過getAllResponseHeaders()擷取所有的HttpResponse的頭部資訊。
在搞清楚了XMLHttpRequest的這些基本屬性方法以後，我們就可以開始編寫我們的第一個Ajax程式了。我們準備通過點擊一個按鈕然後通過Ajax的方式到服務端取回一個Hello world!的字串顯示在介面的一個文字框裡。
我們在一個配置好的網站工程裡面建立一個名為AjaxTest.aspx頁面。首先我們在cs檔案中的page_load事件函數中寫下如下代碼：
AjaxTest.aspx.cs:
protected void Page_Load(object sender, EventArgs e)
{
if (Request.QueryString["s"] == "1")//使用查詢字串來指示這個請求是通過Ajax發出的
{
Response.Write("hello world!");//向HttpResponse中輸出hello world!
Response.End();//將頁面緩衝發送向用戶端瀏覽器 並中止該頁輸出
//如果去掉這句 會得到多餘的HTML代碼
}
}
相對來說，我們在前台頁面中書寫的代碼將會多一些，慢慢地你會發現這也許是Ajax的一個慣例：
AjaxTest.aspx:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AjaxTest.aspx.cs" Inherits= "AjaxTest" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>測試</title>
<script language="javascript" type="text/javascript">
<!--
function GetInfo(){//我們就是通過這個函數來非同步擷取資訊的
var xmlHttpReq = null;//聲明一個Null 物件用來裝入XMLHttpRequest
if (window.XMLHttpRequest){//除IE5 IE6 以外的瀏覽器XMLHttpRequest是window的子物件
xmlHttpReq = new XMLHttpRequest();//我們通常採用這種方式執行個體化一個XMLHttpRequest
}
else if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
//IE5 IE6是通過這種方式
}
if(xmlHttpReq != null){//如果對象執行個體化成功 我們就可以幹活啦
xmlHttpReq.open("get","AjaxTest.aspx?s=1",true);
//調用open()方法並採用非同步方式
xmlHttpReq.onreadystatechange=RequestCallBack; //設定回呼函數
xmlHttpReq.send(null);//因為使用get方式提交，所以可以使用null參調用
}
function RequestCallBack(){//一旦readyState值改變，將會調用這個函數
if(xmlHttpReq.readyState == 4)
{
document.getElementById("iptText").value = xmlHttpReq.responseText;
//將xmlHttpReq.responseText的值賦給iptText控制項
}
}
}
-->
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="iptText" type="text" value="" />
<input type="button" id="" value="Ajax提交" onclick="GetInfo();" />
<!--點擊這個按鈕調用-->
</div>
</form>
</body>
</html>
如果你在點擊按鈕的瞬間發現文字框內閃電般地出現了 “Hello world!”，那麼恭喜你，你已經完成了一個Ajax調用。如果你還對前台頁面中那些和C#貌似神離的代碼覺得不太明白，沒關係，接下來我們就將來簡單 學習一下Ajax另外一個重要的部分——JavaScript。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
