前言：從現(xiàn)在開始我們學(xué)習(xí)ASP.NET?AJAX，Ajax技術(shù)現(xiàn)在應(yīng)用非常廣泛，只要我們上的一些大型網(wǎng)站，都用到了這個技術(shù)，AJAX最終解釋的意思是：實現(xiàn)網(wǎng)頁的無刷新效果，使網(wǎng)頁顯示出更美好的頁面，使用戶體驗?zāi)軌蜃詈谩?

1.?什么是AJAX

(1)?AJAX：”Asynchronous?JavaScript?and?XML”中文的意思就是：異步JavaScript和XML，指一種創(chuàng)建交互式網(wǎng)頁應(yīng)用程序的網(wǎng)頁開發(fā)技術(shù)。Ajax并非縮寫詞，而是由Jesse?James?Guiett創(chuàng)造的名詞

(2)?不是指一種單一的技術(shù)，而是有機的利用了一系列相關(guān)的技術(shù)：web標準(Standards-Based?Presention)+XHTML+CSS的表示。

?1)?使用Dom(Document?Object?Model)進行動態(tài)顯示及交互。

?2)?使用XML和XSLT進行數(shù)據(jù)交互及相關(guān)操作。

?3)?使用XMLHttpRequest進行異步數(shù)據(jù)查詢，檢索。

(3)?簡單理解為：JavaScript+XMLHttpRequest+CSS+服務(wù)器端的集合。

2.?普通網(wǎng)頁請求回執(zhí)過程(請求響應(yīng)模式)

3.?Ajax?Web?Application?Model

4.?Ajax優(yōu)點

(1)?AJAX的本質(zhì)是一個瀏覽器端的提示信息。

(2)?AJAX技術(shù)之主要目的在于局部交換客戶端及服務(wù)器間的數(shù)據(jù)。

(3)?這個技術(shù)的主角是XMLHttpRequest的最主要特點，在于能夠不用重新載入整個版面來更新資料，也就是所謂的Refresh?without?Reload(輕刷新)。

(4)?與服務(wù)器之間的溝通，完全是通過JavaScript來實現(xiàn)的。

(5)?使用XMLHttpRequest本身傳送的數(shù)據(jù)量很小，所以反應(yīng)會很快，也就是讓網(wǎng)絡(luò)程序更像一個桌面應(yīng)用程序。

(6)?Ajax就是運用JavaScript在后臺悄悄幫你去跟服務(wù)器要資料，最后再有JavaScript或者Dom來幫你呈現(xiàn)結(jié)果，因為所有動作都是由JavaScript代勞，所以省去了網(wǎng)頁重載的麻煩，使用者也感受不到等待的痛苦。

5.?XMLHttpRequest

(1)?Ajax應(yīng)用程序的中心就是它。

(2)?XMLHttpRequest對象在IE瀏覽器和非IE瀏覽器中創(chuàng)建的方法不同。

(3)?簡而言之，它可以異步從服務(wù)器端讀取txt或者xml數(shù)據(jù)。

(4)?在IE和非IE中的創(chuàng)建方法是：

//根據(jù)不同的瀏覽器使用響應(yīng)的方式來創(chuàng)建異步對象?

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.?創(chuàng)建XMLHttpRequest對象

(1)?同步使用XMLHttpRequest對象

按照下面的模式可以同步XMLHttpRequest對象

?1)?創(chuàng)建對象；——new（叫一個助手過來）

?2)?創(chuàng)建請求；——open(告訴他要去做的事情)

?3)?發(fā)送請求；——send（讓其去干某一件事）

(2)?添加一個WebForm頁面，命名為FirstAjaxForFun.aspx,再添加一個一般處理程序FirstAjaxForFun.ashx，在aspx中寫入如下代碼：

?

1 <title>Ajax頁面實現(xiàn)無刷新</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.創(chuàng)建異步對象 12 13 xhr = createXmlHttp(); 14 15 //2.設(shè)置請求參數(shù) 16 17 xhr.open("GET", "FirstAjaxForFun.ashx", true); 18 19 //3.設(shè)置回調(diào)函數(shù)(這個回調(diào)函數(shù)主要用來檢測服務(wù)器是否將數(shù)據(jù)發(fā)送給異步對象的) 20 21 xhr.onreadystatechange = function () { 22 23 //獲得服務(wù)器響應(yīng)的數(shù)據(jù) 24 25 //alert(xhr.readystate); 26 27 //當(dāng)服務(wù)器已經(jīng)將數(shù)據(jù)發(fā)回到瀏覽器了，如果返回的響應(yīng)報文狀態(tài)碼為200，才代表服務(wù)器運行正確。 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("系統(tǒng)繁忙..請聯(lián)系管理員"); 42 43 } } } 44 45 //異步對象發(fā)送請求 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)?先來創(chuàng)建XMLHttpRequest對象

?1)?在IE,FireFox,Safari和Opera中創(chuàng)建該對象的JavaScript對象

???var?xhr=new?XMLHttpRequest();

?2)?在IE5/6中的代碼為：

var?xmlRequest=new?ActiveXObject("Microsoft.XmlHttp");

(4)?XMLHttpRequest對象的方法

方法	說明
abort	取消請求
open	需要使用多個參數(shù)，第一個設(shè)置方法屬性，第二個設(shè)置目標URL，第三個設(shè)置同步(false)還是異步(true)發(fā)送請求
send	發(fā)送請求到服務(wù)器
setRequestHeader	添加自定義Http頭到請求
getAllResponseHeader	獲取Http響應(yīng)頭的整個列表
getResponseHeader	僅獲取指定的Http響應(yīng)頭

?(5)?為XMLHttpRequest對象設(shè)置請求參數(shù)

??1)設(shè)置參數(shù)(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)設(shè)置瀏覽器不使用緩存

? xhr.setRequestHeader("If-Modified-Since",?"0");

(6)?發(fā)送請求

xhr.send(null);

xhr.send("isPostback=1&txtName="?+?txtName.value?+?"&txtPwd="?+?txtPwd.value);

(7)?異步使用XMLHttpRequest對象

1)?異步使用XMLHttpRequest對象時，必須使用.onreadystatechange事件，使用模式應(yīng)該是以下幾點：

a)?創(chuàng)建該對象，?-new

b)?設(shè)置readystateChange事件觸發(fā)一個回調(diào)函數(shù)；-onreadystateChange

c)?打開請求；-open

d)?發(fā)送請求；?-send

e)?在回調(diào)函數(shù)中檢索readystate屬性，看數(shù)據(jù)是否準備就緒(是否等于4)

i.?如果沒有準備好，隔一段時間再次檢查，因為數(shù)據(jù)沒有下載完成，我們無法使用它的屬性和方法。

ii.?如果已經(jīng)準備好，就繼續(xù)往下執(zhí)行。

(8)?編寫回調(diào)函數(shù)

1)?在xhr.send之前添加設(shè)置回調(diào)函數(shù)代碼

Xhr.onreadystatechange=watching;

2)?回調(diào)函數(shù)

??xhr.onreadystatechange?=?function?()?{?//設(shè)置回調(diào)函數(shù)

????????????????//alert(xhr.readyState);

????????????????//當(dāng)服務(wù)器已經(jīng)將數(shù)據(jù)發(fā)回到瀏覽器的異步對象了

????????????????if?(xhr.readyState?==?4)?{

????????????????????//如果返回的響應(yīng)報文狀態(tài)嗎為200，才代表服務(wù)器運行正常

????????????????????if?(xhr.status?==?200)?{

????????????????????????gel("msgDiv").innerHTML?=?xhr.responseText;?

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

????????????????????else?{

????????????????????????alert("系統(tǒng)繁忙，請聯(lián)系管理員~~");

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

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

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

(9)?readyState屬性

1)?readystate屬性指出了XMLHttpRequest對象在發(fā)送/接收數(shù)據(jù)過程中所處的幾個狀態(tài)，XMLHttpRequest對象會經(jīng)歷5種不同的狀態(tài)。

a)?0：未初始化，對象已經(jīng)創(chuàng)建，但是還沒有初始化，既還沒有調(diào)用open方法。

b)?1：已打開，對象已經(jīng)創(chuàng)建并初始化，但還未調(diào)用send方法。

c)?2：已發(fā)送，已經(jīng)調(diào)用了send方法，但是該對象正在等待狀態(tài)碼和頭的返回。

d)?3：正在接受，已經(jīng)接受了部分數(shù)據(jù)，但還是不能使用該對象屬性和方法，因此狀態(tài)和響應(yīng)頭不完整

e)?4：已加載，所有數(shù)據(jù)接受完畢。

(10)?xmlHttpRequest對象常用屬性

1）回調(diào)函數(shù)：用戶定義，系統(tǒng)調(diào)用

屬性	說明
onreadystatechange	返回或者設(shè)置異步請求的事件處理程序
readyState	返回狀態(tài)碼：0：未初始化，1：打開，2：發(fā)送，3：正在接收，4：已加載
responseText	使用字符串返回Http響應(yīng)
responseXML	使用XML?Dom對象返回HTTP響應(yīng)
status	返回Http狀態(tài)碼

?

(11)?如何使用Json格式的代碼

1)?在ashx頁面中寫入如下代碼

context.Response.Write("{'date':'I?Love?You'}");

2)?在aspx頁面中寫入如下代碼：

??xhr.onreadystatechange?=?function?()?{?//設(shè)置回調(diào)函數(shù)

????????????????//alert(xhr.readyState);

????????????????//當(dāng)服務(wù)器已經(jīng)將數(shù)據(jù)發(fā)回到瀏覽器的異步對象了

????????????????if?(xhr.readyState?==?4)?{

????????????????????//如果返回的響應(yīng)報文狀態(tài)嗎為200，才代表服務(wù)器運行正常

????????????????????if?(xhr.status?==?200)?{

????????????????????????//var?s?=?"{?'date':?'I?Love?You'?}";

????????????????????????//eval解析器，將JS代碼解析成了Json結(jié)構(gòu)

????????????????????????var?json?=?eval("("?+?xhr.responseText?+?")");

????????????????????????alert(json.date);????????????????????

??}

????????????????????else?{

????????????????????????alert("系統(tǒng)繁忙，請聯(lián)系管理員~~");

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

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

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。