ajax defer,Ajax 运用 Deferred异步处理

/**

*important 异步执行 参数方法

*参数 url1 请求目标url, paraObj 要传递的参数对象, fun 一个用于回调的function(){}

*当请求成功后 会执行fun

**/

function ajaxDeferred(url1,paraObj,fun){

$.ajax({

url:url1,

type:'post',

dataType:'html',

data:paraObj

}).done(function(data){

fun(data);

}).fail(function(msg){

console.info(msg.status)

});

}

下面这样也一样,不过前者更新进一点

function ajaxDeferred(url1,paraObj,fun){

$.ajax({

url:url1,

type:'post',

dataType:'html',

data:paraObj,

success:function(data){

fun(data);

},

error:function(msg){

console.info(msg.status);

}

})

}

Demo 例子

HTML:

CSS:

#testdiv{

width:1000px;

border:5px solid #ddd;

}

#testdiv img{

width:100%;

height:100px;

width:100px;

boxshadow:5px 10px 20px #333;

float:left;

margin:10px;

}

$(document).ready(function(){

loadData();

});

function loadData(){

var mydata={

"loadtype":"get_rongyu"

}

ajaxDeferred('clientEvents.asp',mydata,setData);

}

var images,i;

function setData(data){

if(data!=""){

images = data.split(",");

i = 0;

var id = setInterval(function(){

if(i

$("#clear").before("");

else{

clearInterval(id);

$("#testdiv").children().first().remove();

}

i++;

},500)

}

}

function ajaxDeferred(url1,paraObj,fun){

$.ajax({

url:url1,

type:'post',

dataType:'html',

data:paraObj

}).done(function(data){

fun(data);

}).fail(function(msg){

console.info(msg.status)

});

}

本例子 请求的页面返回的是 一个字符串

“图片路径1,图片路径2”

功能是在一个div框中每隔0.5秒添加一个图片

ajax dataType 为 'HTML’ 需要改Json 就改Json

还有一种用法 使用$.when()

function ajaxDeferred(url1,paraObj){

var a = $.ajax({

url:url1,//请求地址

type:'post',//请求类型get/post

dataType:'json',//此处可是json

data:paraObj//请求数据一个数据对象 obj{"a":”1”,"b":”2”}

});

return a;

}

$.when(

ajaxDeferred("test1.html",{str:"test1"}),

ajaxDeferred("test2.html",{str:"test2"})

).done(function(data1,data2){//请求成功时执行

setXXData(data1,data2);//使用数据

}).fail(function(msg){//请求失败时执行

console.info(msg.status)

}).always(function(){//不管请求是否完成都会执行

alert("失败或错误后执行");

}).then(function(doneResult1,doneResult2){//此处参数为done中的data1,data2

alert("成功时执行");

},function(failResult){//支持三个参数jqXHR, textStatus, errorThrown

alert("错误时执行");

});

执行以上代码,两次请求只做一次处理当then()中只有一个回调方法,实质跟done()一样的功能,第二个方法为fail()

使用这种方式请求,多个异步请求就不会担心顺序问题,返回结果的顺序和请求顺序是一致的.若有问题查看缓存设置