jQuery AjaxQueue 实例详解

complete回调在jquery1.5以后可以是一个函数数组,按数组顺序调用。
如果前一个请求未返回,新的请求发出,那么撤销前一个请求,也就是新的请求“覆盖”原请求。
写成面向对象的形式,再用一个AjaxManage进行简单的管理。

 代码如下 复制代码

;(function($) {
        // override:新的请求是否要覆盖之前的请求
 function AjaxQueue(override) {
  this.override = !!override;
 };
 
 AjaxQueue.prototype = {
  
  requests: new Array(),
  
  offer: function(options) {
   var _self = this;
   
   var xhrOptions = $.extend({}, options, {
    complete: function(jqXHR, textStatus) {
                                        // 支持complete是函数数组的情况
     if($.isArray(options.complete)) {
      
      var funcs = options.complete;
      for(var i = 0, len = funcs.length; i < len; i++)
       funcs[i].call(this, jqXHR, textStatus);
     
     } else {
      
      if(options.complete)
       options.complete.call(this, jqXHR, textStatus);           
     }

                                        // 处理结束,从队列中发出下一个ajax请求
     _self.poll();
    },
     
    beforeSend: function(jqXHR, settings) {
       if(options.beforeSend)
        var ret = options.beforeSend.call(this, jqXHR, settings);
       // 如果当前ajax请求因为某些原因被撤销了,那么去发下一个ajax请求
       if(ret === false) {
        _self.poll();
        return ret;
       }
    }
   });
   
                        // 如果支持覆盖,那么调用replace
   if(this.override) {
    // console.log('go override');
    this.replace(xhrOptions);
                        // 反之放入队列
   } else {
    // console.log('go queue');
    this.requests.push(xhrOptions);
  
    if(this.requests.length == 1) {
     $.ajax(xhrOptions);
    }
   }
  },
  
                // 撤销前一个请求,发送新的请求
  replace: function(xhrOptions) {
   var prevRet = this.peek();
   if(prevRet != null) {
        // jquery源码中可以看到此方法
                             prevRet.abort();
   }
   
   this.requests.shift();
   this.requests.push($.ajax(xhrOptions));
  },
  
                // 轮询队列 发送下一个请求
  poll: function() {
   if(this.isEmpty()) {
    return null;   
   }
 
   var processedRequest = this.requests.shift();
   var nextRequest = this.peek();
   if(nextRequest != null) {
    $.ajax(nextRequest);
   }
 
   return processedRequest;
  },
  
                // 返回队列头部的请求
  peek: function() {
   if(this.isEmpty()) {
    return null;
   }
   
   var nextRequest = this.requests[0];
   return nextRequest;
  },
  
                // 判断队列是否为空
  isEmpty: function() {
   return this.requests.length == 0;
  }
 };
 
 var queue = {};
 
        // 管理AjaxQueue的简单对象 
 var AjaxManager = {
                // 创建新的ajaxQueue   
  createQueue: function(name, override) {
   return queue[name] = new AjaxQueue(override);
  },
  
                // 清除对应name的ajaxQueue
  destroyQueue: function(name) {
   if(queue[name]) {
    queue[name] = null;
    delete queue[name];
   }
  },
  
                // 根据name得到对应的ajaxQueue
  getQueue: function(name) {
   return ( queue[name] ? queue[name] : null);
  }
 };
 
        // 跟jQuery关联起来,给个简称,方便调用
 $.AM = AjaxManager;
})(jQuery);

其实也想再加上done,fail,always等配置,但或许会变得有点复杂,就先保持简单

这里有两个我的jsfiddle页面,一个是覆盖效果的,一个是队列效果的,可以直接测试运行。

 

时间: 2024-10-02 06:46:17

jQuery AjaxQueue 实例详解的相关文章

jQuery Ajax 实例详解 ($.ajax、$.post、$.get)_AJAX相关

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:http://www.jb51.net/article/26903.htm $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data ,

jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

Jquery在异步提交方面封装的很好,直接用AJAX非常麻烦,Jquery大大简化了我们的操作,不用考虑浏览器的诧异了. 推荐一篇不错的jQuery Ajax 实例文章,忘记了可以去看看, 地址为:http://www.jb51.net/article/26903.htm $.post.$.get是一些简单的方法,如果要处理复杂的逻辑,还是需要用到jQuery.ajax() 一.$.ajax的一般格式 $.ajax({ type: 'POST', url: url , data: data ,

jQuery中ajax - get() 方法实例详解_AJAX相关

在jquery中使用get,post和ajax方法给服务器端传递数据,在上篇文章给大家分享了jquery中ajax-post()方法实例,下面通过本文继续学习jQuery中ajax - get() 方法,具体介绍请看下文. jQuery Ajax 参考手册 实例 使用 AJAX 的 GET 请求来改变 div 元素的文本: $("button").click(function(){ $.get("demo_ajax_load.txt", function(resul

jQuery中ajax - post() 方法实例详解_AJAX相关

在jquery中的ajax有二个数据发送模式,一种是get,另一种是post(). jQuery Ajax 参考手册 实例 请求 test.php 网页,忽略返回值: $.post("test.php"); TIY 实例 通过 AJAX POST 请求改变 div 元素的文本: $("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp

jQuery选择器用法实例详解_jquery

本文实例讲述了jQuery选择器用法.分享给大家供大家参考,具体如下: jQuery 使用两种方式来选择 html 的 element,第一种使用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器(如:$("div > ul a")):第二种是用jQuery对象的几个methods(方法).这两种方式还可以联合起来混合使用. 使用 CSS 和 XPath 选择器选择的方法有许多种用法,关于详细的 CSS 选择器可参考本站相关文章. 首先来看通过元素的 ID

jQuery使用$.ajax进行即时验证实例详解_jquery

本文实例讲述了jQuery使用$.ajax进行即时验证的方法.分享给大家供大家参考,具体如下: 这里实现使用jQuery和一般处理程序即时验证用户录入的学号是否重复,当光标离开输入框即给出提示. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="AddStudent.aspx.cs" Inherits="AddStudent" %> <!DOCTY

jquery+ajax实现注册实时验证实例详解_jquery

本文实例讲述了jquery+ajax实现注册实时验证.分享给大家供大家参考,具体如下: 当我们注册一个用户时,会实时提示该用户的信息是否可用,这就是ajax的应用,很久以前就看过这个实现了,今天又看了一遍,给记录下来O(∩_∩)O哈! 先介绍下ajax中$.get,由于$.post用法和$.get大同小异就不再介绍了: 这是一个简单的 GET 请求功能以取代复杂 $.ajax .请求成功时可调用回调函数.如果需要在出错时执行函数,请使用 $.ajax. 复制代码 代码如下: $(selector

JQuery中层次选择器用法实例详解_jquery

本文实例讲述了JQuery中层次选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

Jquery中基本选择器用法实例详解_jquery

本文实例讲述了Jquery中基本选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head