有时候我们需要按顺序调用一组ajax，这些ajax需要有先后顺序，类似于同步的ajax，那么我们可以通过以下的方式来实现：

(这个Ajax用到jQuery.post)

//定义一个AJAX队列

$.newAjaxQueue = function() {

    var queue = [],posting=false, fn = function() {

        if(queue.length){

            posting = true;

            var request = queue.shift();

            var url = request.url;

            var params = request.params;

            var callback = request.callback;

            if (typeof(params) === 'function') {

                callback = params;

                params = {};

            }

            $.post(url, params, function(response, status, xhr) {

                try{

                    if (typeof(callback) === 'function') {

                        callback(response);

                    }

                }finally{

                    fn();

                    posting = false;

                }

            }, 'text');

        }

    },instance = ({

        post: function(url,params,callback){

            queue.push({

                url:url,params:params,callback:callback

            });

            if(posting===false){

                fn();

            }

            return instance;

        }

    });

    return instance;

};

使用方法:

首先创建一个Ajax队列，然后为这个Ajax队列，添加需要执行的ajax操作(post操作)，这些Ajax会按顺序执行，一个执行完毕之后(获得返回值)，再继续执行下一个。

$.newAjaxQueue().post( [URL] , [参数] ,[回调函数] ).post( [URL] , [参数] ,[回调函数] ).post( [URL] , [参数] ,[回调函数] );

这个实现没有考虑到超时等情况，如果需要可以自己添加。

演示例子：

<html>
<body>

<script type="text/javascript">
//这个地方应该引用jQuery，此处只是个测试的例子，提供一个$.post方法。
var $={post:function(url,params,callback){setTimeout(function(){callback('{}' + url);},(Math.random()*1000)>>0);}}

//打印输出的测试方法
var log = function(info){
 var div = document.createElement('div');
 div.innerHTML=info;
 document.body.appendChild(div);
}

//定义一个AJAX队列
$.newAjaxQueue = function() {
 var queue = [],posting=false, fn = function() {
  if(queue.length){
   posting = true;
   var request = queue.shift();
   var url = request.url;
   var params = request.params;
   var callback = request.callback;
   if (typeof(params) === 'function') {
    callback = params;
    params = {};
   }
   $.post(url, params, function(response, status, xhr) {
    try{
     if (typeof(callback) === 'function') {
      callback(response);
     }
    }finally{
     fn();
     posting = false;
    }
   }, 'text');
  }
 },instance = ({
  post: function(url,params,callback){
   queue.push({
    url:url,params:params,callback:callback
   });
   if(posting===false){
    fn();
   }
   return instance;
  }
 });
 return instance;
};
 
//测试队列的执行
$.newAjaxQueue().post('url1', {a:1},function(response){
 log('test:1');
}).post('url2', {a:1},function(response){
 log('test:2');
}).post('url3', {a:1},function(response){
 log('test:3');
}).post('url4', {a:1},function(response){
 log('test:4');
}).post('url5', {a:1},function(){
 log('test:5');
});

</script></body></html>

jquery Ajax Queue 队列实现的更多相关文章

  1. jQuery源代码解析（3）—— ready载入、queue队列

    ready.queue放在一块写,没有特殊的意思,仅仅是相对来说它俩可能源代码是最简单的了.ready是在dom载入完毕后.以最高速度触发,非常实用. queue是队列.比方动画的顺序触发就是通过默认 ...

  2. jQuery源码05 (3653 , 3797) queue() : 队列方法 : 执行顺序的管理

    //对外接口 jQuery.extend({ queue: function( elem, type, data ) {//入队.元素.队列名字.存进去的函数 //jQuery.queue( this ...

  3. 用.NET MVC实现长轮询，与jQuery.AJAX即时双向通信

    两周前用长轮询做了一个Chat,并移植到了Azure,还写了篇博客http://www.cnblogs.com/indream/p/3187540.html,让大家帮忙测试. 首先感谢300位注册用户 ...

  4. jQuery的动画队列

    动画队列主要用到jQuery的queue.dequeue和clearqueue. 1.queue()函数主要是将一个动画函数数组绑定到一个队列上 2.dequeue()函数主要是执行队列的第一个函数, ...

  5. 关于Plupload结合上传插件jquery.plupload.queue的使用

    之前使用过很多的上传组件,但对各种浏览器的兼容性太差,不得不放弃!! plupload 是款很强大的上传组件,不得不推荐.plupload 前端根据浏览器不同选择使用Html5. Gears, Sil ...

  6. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  7. WCF入门教程（四）通过Host代码方式来承载服务 一个WCF使用TCP协议进行通协的例子 jquery ajax调用WCF，采用System.ServiceModel.WebHttpBinding System.ServiceModel.WSHttpBinding协议 学习WCF笔记之二 无废话WCF入门教程一[什么是WCF]

    WCF入门教程(四)通过Host代码方式来承载服务 Posted on 2014-05-15 13:03 停留的风 阅读(7681) 评论(0) 编辑 收藏 WCF入门教程(四)通过Host代码方式来 ...

  8. jquery ajax api

    执行一个异步的HTTP(Ajax)的请求. version added: 1.5jQuery.ajax( url, [ settings ] ) url一个用来包含发送请求的URL字符串. setti ...

  9. jquery12 queue() : 队列方法

    <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. Spring框架学习（2）IOC学习

    内容源自:IOC理解   spring ioc注入的三种方式  ioc工厂bean深入理解 耦合性,在java中表现为类之间的关系,耦合性强说明类之间的依赖关系强: 侵入性:框架对代码的侵入: 在传统 ...

  2. 【笔记】探索js 的this 对象 (第二部分)

    了解this 对象之后 我们明白了this 对象就是指向调用函数的作用域 那么接下来我们便要清除函数究竟在哪个作用域调用 找到调用的作用域首先要了解一下几点: 1.调用栈: 调用栈就是一系列的函数,表 ...

  3. 【ACM】最小公倍数

    http://acm.hdu.edu.cn/game/entry/problem/show.php?chapterid=2&sectionid=1&problemid=1 #inclu ...

  4. P2P终结者和反P2P终结者如何使用

    1 安装软件并运行,首先扫描网络,第一台控制机就是自己,你可以查看IP,和命令提示符下的IP吻合. 2 点击高级选项,指定本机网络环境和网卡 3 控制规则设置,首先设置全局限速模板,其他的差不多. 4 ...

  5. 《暗黑世界V1.3》数据库表说明文档

    <暗黑世界V1.3>数据库表说明文档 (下载地址:http://www.9miao.com/forum.php?mod=viewthread&tid=38821&highl ...

  6. name_search方法的使用

    转自:http://blog.csdn.net/littlebo01/article/details/22075573 在many2one类型中,页面下拉时会首先触发name_search方法,参数这 ...

  7. Java基础——线程总结

    Java基础--线程总结 一.线程是什么? 线程:一个程序里不同的运行路径. 二.怎样创建线程? 两种方法创建线程: 第一种 (1)定义详细功能类实现Runnable接口,能够多次调用而实现数据共享 ...

  8. [物理题+枚举] hdu 4445 Crazy Tank

    题意: 给你N个炮弹的发射速度,以及炮台高度H和L1,R1,L2,R2. 问任选发射角度.最多能有几个炮弹在不打入L2~R2的情况下打入L1~R1 注意:区间有可能重叠. 思路: 物理题,发现单纯的依 ...

  9. OTU_Network&calc_otu

    # -*- coding: utf-8 -*- # __author__ = 'JieYap' from biocluster.agent import Agent from biocluster.t ...

  10. Android自动化测试之MonkeyRunner录制和回放脚本

    Android自动化测试之MonkeyRunner录制和回放脚本(十一) 分类: 自动化测试 Android自动化 2013-02-22 10:57 7346人阅读 评论(2) 收藏 举报 andro ...