5.2 Ajax基礎http://book.csdn.net/bookfiles/653/10065320712.shtml
在 進行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;//聲明一個空對象用來裝入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提交" οnclick="GetInfo();" />
<!--點擊這個按鈕調用-->
</div>
</form>
</body>
</html>
如果你在點擊按鈕的瞬間發現文本框內閃電般地出現了 “Hello world!”，那麼恭喜你，你已經完成了一個Ajax調用。如果你還對前臺頁面中那些和C#貌似神離的代碼覺得不太明白，沒關係，接下來我們就將來簡單 學習一下Ajax另外一個重要的部分——JavaScript。
