Ajax学习笔记
AJAX为何被需要:普通的ASP.Net每次执行服务端方法的时候都要刷新当前页面。也就是说如果在这个页面采取操作的时候,就会将整个页面进行刷新,如果是视频,就会从头开始播放,这对于用户的体验是非常差的。AJAX是一种进行页面局部异步刷新的技术,用AJAX向服务器发送请求和获得服务器返回的数据并且更新到界面中,不是整个页面刷新。
刷新的方式:在HTML页面中使用JavaScript创建的XMLHTTPRequest对象来对服务器发出请求,并且获得返回的数据。
.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 { 3 var xmlhttp = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP'); //创建XMLHTTP对象,考虑兼容性。XHR 4 xmlhttp.open("POST", url, true); //“准备”向服务器的GetDate1.ashx发出Post请求(GET可能会有缓存问题)。这里还没有发出请求 5 7 //AJAX是异步的,并不是等到服务器端返回才继续执行 8 xmlhttp.onreadystatechange = function () 9 { 10 if (xmlhttp.readyState == 4) //readyState == 4 表示服务器返回完成数据了。之前可能会经历2(请求已发送,正在处理中)、3(响应中已有部分数据可用了,但是服务器还没有完成响应的生成) 11 { 12 if (xmlhttp.status == 200) //如果Http状态码为200则是成功 13 { 14 onsuccess(xmlhttp.responseText); 15 } 16 else 17 { 18 alert("AJAX服务器返回错误!"); 19 } 20 } 21 } 22 //不要以为if (xmlhttp.readyState == 4) {在send之前执行!!!! 23 xmlhttp.send(); //这时才开始发送请求。并不等于服务器端返回。请求发出去了,我不等!去监听onreadystatechange吧! 24 }
如何调用?
1 调用的方法: function cai() 2 { 3 ajax("ZanCai.ashx?action=Cai", function (resText) 4 { 5 document.getElementById("CaiCount").innerHTML = resText; //这里传入需要进行操作的代码 6 }); 7 } 8 9 // 这串代码是要写进script中的