js基础之ajax

必须搞懂的几个问题：

1.如何创建ajax对象？

2.如何连接服务器？

3.如何发送请求？

4.监控请求状态的事件是什么？分几个阶段？如何获取返回值？

答：onreadystatechange事件：一、readyState属性（请求状态：0——>未初始化；1——>载入，已经调用send（）方法；2——>载入完成，已收到相应内容；3——>正在解析内容；4——>完成）；二、status属性（请求结果）；三、responseText属性（取得结果）

一、读取服务器端文件

function ajax(url, fnSucc, fnFaild){
　　//1.创建Ajax对象
　　var oAjax=null;

　　if(window.XMLHttpRequest){
　　　　oAjax=new XMLHttpRequest();
　　}else{
　　　　oAjax=new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　//2.连接服务器
　　oAjax.open('GET', url, true);
　　//3.发送请求
　　oAjax.send();
　　//4.接收服务器的返回
　　oAjax.onreadystatechange=function (){
　　　　if(oAjax.readyState==4) //完成
　　　　{
　　　　　　if(oAjax.status==200) //成功
　　　　　　{
　　　　　　　　fnSucc(oAjax.responseText);
　　　　　　}else{
　　　　　　　　if(fnFaild)
　　　　　　　　fnFaild(oAjax.status);
　　　　　　}
　　　　}
　　};
}
window.onload=function(){
var oBtn=document.getElementById('btn1');

oBtn.onclick=function(){
　　ajax('abc.txt?t='+Math.random(),function(str){
　　//alert(str);//'[1,2,3]'
　　//alert(eval(str)[0]);//1,eval可以解析任何js代码,比如把'[1,2,3]'解析成数组
　　var arr=eval(str);
　　alert(arr[0].rank);//把json文件解析成数组
　　});
}
}

二、分页

var oUl = document.getElementById('ul1');
var oBtn=document.getElementById('btn1');
var aBtn=document.getElementsByClassName('a');
var i=0;

for(i=0;i<aBtn.length;i++){
　　aBtn[i].index=i;//设置索引
　　aBtn[i].onclick=function(){
　　　　ajax('p'+(this.index+1)+'.txt',function(str){
　　　　　　var aData=eval(str);

　　　　　　oUl.innerHTML='';//循环前清空ul内的内容，否则会累加显示
　　　　　　for(i=0;i<aData.length;i++){
　　　　　　　　var oLi=document.createElement('li');
　　　　　　　　oLi.innerHTML='<b>'+aData[i].name+'</b><i>'+aData[i].rank+'</i>';
　　　　　　　　oUl.appendChild(oLi);
　　　　　　}
　　　　});
　　}
}

三、编写自己的ajax库

function ajax(url, fnSucc, fnFaild){
　　//1.创建Ajax对象
　　var oAjax=null;

　　if(window.XMLHttpRequest){
　　　　oAjax=new XMLHttpRequest();
　　}else{
　　　　oAjax=new ActiveXObject("Microsoft.XMLHTTP");
　　}
　　//2.连接服务器
　　oAjax.open('GET', url, true);
　　//3.发送请求
　　oAjax.send();
　　//4.接收服务器的返回
　　oAjax.onreadystatechange=function (){
　　　　if(oAjax.readyState==4) //完成
　　　　{
　　　　　　if(oAjax.status==200) //成功
　　　　　　{
　　　　　　　　fnSucc(oAjax.responseText);
　　　　　　}else{
　　　　　　　　if(fnFaild)
　　　　　　　　fnFaild(oAjax.status);
　　　　　　}
　　　　}
　　};
}