擁抱基於jquery.deferred的ajax,和層層嵌套回調的ajax說拜拜

前言

在項目中，無論是維護自己的代碼，還是重構他人的項目代碼，看到層層嵌套，異常冗余的某個function，那時我們的內心肯定是奔潰的！

在jquery1.5版本之前，如果我們某個操作需要多個ajax異步請求成功后執行，只能在前一個ajax成功的回調函數中接着發送ajax請求，這樣一來，不光代碼的可讀性變得異常差，而且也失去了異步的意義。

jquery開發者果然在1.5版本后引入了deferred延遲對象。而jquery.ajax也基於它迎來了巨變,我們先對比下有哪些區別。

傳統ajax和現代ajax

傳統ajax寫法：

　　$.ajax({
　　　　url: "xx.html",
       data :{},
　　　　success: function(){
　　　　　　alert("成功了！");
　　　　},
　　　　error:function(){
　　　　　　alert("出錯啦！");

　　　　complete:function(){
　　　　　　alert("啦啦啦！");

　　　　} 　　});

現代ajax寫法:

　　$.ajax({
　　　　url: "xx.html",
       data :{}
　　　})
.done( function(){
　　　　　　alert("成功了！");
　　　　　　})
.fail(function(){
　　　　　　alert("出錯啦！");
　　　　　　})
.always(function(){
　　　　　　alert("啦啦啦！");
　　　　})

 

 基於現代ajax寫法的$.when()方法

var ajax1= $.ajax({
                     url:'xx.php',
                     data:{}
                    });
 var ajax2= $.ajax({
                     url:'xxx.php',
                     data:{}
                    });    
var ajax3= $.ajax({
                     url:'xxxx.php',
                     data:{}
                    });        
 $.when(ajax1,ajax2,ajax3)
      .done(function(a,b,c){
                   //dosomething
           })
       .fail(function(a,b,c){
                 //dosomething
            });              

 

 完美解決異步層層嵌套的問題，可讀性大大提高。至於$.when(args)中的args,也就是a,b,c具體是什么，有興趣的可以去打印出來看看哦