javascript四种ajax方法

javascript要实现ajax，目前有四种方法

原生XMLHttpRequest方法

if(window.XMLHttpRequest)
{
     var ajax = new XMLHttpRequest();//创建ajax对象
}else{
     var ajax = new ActiveXObject("Microsoft.XMLHTTP");
} 
//追书神器api，下面的url会得到一念永恒的相关信息               
ajax.open("GET","api.zhuishushenqi.com/book/57206c3539a913ad65d35c7b",true); 
ajax.send();
ajax.onreadystatechange=function(){
                //0->（未初始化）：还没有调用 open() 方法。
                //1->（载入）：已调用 send() 方法，正在发送请求。
                //2->载入完成）：send() 方法完成，已收到全部响应内容。
                //3->（解析）：正在解析响应内容。
                //4->（完成）：响应内容解析完成，可以在客户端调用。
     if(ajax.readyState==4)
     {
          if(ajax.status==200)//判断是否成功,如果是200，就代表成功
          {
               alert("成功"+ajax.responseText);
          }else{
               alert("失败");
          }
     }
};

原生太麻烦，所以有很多库封装了一下，最常用的当然是jQuery了

$.ajax({
    url:'api.zhuishushenqi.com/book/57206c3539a913ad65d35c7b',
    type: 'GET',
    datatype:'json',
    success: function(data){
        console.log(data)
    }
});

jQuery1.5以后$.ajax()返回的对象实现了Promise接口，即jQuery中的Defferd对象，因此可以这样用

$.ajax({
    url:api.zhuishushenqi.com/book/57206c3539a913ad65d35c7b,
    type:'GET'，
    datatype: 'json'
}).done(function(data){
    console.log(data);
})

jQuery是作为第三方库实现了自己的Promise标准，ES6则实现了原生的Promise对象，基于该原生Promise对象有了原生方法fetch(还在实验阶段)

fetch('api.zhuishushenqi.com/book/57206c3539a913ad65d35c7b',{
    method: 'get'
}).then(res=>res.json)
.then(data=>console.log(data));

4.为了让ajax写起来更像同步编程，ES7定义了async/await

try {
  let response = await fetch(url);
  let data = response.json();
  console.log(data);
} catch(e) {
  console.log("error", e);
}

javascript四种ajax方法

推荐阅读更多精彩内容