當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
2、.net NVelocity中原生javascript ajax封装使用
生活随笔
收集整理的這篇文章主要介紹了
2、.net NVelocity中原生javascript ajax封装使用
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? ? ? ? 在頁面上，我們經常會遇到局部刷新的例子，這個時候，就需要用到ajax,
因為很多代碼都是公用的，所以我們想到了，將代碼封裝，簡化了使用，減少了冗余
javascript ajax代碼如下：
var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //創建XMLHTTP對象，考慮兼容性xmlhttp.open("POST", "AJAXTest.ashx?" + "i=5&j=10", true); //“準備”向服務器的GetDate1.ashx發出Post請求（GET可能會有緩存問題）。這里還沒有發出請求xmlhttp.onreadystatechange = function (){if (xmlhttp.readyState == 4) //readyState == 4 表示服務器返回完成數據了。之前可能會經歷2（請求已發送，正在處理中）、3（響應中已有部分數據可用了，但是服務器還沒有完成響應的生成） {if (xmlhttp.status == 200) //如果狀態碼為200則是成功 {alert(xmlhttp.responseText);}else{alert("AJAX服務器返回錯誤！");}}} //不要以為if (xmlhttp.readyState == 4) {在send之前執行！！！！xmlhttp.send(); //這時才開始發送請求 //發出請求后不等服務器返回數據，就繼續向下執行，所以不會阻塞，界面就不卡了，這就是AJAX中“A”的含義“異步”。試著在ashx加一句Thread.Sleep(3000);我們為了實現 無刷新頁面實現 視頻的頂踩操作，首先封裝ajax，新建ajax.js，采用post提交
function ajax(url, onsuccess) {var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //創建XMLHTTP對象，考慮兼容性。XHRxmlhttp.open("POST", url, true); //“準備”向服務器的GetDate1.ashx發出Post請求（GET可能會有緩存問題）。這里還沒有發出請求//DRY：不要復制粘貼代碼//AJAX是異步的，并不是等到服務器端返回才繼續執行xmlhttp.onreadystatechange = function (){if (xmlhttp.readyState == 4) //readyState == 4 表示服務器返回完成數據了。之前可能會經歷2（請求已發送，正在處理中）、3（響應中已有部分數據可用了，但是服務器還沒有完成響應的生成） {if (xmlhttp.status == 200) //如果Http狀態碼為200則是成功 {onsuccess(xmlhttp.responseText);}else{alert("AJAX服務器返回錯誤！");}}}//不要以為if (xmlhttp.readyState == 4) {在send之前執行！！！！xmlhttp.send(); //這時才開始發送請求。并不等于服務器端返回。請求發出去了，我不等！去監聽onreadystatechange吧！ }html頁面：
<html> <head><title></title>//需要引入 剛剛封裝的ajax函數<script type="text/javascript" src="js/ajax.js"></script><script type="text/javascript">function cai(){ajax("ZanCai.ashx?action=Cai", function (resText){document.getElementById("CaiCount").innerHTML = resText;});}</script> </head> <body> <video src="diaosi.mp4" autoplay controls></video><p><input type="button" name="Zan" value="贊" οnclick="zan()" /><label id="ZanCount"></label></p><p><input type="button" name="Cai" value="踩" οnclick="cai()" /><label id="CaiCount"></label></p> </body> </html>
?
轉載于:https://www.cnblogs.com/lastcode/p/4856689.html
總結
以上是生活随笔為你收集整理的2、.net NVelocity中原生javascript ajax封装使用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： IOS第三天（@property与@sy
- 下一篇： BZOJ-1012[JSOI2008]最