Ajax學習筆記

Ajax · 發表 2018-09-25 14:40:00

摘要： AJAX為何被需要：普通的 ASP.Net 每次執行服務端方法的時候都要重新整理當前頁面。也就是說如果在這個頁面採取操作的時候，就會將整個頁面進行重新整理，如果是視訊，就會從頭開始播放，這...

AJAX為何被需要 ：普通的 ASP.Net 每次執行服務端方法的時候都要重新整理當前頁面。也就是說如果在這個頁面採取操作的時候，就會將整個頁面進行重新整理，如果是視訊，就會從頭開始播放，這對於使用者的體驗是非常差的。 AJAX 是一種進行頁面區域性非同步重新整理的技術，用 AJAX 向伺服器傳送請求和獲得伺服器返回的資料並且更新到介面中，不是整個頁面重新整理。

重新整理的方式：在 HTML頁面中使用 JavaScript 建立的 XML HTTPRequest 物件來對伺服器發出請求，並且獲得返回的資料。

.Net程式碼實現：

<head>
<title></title>
<script type="text/javascript" src="js/ajax.js"></script>
<script type="text/javascript">
function zan()
{
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //建立XMLHTTP物件，考慮相容性。XHR
xmlhttp.open("POST", "/*這裡寫入你需要執行的一般處理程式檔案*/?你傳入的引數", true); //“準備”向伺服器的GetDate1.ashx發出Post請求（GET可能會有快取問題）。這裡還沒有發出請求

//AJAX是非同步的，並不是等到伺服器端返回才繼續執行
xmlhttp.onreadystatechange = function ()
{
if (xmlhttp.readyState == 4) //readyState == 4 表示伺服器返回完成資料了。之前可能會經歷2（請求已傳送，正在處理中）、3（響應中已有部分資料可用了，但是伺服器還沒有完成響應的生成）
{
if (xmlhttp.status == 200) //如果Http狀態碼為200則是成功
/*意思是說如果前面傳入的引數達成，那就返回為true，執行*/
{
//alert(xmlhttp.responseText);
document.getElementById("ZanCount").innerHTML = xmlhttp.responseText; //responseText為伺服器端返回的報文正文
/*這裡填入你需要執行的操作*/
}
else
{
alert("AJAX伺服器返回錯誤！");
}
}
}
//不要以為if (xmlhttp.readyState == 4) {在send之前執行！！！！
xmlhttp.send(); //這時才開始傳送請求。並不等於伺服器端返回。請求發出去了，我不等！去監聽onreadystatechange吧！

}

function cai()
{
ajax("ZanCai.ashx?action=Cai", function (resText)
{
document.getElementById("CaiCount").innerHTML = resText;
});
}
</script>
</head>

注意：以上是完成一個操作（視訊播放的贊或者踩其中一個）所使用的程式碼，如果完成兩個操作需要寫出來兩份。那麼就需要將這段程式碼進行封裝。

按照習慣，所有的 js的庫都要寫進 js 這個資料夾中，其中使用 <script type="text/javascript" src="js/ajax.js"></script>語句來引入這個庫

.Net ajax 程式碼封裝的實現：

 1 function ajax(url, onsuccess)// 傳入兩個引數，一個是傳入的一個能夠讓第一個if語句執行的一個action引數，第二個是if語句執行的語句
 2 {
 3var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //建立XMLHTTP物件，考慮相容性。XHR
 4xmlhttp.open("POST", url, true); //“準備”向伺服器的GetDate1.ashx發出Post請求（GET可能會有快取問題）。這裡還沒有發出請求
 5
 7//AJAX是非同步的，並不是等到伺服器端返回才繼續執行
 8xmlhttp.onreadystatechange = function ()
 9{
10if (xmlhttp.readyState == 4) //readyState == 4 表示伺服器返回完成資料了。之前可能會經歷2（請求已傳送，正在處理中）、3（響應中已有部分資料可用了，但是伺服器還沒有完成響應的生成）
11{
12if (xmlhttp.status == 200) //如果Http狀態碼為200則是成功
13{
14onsuccess(xmlhttp.responseText);
15}
16else
17{
18alert("AJAX伺服器返回錯誤！");
19}
20}
21}
22//不要以為if (xmlhttp.readyState == 4) {在send之前執行！！！！
23xmlhttp.send(); //這時才開始傳送請求。並不等於伺服器端返回。請求發出去了，我不等！去監聽onreadystatechange吧！
24 }

如何呼叫？

1 呼叫的方法： function cai()
2{
3ajax("ZanCai.ashx?action=Cai", function (resText)
4{
5document.getElementById("CaiCount").innerHTML = resText; //這裡傳入需要進行操作的程式碼
6});
7}
8 
9 // 這串程式碼是要寫進script中的

Ajax學習筆記

您可能也會喜歡…