ajax的结果处理,jQuery ajax返回数据的后续处理

简述

在jQuery中ajax默认是异步请求，我们大多数也需要异步请求，比如：

var temp;

$.ajax({

type : "post",

url : 'test.json',

dataType : 'json',

success : function(data) {

temp=data;

}

});

alert(temp);

在上面的例子中，我们获取不到temp，为了解决这个问题，当然也是为了代码复用性，可维护性，我们在项目中通常会对ajax进行二次封装。下面所述内容主要对ajax返回数据的后续处理讲解，对二次封装的其他细节就只做简要描述

回调的形式处理返回数据

1.什么是回调函数

函数A作为参数(函数引用)传递到另一个函数B中，并且这个函数B执行函数A。我们就说函数A叫做回调函数。如果没有名称(函数表达式)，就叫做匿名回调函数。

2.例子

function A(){

alert('A');

}

function B(callback){

alert('B');

callback();

}

B(A);

jQuery中的事件中也体现了回调

$('.btn').click(function(){

alert('点击了')；

});

上述click里的function就是回调函数

3.实现

封装ajax

function Ajax(opt){

//参数初始化

var url = opt.url,

data = opt.data || {},

formatType = opt.formatType || "json",

type = opt.type || "post",

success = opt.callback || null,

failFn = opt.failFn || null,

contentType = "application/x-www-form-urlencoded; charset=UTF-8";

if(type === "post" && formatType === "json"){

data = JSON.stringify(data);

}

if(formatType === "json"){

contentType="application/json";

}

//ajax 主体函数

$.ajax({

type:type,

cache: false,

crossDomain: false,

url:url,

data:data,

contentType:contentType,

dataType:"json",

timeout:30000

}).done(function(rs){ //成功

//成功获取数据

if(rs.resultCode === 1){ //商定成功返回code为1

success && success(rs); //成功函数的回调

}else{

alert(rs.msg); //弹出后端发出的提示信息

failFn && failFn(rs); //失败函数的回调

}

}).fail(function(rs){ //失败

alert("网络异常");

}).always(function(rs){

});

}

调用

var temp;

Ajax({

url:"test.json",

data:{id:1}, //参数

callback:function(rs){ //成功时的回调

temp=rs.data;

},

failFn:function(){ //失败回调

//dosomething

}

})

这是通过回调函数的形式处理返回数据，当然也有不足之处，你可能会陷入回调地狱，像这样：

Ajax({

url:"test.json",

data:{id:1},

callback:function(rs){

Ajax({

url:"test.json",

data:{id:rs.data.id},

callback:function(rs1){

Ajax({

url:"test.json",

data:{id:rs1.data.id},

callback:function(rs2){

Ajax({

url:"test.json",

data:{id:rs2.data.id},

callback:function(rs3){

//dosomething

}

})

//dosomething

}

})

//dosomething

}

})

//dosomething

}

})

这中回调嵌套虽然能够达到目的，但是显得不够优雅，因此有了以下处理方式

promise的形式处理返回数据

1.什么是deferred

.ajax()操作完成后，如果使用的是低于1.5.0版本的jQuery，返回的是XHR对象，你没法进行链式操作(success,error参数)；如果高于1.5.0版本，返回的是deferred对象，可以进行链式操作。至于什么是deferred对象，以及它和promise的关系，阮一峰老师的一篇文章做了详细的讲解，戳这里

2.实现

封装ajax

function Ajax(opt){

//参数初始化

var url = opt.url,

data = opt.data || {},

formatType = opt.formatType || "json",

type = opt.type || "post",

contentType = "application/x-www-form-urlencoded; charset=UTF-8";

if(type === "post" && formatType === "json"){

data = JSON.stringify(data);

}

if(formatType === "json"){

contentType="application/json";

}

//ajax 主体函数

return $.ajax({

type:type,

cache: false,

crossDomain: false,

url:url,

data:data,

contentType:contentType,

dataType:"json",

timeout:30000

}).then(function(rs){ //成功

//成功获取数据

var dfd = $.Deferred();

if(rs.resultCode === 1){ //商定成功返回code为

dfd.resolve(rs); //改变Deferred对象的执行状态

}else{

alert(rs.msg); //弹出后端发出的提示信息

dfd.reject(rs); //改变Deferred对象的执行状态

}

return dfd.promise();

},function(){

alert("网络异常");

}).always(function(rs){

});

}

两次ajax封装看起来很不一样，提现在如下：

*使用then代替了done、fail,因为then会返回一个promise对象，then里写了两个function参数相当于第一次封装Ajax中的done和fail方法

*不再拥有回调函数callback和fail，成功时不再执行回调函数，而是改变Deferred对象的执行状态，这种方式可以达到和回调一样的效果

*第一次封装函数没有返回值，第二次封装函数Ajax需要返回一个promise对象(不要把封装函数Ajax的返回值和then里的返回值弄混了)

调用

var temp;

Ajax({

url:"test.json",

data:{id:1}//参数

}).then(function(rs){

temp=rs.data;

},function(rs){

console.log("error");

//dosomething

});

即便多次调用也不会陷入回调地狱

Ajax({

url:"test.json",

data:{id:1}

}).then(function(rs){

return Ajax({

url:"test1.json",

data:{id:rs.data.id}

});

}).then(function(rs1){

return Ajax({

url:"test2.json",

data:{id:rs1.data.id}

});

}).then(function(rs2){

return Ajax({

url:"test3.json",

data:{id:rs2.data.id}

});

}).then(function(){

//dosomething

});

小结

以上通过两种形式展示ajax返回数据的后续处理，对于理解回调函数、deferred和promise有一定的帮助，ajax的二次封装需要根据项目的实际情况做相应调整