项目中关于AJAX的使用总结
一、使用情况：AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下使用。AJAX的核心：向服务器发送多个请求而无需用户等待来至服务器的响应。
二、AJAX的优势
1.异步加载数据，无需切换页面,不需要刷新
2.更佳的用户体验：局部刷新、及时验证、操作步骤简化等
3.节省流量
4.JS控制数据的加载，更加灵活多用
三、是用步骤：
1.new XMLHttpRequest()
2.open
3.send
4.onreadystatechange
5.responseText
例子：（注意：要在服务器上运行）
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript"> //第一步：买手机 var ajax=new XMLHttpRequest(); if (window.XMLHttpRequest){
var ajax=new XMLHttpRequest();//现代浏览器 }
else{
var ajax=new ActiveXObject("Msxml2.XMLHTTP");//见人IE6 }
//第二步：拨电话号 ajax.open("get","test.txt",true);//1.http方法get/post 2.请求的URL地址，可以为绝对地址也可以为相对地址。3.设置请求是否为异步模式。如果是TRUE，JavaScript函数将继续执行，而不等待服务器响应。
//第三步：发送 ajax.send();
//第四步：拨号成功 ajax.onreadystatechange=function (){
// alert(ajax.readyState); if (ajax.readyState==4){
// alert("已完成"); if (ajax.status>=200&&ajax.status<300||ajax.status==304){
//对方回复 alert(ajax.responseText);
}
}
}
// alert(ajax);
// console.log(ajax); </script> </head> <body> </body> </html>
四、readyState的常用的几种状态：
0：请求未初始化（还没有调用 open()）。
1：请求已经建立，但是还没有发送（还没有调用 send()）。
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
3：请求在处理中；通常响应中已有部分数据可用了，但是服务器还没有完成响应的生成。
4：响应已完成；您可以获取并使用服务器的响应了。
1**：请求收到，继续处理
2**：操作成功收到，分析、接受
3**：完成此请求必须进一步处理
4**：请求包含一个错误语法或不能完成
5**：服务器执行一个完全有效请求失败
200 请求成功
301 所请求的页面已经转移至新的url
302 所请求的页面已经临时转移至新的url
304 文档未修改原来缓冲的文档还可以继使用
400 服务器未能理解请求
404 服务器无法找到被请求的页面
500 请求未完成。服务器遇到不可预知的情况
502 网关错误
请求成功条件
readyState==4&&status>200&&status<300||status==304
五、为了以后能更方便地使用，可以把ajax封装成一个js函数，如：
function fnAjax(url,succFn,faildFn){
if (window.XMLHttpRequest){
var ajax=new XMLHttpRequest();
}
else{
var ajax=new ActiveXObject("Msxml2.XMLHTTP");
}
ajax.open("get",url,true);
ajax.send();
ajax.onreadystatechange=function (){
if (ajax.readyState==4){
if (ajax.status>=200&&ajax.status<300||ajax.status==304){
succFn(ajax.responseText);
}
else{
faildFn();
}
}
}
}
六、函数的使用例子：
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css">
*{
margin: 0;
padding: 0; }
div{
height: 100px;
width: 100px;
display: none; } </style> <script type="text/javascript" src="ajax.js"></script> <script type="text/javascript">
window.onload=function (){
var btns=document.getElementsByTagName("input");
var divs=document.getElementsByTagName("div");
for (var i = 0; i < btns.length; i++) {
btns[i].index=i;
btns[i].onclick=function (){
for (var i = 0; i < btns.length; i++) {
divs[i].style.display="none";
};
divs[this.index].style.display="block";
//h/a2.html var _this=this;
fnAjax("h/a"+(this.index+1)+".html",function (str){
// alert(str); divs[_this.index].innerHTML=str;
});
}
};
}
</script> </head> <body> <input type="button" value="按钮1"> <input type="button" value="按钮2"> <input type="button" value="按钮3"> <div style="display:block;"> <p>我是a1</p> </div> <div></div> <div></div> </body> </html>
