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