視訊：https://edu.csdn.net/course/detail/27107
[學習目标]
了解并掌握XMLHttpRequest對象的相關屬性和方法的使用
了解并掌握如何利用XMLHttpRequest對象讀取xml格式文檔
【本章簡介】
Ajax是一組技術的集合，Asp.Net AJAX就是建立在這組技術的基礎之上的。雖然Asp.Net AJAX盡量隐藏了Ajax的技術細節，但是要想明白Asp.Net AJAX能幹什麼，或者說要想擴充這個架構以便建立所需要的進階應用程式，那麼就必須擁有關于Ajax的一些更加深入的知識。
術語“Ajax”是在2005年初由Jesse James Garrett在他的随筆《A New Approach to WebApplication》中提出的。不過，除了這個術語本身之外，組成它的那些技術都不是什麼新事物。雖然XML可以是Ajax應用程式的一部分（不過也不是必需的！），其基礎讓然是JavaScript(不在此處贅述,請參閱相關JavaScript書籍或文檔)。
下面介紹兩個Ajax常用的核心對象，通常用來向Web應用程式提供Ajax行為。即XMLHttpRequest對象，主要負責生成異步的HTTP調用。
1.1 XMLHttpRequest對象
1.1.1XMLHttpRequest簡介
XMLHttpRequest的第一個實作可以追溯到1999年釋出的IE5.0，當時IE5.0包含了一個叫做XMLHttpRequest對象的ActiveX對象，其工作内容就像它的名字一樣，生成一個HTTP請求并擷取回一個消息。在後續的時間裡，其他浏覽器如Mozilla 、Mac的Camino 、Firefox等都提供了對XMLHttpRequest對象的支援。
由于市場上的大部分浏覽器(市場佔有率約99%)都支援XMLHttpRequest，是以也就有了Ajax相容的大環境，是以，也意味着幾乎人人都可以體驗Ajax應用程式了。但也有例外，就是使用者自己禁用了浏覽器中的JavaScript。
1.1.2XMLHttpRequest的常用屬性和方法
常用屬性如下表所示：
| 屬性名 | 描述 |
| onreadystatechange | 指定當readyState屬性改變時的事件處理句柄。隻寫 |
| readyState | 傳回目前請求的狀态，隻讀 |
| responseBody | 将回應資訊正文以unsigned byte數組形式傳回。隻讀 |
| responseText | 以字元串的形式傳回響應資料 |
| responseXML | 以XML文檔的格式傳回響應資料 |
| status | 含有請求所傳回的HTTP狀态碼，隻讀 |
| statusText | 含有與該HTTP狀态對應的文字描述，隻讀 |
onreadystatechange屬性為HTTP響應提供了回調的途徑。該屬性的名稱說明了其功能：它訓示了一個動作，這個動作在另一個XMLHttpRequest屬性（readyState）的值發生改變時被觸發。readyState屬性用于表示XMLHttpRequest對象的狀态，它共有5個可能值。
readyState的值 說明
0 對象未初始化
1 請求正在加載
2 請求已經加載完成
3 請求正在等待使用者互動
4 請求已完成
常用方法如下表所示：
| 方法 | |
| abort | 取消目前請求 |
| getAllResponseHeaders | 擷取響應的所有http頭 |
| getResponseHeader | 從響應資訊中擷取指定的http頭 |
| open | 建立一個新的http請求，并指定此請求的方法、URL以及驗證資訊（使用者名/密碼） |
| send | 發送請求到http伺服器并接收回應 |
| setRequestHeader | 單獨指定請求的某個http頭 |
1.1.3 對XMLHttpRequest對象程式設計
執行個體化XMLHttpRequest對象的方式取決于代碼在什麼浏覽器中執行。對于IE5.0及其後續版本，下面的代碼片段是可以工作的。它将嘗試兩種方法以執行個體化XMLHttpRequest，因為不同版本的IE有着不同版本的Microsoft XML庫。為了避免在其中一種方法失敗時出錯，這裡使用了兩個try-catch塊：
var XMLHTTP=null;
try{
XMLHTTP=newActiveXObject(＂Msxml2.XMLHTTP＂);
}catch(e){
try{
XMLHTTP=newActiveXObject(＂Microsoft.XMLHTTP＂);
}catch(e){}
}
對于IE以外的其他浏覽器，可以使用一種簡潔的文法：
XMLHTTP=new XMLHttpRequest();
是以，我們所需要做的就是先判斷正在使用什麼類型的浏覽器，然後再通過相應的辦法來執行個體化XMLHttpRequest對象即可。例如下面的代碼通過測試window對象的ActiveXObject屬性來判斷是否能夠執行個體化一個AcitveX對象，如果成功，則該浏覽器就肯定是IE。
if(window.ActiveXObject)
{
//它可能是IE
同樣，你可以使用下面的代碼片段來判斷是否存在XMLHttpRequest對象。
if(XMLHttpRequest){
//它很可能不是IE
使用标準的JavaScript來判斷浏覽器的功能，檢查window.XMLHttpRequest（注意，不是XMLHttpRequest）以确定浏覽器是否支援本地的XMLHttpRequest對象。如果使用了這個技術的話，該函數的寫法就稍微有點不同了，如下所示：
function getXMLHTTP()
{
var XMLHTTP=null;
if(window.ActiveXObject)
{
try{
XMLHTTP=newActiveXObject("Microsoft.XMLHTTP");
}catch(e){}
}else if(window.XMLHttpRequest)
try{XMLHTTP=newXMLHTTPRequest();
}
return XMLHTTP;
}
網上有關于多種實作判斷的方法，請大家在考慮多種浏覽器的同時，考慮程式的健壯性。
項目一：建立Ajax和Asp.Net頁面結合的案例
1. 首先建立一個沒有使用AJAX功能的簡單頁面，用戶端代碼如程式清單2-1所示：
程式清單2-1 利用XMLHttpRequest對象測試Ajax案例
<%@ PageLanguage="C#" AutoEventWireup="true" CodeFile="ajax.aspx.cs"Inherits="_Default" %>
<!DOCTYPEhtml PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml" >
<headrunat="server">
<title>Ajax和Asp.Net頁面結合的案例</title>
<script language="javascript"type="text/javascript">
function getXMLHTTP()
}catch(e){}
}
var XMLHTTP=getXMLHTTP();
//建立一個XMLHttpRequest對象,如果成功，向伺服器發送一個帶有參數sendData=ok（也可以是任意值）的GET請求。接着給onreadystatechange屬性設定一個函數，最後将這個請求發送到伺服器。
if(XMLHTTP!=null)
XMLHTTP.open("GET","ajax.aspx?sendData=ok");
XMLHTTP.onreadystatechange=stateChanged;
XMLHTTP.send(null);
function stateChanged()
if(XMLHTTP.readyState==4 &&XMLHTTP.status==200)
window.alert(XMLHTTP.responseText);
</script>
</head>
<body>
<form id="form1"runat="server">
<div>
<p>Wait and see...</p>
</div>
</form>
</body>
</html>
2. 在頁面的加載事件代碼如下：
protected voidPage_Load(object sender, EventArgs e)
if(Request.QueryString["sendData"] != null &&
Request.QueryString["sendData"] == "ok")
Response.Write("Hello from theserver!");
Response.End();
}
該程式啟動之後，會首先出來圖2-1，彈出警告框資訊，然後才是在頁面顯示Wait and see…
如果想在HTTP請求上使用POST指令，那就需要設定open()方法的第一個參數。當需要向伺服器發送超過500位元組的資料（因為這可能超出URL的最大長度）或不想被代理伺服器緩存的時候，使用POST是尤為重要的。把要發送的資料以名值對一級經過URL編碼（如果需要的話）的形式提供給send()函數，就像下面的代碼片段那樣：
XMLHTTP.open(“POST”,”ajax.aspx”);
XMLHTTP.onreadystatechange=stateChanged;
XMLHTTP.send(“sendData=ok&returnValue=123”);
通過POST指令發送的資料，在Asp.Net中要使用Request.Form屬性來進行讀取，而不是針對GET請求的Request.QueryString屬性。
500個位元組隻是一個保守數字而已，各種浏覽器對URL的長度支援可能是不同的。
項目二：建立使用Xml格式的AJAX的頁面程式
1.建立一個Asp.Net程式，可以使用動态頁面也可以使用靜态頁面，此處使用的是靜态頁面，名字為SimpleAjax.htm,代碼如程式清單2-2所示：
程式清單2-2
<!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>
<title>簡單Ajax示例</title>
<script type="text/javascript" language="javascript">
varxmlHttp;
functioncreateXmlHttpRequest()
//判斷是否為IE浏覽器
if(window.ActiveXObject)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
else if(window.XMLHttpRequest)
xmlHttp=new XMLHttpRequest();
//啟動對頁面的請求
function startRequest()
createXmlHttpRequest();
//當請求狀态發生改變會調用該javaScript方法
xmlHttp.onreadystatechange=handleStateChange;
//建立對伺服器的調用，此方法有3個參數，
//第一個參數說明你請求伺服器的方式，第二個參數确定你請求的伺服器端的URL，第三個參數說明處理方式是否為異步處理
//這裡的異步送出是真正展現了Ajax優勢的方式，當設定為False時，主要應用于持久化頁面的設定。
//這裡設定請求伺服器位址
xmlHttp.open('GET',"TestData.xml",true);
//即向伺服器發送請求，向伺服器端發送某些資料可以是流、Document對象,字元串等對象，如果設定為異步送出，此方法一定會立即傳回
//但同步送出時該方法一定需要伺服器相應
//傳入這個方法的内容會作為請求體的一部分發送
xmlHttp.send(null);
functionhandleStateChange()
// 判斷XMLHttpRequest對象讀取伺服器響應狀态 4 說明對伺服器響應讀取完成
if(xmlHttp.readyState==4)
//判斷Http狀态碼 200 說明伺服器位址正确、請求正确
if(xmlHttp.status==200)
{
//接收伺服器回應的XmlDocument對象
varxmlDoc=xmlHttp.responseXml;
//通過控件ID找到控件testData
vartestData=document.getElementById('testData');
//解析伺服器回應的XmlDocument對象 并設定testData的值為伺服器回應XML資料
testData.innerHTML="<b>"+xmlDoc.getElementsByTagName('data')[0].firstChild.nodeValue+"</b>";
}
</script>
<input type="button" id='btnAjax' value='觸發Ajax事件' onclick='startRequest();'/>
<div id='testData' class="color:#ff0000"></div>
2.添加一個xml檔案，TestData.xml，内容如下：
<?xmlversion="1.0"encoding="utf-8" ?>
<root>
<data>
測試資料 僅僅為了顯示Ajax異步送出及與伺服器通信的執行個體
</data>
</root>
2.
請大家比較項目一和項目二的異同。
@ 本章總結
1. 本章介紹了XMLHttpRequest對象的相關屬性和方法
![Java小案例——随機數猜測随機數猜測[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)