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:

<div id="testdiv">
    <img src="images/bx_loader.gif" />
    <div id="clear" style="clear:both"></div>
</div>

CSS:

<style type="text/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;
}
</style>

JavaScript:

<script type="text/javascript" src="myjs/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(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<images.length)
                $("#clear").before("<img src='"+images[i]+"'/>");
            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)
    });
}
</script>

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

“图片路径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()
使用这种方式请求,多个异步请求就不会担心顺序问题,返回结果的顺序和请求顺序是一致的.若有问题查看缓存设置