按次序执行ajax的方法

来源:互联网 发布:网络报纸 编辑:程序博客网 时间:2024/06/07 08:42

按次序执行ajax的方法
我们写的前台页面可能要多次和后台交互,页面在初始化的时候需要多次提交ajax请求,列如多个报表的查询,但系统每次查询可能消耗大量的时间,为减轻服务器压力我们需要按次序执行ajax请求,ajax是个异步请求,我们不能简单的for循环请求数据,而必须等待上一个请求返回的时候的再进行下一个请求。

<script type="text/javascript">var ajaxArr = [];var begin = true;//这是个获取ajax方法的封装var getAjax = function (post, fback) {    if (begin)        ajaxArr.push({ post: post, fback: fback });    else        setTimeout(function () {            $.ajax({                url: '/Default/GetInnerTest',                data: post,                dataType: 'json',                success: function (data) {                    if (fback)                        fback(data)                }            });        }, 3000);}var loadData = function () {    //为了顺序不变,重新生成个数组    var ajaxArr2 = [];    var length = ajaxArr.length;    for (var i = 0; i < length; i++)        ajaxArr2.push(ajaxArr.pop());    //取第一个请求    var one = ajaxArr2.pop();    var tmpFn = one.fback;    //将请求完成的回调函数重写,以至于该回调会自动执行下次请求    var fn2 = one.fback = function (data) {        //执行原始回调函数        tmpFn(data);        //执行下一个        if (ajaxArr2.length > 0) {            //先取出一个保留原始回调,重新设置新回调            one = ajaxArr2.pop();            tmpFn = one.fback;            one.fback = fn2;            //执行下一个请求            getAjax(one.post, one.fback);        }    }    //将真正的ajax回调开关打开执行第一个    begin = false;    getAjax(one.post, one.fback);}$(document).ready(function () {    var params = {};    getAjax(JSON.stringify(params), function (data) { alert(data.msg); });    getAjax(JSON.stringify(params), function (data) { alert(data.msg); });    getAjax(JSON.stringify(params), function (data) { alert(data.msg); });    getAjax(JSON.stringify(params), function (data) { alert(data.msg); });    loadData();});</script>
原创粉丝点击