轉自博客園
前言：從現在開始我們學習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("系統繁忙，請聯繫管理員~~");
}
}
}