前言：從現在開始我們學習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()" οnclick="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("系統繁忙，請聯系管理員~~");

????????????????????}

????????????????}

????????????}

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的ASP.NET Ajax编程技术学习的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。