Ajax原理与应用案例快速入门教程(ajax的原理和流程)这样也行?

随心笔谈11个月前发布 admin
77 0


<!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>

© 版权声明

相关文章