Ajax上

一、封装ajax

function ajax(url, fnSuccess, fnFail){
  var xhr;

  //1.创建请求 兼容处理
  if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
  }else{
    xhr = new ActiveXObject("Microsoft.XMLHTTP");
  }

  //2.链接服务器
  xhr.open('GET', url, true);  //true是否异步
  
  //3.发送请求
  xhr.send();
  
  //4.接收返回
  xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
      if((xhr.status >= 200 && xhr.status<300) || xhr.status == 304){
        //成功
        var json = null;
        if(window.JSON){
          json = JSON.parse(xhr.responseText);
          fnSuccess(json);
        }else{
          json = eval('('+ xhr.responseText +')');
        }
      }else{
        //失败
        if(fnFail){
          fnFail(xhr.status);
        }
      }
    }
  }
}

二、调用封装好的ajax

btn.onclick = function(){
  ajax("a.txt?t=" + new Date().getTime(), function(res){
    console.log(res);
  });
}

btn.onclick = function(){
  ajax("arr.txt", function(res){
    alert(res.length);
  });
}

btn.onclick = function(){
  ajax("json.txt", function(res){
    for(var i=0; i<res.length; i++){
      var li = document.createElement("li");
      li.innerHTML = "名字：<strong>" + res[i].name + "</strong>：年龄：<strong>" + res[i].age + "</strong>";
      ul.appendChild(li);
    }
  });
}