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