Ajax原理与应用案例快速入门教程（ajax的原理和流程）这样也行？

文章摘要

这篇文章介绍了如何在网页中实现一个无刷新的投票功能。代码使用了`XMLHttpRequest`技术来实现投票请求的异步处理。当用户点击“投票”按钮时，代码会发送一个请求到指定的URL，并在` trapping`状态码变化时调用回调函数处理结果。如果投票成功，会显示“投票成功”提示；否则显示“投票失败”提示。整个投票过程不会导致页面刷新，提高了用户体验。代码还包含了创建`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>