前言：從現在開始我們學習ASP.NET AJAX，Ajax技術現在應用非常廣泛，只要我們上的一些大型網站，都用到了這個技術，AJAX最終解釋的意思是：實現網頁的無刷新效果，使網頁顯示出更美好的頁面，使用戶體驗能夠最好。
1. 什么是AJAX
(1) AJAX：”Asynchronous JavaScript and XML”中文的意思就是：異步JavaScript和XML，指一種創建交互式網頁應用程序的網頁開發技術。Ajax並非縮寫詞，而是由Jesse James Guiett創造的名詞
(2) 不是指一種單一的技術，而是有機的利用了一系列相關的技術：web標准(Standards-Based Presention)+XHTML+CSS的表示。
1) 使用Dom(Document Object Model)進行動態顯示及交互。
2) 使用XML和XSLT進行數據交互及相關操作。
3) 使用XMLHttpRequest進行異步數據查詢，檢索。
(3) 簡單理解為：JavaScript+XMLHttpRequest+CSS+服務器端的集合。
2. 普通網頁請求回執過程(請求響應模式)
3. Ajax Web Application Model
4. Ajax優點
(1) AJAX的本質是一個瀏覽器端的提示信息。
(2) AJAX技術之主要目的在於局部交換客戶端及服務器間的數據。
(3) 這個技術的主角是XMLHttpRequest的最主要特點，在於能夠不用重新載入整個版面來更新資料，也就是所謂的Refresh without Reload(輕刷新)。
(4) 與服務器之間的溝通，完全是通過JavaScript來實現的。
(5) 使用XMLHttpRequest本身傳送的數據量很小，所以反應會很快，也就是讓網絡程序更像一個桌面應用程序。
(6) Ajax就是運用JavaScript在后台悄悄幫你去跟服務器要資料，最后再有JavaScript或者Dom來幫你呈現結果，因為所有動作都是由JavaScript代勞，所以省去了網頁重載的麻煩，使用者也感受不到等待的痛苦。
5. XMLHttpRequest
(1) Ajax應用程序的中心就是它。
(2) XMLHttpRequest對象在IE瀏覽器和非IE瀏覽器中創建的方法不同。
(3) 簡而言之，它可以異步從服務器端讀取txt或者xml數據。
(4) 在IE和非IE中的創建方法是：
//根據不同的瀏覽器使用響應的方式來創建異步對象
1 function createXmlHttp() { 2 3 xhobj = false; 4 5 try { 6 7 xhobj = new ActiveXObject("Msxml2.XMLHTTP"); // iemsxml3.0+ 8 9 } catch (e) { 10 11 try { 12 13 xhobj = new ActiveXObject("Microsoft.XMLHTTP"); //iemsxml2.6 14 15 } catch (e2) { 16 17 xhobj = false; 18 19 } 20 21 } 22 23 if (!xhobj && typeof XMLHttpRequest != 'undefined') {// Firefox, Opera 8.0+, Safari,谷歌瀏覽器 24 25 xhobj = new XMLHttpRequest(); 26 27 } 28 29 return xhobj; 30 31 }
6. 創建XMLHttpRequest對象
(1) 同步使用XMLHttpRequest對象
按照下面的模式可以同步XMLHttpRequest對象
1) 創建對象；——new（叫一個助手過來）
2) 創建請求；——open(告訴他要去做的事情)
3) 發送請求；——send（讓其去干某一件事）
(2) 添加一個WebForm頁面，命名為FirstAjaxForFun.aspx,再添加一個一般處理程序FirstAjaxForFun.ashx，在aspx中寫入如下代碼：
1 <title>Ajax頁面實現無刷新</title> 2 3 <script src="common/common.js" type="text/javascript"></script> 4 5 <script type="text/javascript"> 6 7 function GetDate() { 8 9 var xhr = false; 10 11 //1.創建異步對象 12 13 xhr = createXmlHttp(); 14 15 //2.設置請求參數 16 17 xhr.open("GET", "FirstAjaxForFun.ashx", true); 18 19 //3.設置回調函數(這個回調函數主要用來檢測服務器是否將數據發送給異步對象的) 20 21 xhr.onreadystatechange = function () { 22 23 //獲得服務器響應的數據 24 25 //alert(xhr.readystate); 26 27 //當服務器已經將數據發回到瀏覽器了，如果返回的響應報文狀態碼為200，才代表服務器運行正確。 28 29 if (xhr.readystate == 4) { 30 31 if (xhr.status == 200) { 32 33 gel("MyDiv").innerHTML = xhr.responseText; 34 35 //document.getElementById("MyDiv").innerHTML = xhr.responseText; 36 37 } 38 39 else { 40 41 alert("系統繁忙..請聯系管理員"); 42 43 } } } 44 45 //異步對象發送請求 46 47 xhr.send(null); 48 49 } 50 51 </script> 52 53 <input type="button" value="GetDate()" onclick="GetDate()" /> 54 55 <div id="MyDiv"></div> 56 57 在.ashx里面寫入如下代碼： 58 59 System.Threading.Thread.Sleep(2000); 60 61 int a=0; 62 63 int c = 1 / a; 64 65 context.Response.Write("<h1>Hello World" + DateTime.Now + "</h1>");
(3) 先來創建XMLHttpRequest對象
1) 在IE,FireFox,Safari和Opera中創建該對象的JavaScript對象
var xhr=new XMLHttpRequest();
2) 在IE5/6中的代碼為：
var xmlRequest=new ActiveXObject("Microsoft.XmlHttp");
(4) XMLHttpRequest對象的方法
| 方法 |
說明 |
| abort |
取消請求 |
| open |
需要使用多個參數，第一個設置方法屬性，第二個設置目標URL，第三個設置同步(false)還是異步(true)發送請求 |
| send |
發送請求到服務器 |
| setRequestHeader |
添加自定義Http頭到請求 |
| getAllResponseHeader |
獲取Http響應頭的整個列表 |
| getResponseHeader |
僅獲取指定的Http響應頭 |
(5) 為XMLHttpRequest對象設置請求參數
1)設置參數(Get方式)
xhr.open("GET", "FirstAjaxForFun.ashx", true)
2)Post方式
xhr.open("POST", "LoginByAjax.aspx", true);
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
3)設置瀏覽器不使用緩存
xhr.setRequestHeader("If-Modified-Since", "0");
(6) 發送請求
xhr.send(null);
xhr.send("isPostback=1&txtName=" + txtName.value + "&txtPwd=" + txtPwd.value);
(7) 異步使用XMLHttpRequest對象
1) 異步使用XMLHttpRequest對象時，必須使用.onreadystatechange事件，使用模式應該是以下幾點：
a) 創建該對象， -new
b) 設置readystateChange事件觸發一個回調函數；-onreadystateChange
c) 打開請求；-open
d) 發送請求； -send
e) 在回調函數中檢索readystate屬性，看數據是否准備就緒(是否等於4)
i. 如果沒有准備好，隔一段時間再次檢查，因為數據沒有下載完成，我們無法使用它的屬性和方法。
ii. 如果已經准備好，就繼續往下執行。
(8) 編寫回調函數
1) 在xhr.send之前添加設置回調函數代碼
Xhr.onreadystatechange=watching;
2) 回調函數
xhr.onreadystatechange = function () { //設置回調函數
//alert(xhr.readyState);
//當服務器已經將數據發回到瀏覽器的異步對象了
if (xhr.readyState == 4) {
//如果返回的響應報文狀態嗎為200，才代表服務器運行正常
if (xhr.status == 200) {
gel("msgDiv").innerHTML = xhr.responseText;
}
else {
alert("系統繁忙，請聯系管理員~~");
}
}
}
(9) readyState屬性
1) readystate屬性指出了XMLHttpRequest對象在發送/接收數據過程中所處的幾個狀態，XMLHttpRequest對象會經歷5種不同的狀態。
a) 0：未初始化，對象已經創建，但是還沒有初始化，既還沒有調用open方法。
b) 1：已打開，對象已經創建並初始化，但還未調用send方法。
c) 2：已發送，已經調用了send方法，但是該對象正在等待狀態碼和頭的返回。
d) 3：正在接受，已經接受了部分數據，但還是不能使用該對象屬性和方法，因此狀態和響應頭不完整
e) 4：已加載，所有數據接受完畢。
(10) xmlHttpRequest對象常用屬性
1）回調函數：用戶定義，系統調用
| 屬性 |
說明 |
| onreadystatechange |
返回或者設置異步請求的事件處理程序 |
| readyState |
返回狀態碼：0：未初始化，1：打開，2：發送，3：正在接收，4：已加載 |
| responseText |
使用字符串返回Http響應 |
| responseXML |
使用XML Dom對象返回HTTP響應 |
| status |
返回Http狀態碼 |
(11) 如何使用Json格式的代碼
1) 在ashx頁面中寫入如下代碼
context.Response.Write("{'date':'I Love You'}");
2) 在aspx頁面中寫入如下代碼：
xhr.onreadystatechange = function () { //設置回調函數
//alert(xhr.readyState);
//當服務器已經將數據發回到瀏覽器的異步對象了
if (xhr.readyState == 4) {
//如果返回的響應報文狀態嗎為200，才代表服務器運行正常
if (xhr.status == 200) {
//var s = "{ 'date': 'I Love You' }";
//eval解析器，將JS代碼解析成了Json結構
var json = eval("(" + xhr.responseText + ")");
alert(json.date);
}
else {
alert("系統繁忙，請聯系管理員~~");
}
}
}