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