ASP.NET Ajax编程技术学习
前言:從現(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)容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: ps如何导出pdf格式(arcgis如何
- 下一篇: 交强险退保原则