正文
拥抱基于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
});
$.ajax({
url: "xx.html",
data :{},
success: function(){
alert("成功了！");
},
error:function(){
alert("出错啦！");
complete:function(){
alert("啦啦啦！");
} });
$.ajax({
url: "xx.html",
data :{}
})
.done( function(){
alert("成功了！");
})
.fail(function(){
alert("出错啦！");
})
.always(function(){
alert("啦啦啦！");
})
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具体是什么，有兴趣的可以去打印出来看看哦
