JavaScript实现Ajax的原理与封装详解

btn.onclick=function(){
  ajax('abc.txt',function(str){
    alert(str);
  });
}

ajax('abc.txt?t='+new Date().getTime(),function(str){});
//new Date().getTime()为现在的毫秒数，用户绝对不可能在1毫秒内点两次，所以每次请求的t都不一样

ajax('abc.txt',function(str){
    var arr=eval(str);
    alert(arr);
});

<ul id="list">
</ul>
<a href="#"></a>
<a href="#"></a>
<a href="#"></a>

window.onload=function(){
  var oUl=getElementById("list");
  var aBtn=getElementsByTagName("a");
  var i;
  for(i=0;i<aBtn.length;i++){
    aBtn[i].index=i;
    aBtn[i].onclick=function(){
      ajax('page'+(this.index+1)+'.txt',function(str){
        var aData=eval(str);
        oUl.innerHTML='';
        for(i=0;i<aData.length:i++){
          var oLi=document.createElement("li");
          oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';
          oUl.appendChild(oLi);
        }
      });
    };
  }
};

function ajax(url,fnSucc,fnFaild){
  //1.创建
  var oAjax=null;
  if(window.XMLHttpRequest){ //对ie6来说，直接用XMLHttpRequest是不存在的会出错
    oAjax=new XMLHttpRequest(); //ie6以上
  }else{
    oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //ie6
  }
  //2.连接服务器，open(方法，url，是否异步)
  oAjax.open('GET'，url，true);
  //3.发送请求
  oAjax.send();
  //4.接收返回 OnReadyStateChange
  oAjax.onreadystatechange=function(){    //onreadystatechange事件
    if(oAjax.readyState==4){ //readyState属性：请求状态 4是完成（完成不代表成功）
      if(oAjax.status==200){ //status属性：请求结果 200代表成功
        fnSucc(oAjax.responseText); //responseText属性：服务器发回给我们的内容
      }
      else{
        if(fnFaild){
          fnFaild();
        }
      }
    }
  };
};