文章摘要
这篇文章介绍了如何通过AJAX技术实现无刷新投票功能，无需页面重载即可显示投票结果。文章详细描述了代码实现过程，包括创建XMLHttpRequest对象、发送异步请求以及根据服务端返回的状态提示投票结果。通过该方法，用户可以在不刷新页面的情况下直接看到投票结果，提升了用户体验。文章还配有一张投票界面示意图，并提供投票链接供用户测试。整体内容简洁明了，重点突出投票功能的实现细节及其对网页性能的优化作用。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<title>无刷新投票界面</title>
<link rel=”stylesheet” href=”https://www.jb51.net/article/”>
</head>
<script>
//创建XMLHttpRequest对象
function createXhr(){
var xhr=null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();//谷歌、火狐等浏览器
}else if(window.ActiveXObject){
xhr=new ActiveXObject(“Microsoft.XMLHTTP”);//ie低版本
}
return xhr;
}
//ajax投票
function vote(){
//1、创建xhr对象
var xhr=createXhr();
//2、确定请求方法、路径、请求方式为异步
xhr.open(‘GET’,’https://www.jb51.net/article/05-ajax-vote.php’,true);
//3、发送请求
xhr.send(null);
//4、异步方式设置回调
xhr.onreadystatechange=function(){
//如果准备状态为4，表示执行结束
if(this.readyState==4){
//根据服务端返回的标识来提示用户投票是否成功
if(xhr.responseText==’1′){
alert(‘投票成功’);
}else{
alert(‘投票失败’);
}
}
}
}
</script>
<body>
<h1>无刷新投票界面</h1>
<img src=”https://www.jb51.net/article/lin.jpg”/>
<p>
<a href=”https://www.jb51.net/article/javascript:void(0);” rel=”external nofollow” onclick=”vote();”>投票</a>
</p>
</body>
</html>