必须搞懂的几个问题:

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);
      }
    }
  };
}

05-11 13:19