在页面上，我们经常会遇到局部刷新的例子，这个时候，就需要用到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对象，考虑兼容性。XHR
xmlhttp.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="赞" onclick="zan()" /><label id="ZanCount"></label></p>
<p><input type="button" name="Cai" value="踩" onclick="cai()" /><label id="CaiCount"></label></p>
</body>
</html>
时间： 2024-08-04 16:35:29