jquery ajax queue

// 第一个ajax请求
 
 
 
 
  $(document).queue(
  "ajaxRequests"
  , 
  function
  (){ 
 
 
 
 
  
  //全局变量，储存第一个ajax请求数据 
 
 
 
 
  
  var
   
  a_data; 
 
 
 
 
  
  $.ajax({ 
 
 
 
 
  
  success: 
  function
  (data){ 
 
 
 
 
  
  a_data = data; 
 
 
 
 
  
  $(document).dequeue(
  "myName"
  ); 
 
 
 
 
  
  } 
 
 
 
 
  
  }); 
 
 
 

  });
 
 
 

  // 第二个ajax请求
 
 
 
 
  $(document).queue(
  "ajaxRequests"
  , 
  function
  () { 
 
 
 
 
  
  $.ajax({ 
 
 
 
 
  
  success: 
  function
  (data) { 
 
 
 
 
  
  alert(a_data); 
 
 
 
 
  
  $(document).dequeue(
  "myName"
  ); 
 
 
 
 
  
  } 
 
 
 
 
  
  }); 
 
 
 

  });
 
 
 

  // 触发queue往下执行
 
 
 
 
  $(document).dequeue(
  "ajaxRequests"
  ) 
 
 
 

   
 
 
 

  =================================
 
 
 

  (function ($) { 
  
var jqXhr = {}, 
  
ajaxRequest = {}; 
  
$.ajaxQueue = function (settings) { 
  
var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings); 
  
var _complete = options.complete; 
  
$.extend(options, { 
  
complete: function () { 
  
if (_complete) 
  
_complete.apply(this, arguments); 
  
if ($(document).queue(options.className).length > 0) { 
  
$(document).dequeue(options.className); 
  
} else { 
  
ajaxRequest[options.className] = false; 
  
} 
  
} 
  
}); 
  
$(document).queue(options.className, function () { 
  
$.ajax(options); 
  
}); 
  
if ($(document).queue(options.className).length == 1 && !ajaxRequest[options.className]) { 
  
ajaxRequest[options.className] = true; 
  
$(document).dequeue(options.className); 
  
} 
  
}; 
  
$.ajaxSingle = function (settings) { 
  
var options = $.extend({ className: 'DEFEARTNAME' }, $.ajaxSettings, settings); 
  
if (jqXhr[options.className]) { 
  
jqXhr[options.className].abort(); 
  
} 
  
jqXhr[options.className] = $.ajax(options); 
  
}; 
  
})(jQuery); 
  
var ajaxSleep = (function () { 
  
var _settings = { 
  
type: 'GET', 
  
cache: false, 
  
success: function (msg) { 
  
var thtml = $('#txtContainer').html(); 
  
$('#txtContainer').html(thtml + "<br />" + msg); 
  
} 
  
}; 
  
return { 
  
get: function (seconds, mode, isAsync) { 
  
var mode = mode || 'ajax', 
  
isAsync = isAsync || false; 
  
$[mode]($.extend(_settings, { 
  
url: "ResponsePage.aspx?second=" + seconds, 
  
async: isAsync, 
  
className: 'GET' 
  
})); 
  
}, 
  
post: function (seconds, mode, isAsync) { 
  
var mode = mode || 'ajax', 
  
isAsync = isAsync || false; 
  
$[mode]($.extend(_settings, { 
  
type: 'POST', 
  
url: "PostPage.aspx", 
  
data: { second: seconds }, 
  
async: isAsync, 
  
className: 'POST' 
  
})); 
  
} 
  
}; 
  
} ()); 
  
var launch = function (settings) { 
  
$('#txtContainer').html(''); 
  
var mode = settings.mode, 
  
isAsync = settings.isAsync; 
  
ajaxSleep.get(12, mode, isAsync); 
  
ajaxSleep.get(10, mode, isAsync); 
  
ajaxSleep.get(8, mode, isAsync); 
  
ajaxSleep.post(6, mode, isAsync); 
  
ajaxSleep.post(4, mode, isAsync); 
  
ajaxSleep.post(2, mode, isAsync); 
  
} 
  
$(document).ready(function () { 
  
//第1种case 
  
$('#btnLaunchAsync').click(function () { 
  
launch({ isAsync: true }); 
  
}); 
  
//第2种case 
  
$('#btnLaunchSync').click(function () { 
  
launch({}); 
  
}); 
  
//第2种case 
  
$('#btnLaunchQueue').click(function () { 
  
launch({ mode: 'ajaxQueue', isAsync: true }); 
  
}); 
  
//第3种case 
  
$('#btnLaunchSingle').click(function () { 
  
launch({ mode: 'ajaxSingle', isAsync: true }); 
  
}); 
  
});
  
 

  ======================================================================
 
 
 

  两种ajax请求实例：
  
一，实现队列ajax请求，
  
jQuery.ajaxQueue({
  
url: "test.php",
  
success: function(html){ jQuery("ul").append(html); }
  
});
  
二，实现同步ajax请求，
  
jQuery.ajaxSync({
  
url: "test.php",
  
success: function(html){ jQuery("ul").append("<b>"+html+"</b>"); }
  
});
  
AjaxQueue队列请求js库代码
  
jQuery.ajaxQueue = function(o){
  
var _old = o.complete;
  
o.complete = function(){
  
if ( _old ) _old.apply( this, arguments );
  
jQuery.dequeue( jQuery.ajaxQueue, "ajax" );
  
};
  
jQuery([ jQuery.ajaxQueue ]).queue("ajax", function(){
  
jQuery.ajax( o );
  
});
  
};
  
AjaxQueue同步请求js库代码
  
jQuery.ajaxSync = function(o){
  
var fn = jQuery.ajaxSync.fn, data = jQuery.ajaxSync.data, pos = fn.length;
  
fn[ pos ] = {
  
error: o.error,
  
success: o.success,
  
complete: o.complete,
  
done: false
  
};
  
data[ pos ] = {
  
error: [],
  
success: [],
  
complete: []
  
};
  
o.error = function(){ data[ pos ].error = arguments; };
  
o.success = function(){ data[ pos ].success = arguments; };
  
o.complete = function(){
  
data[ pos ].complete = arguments;
  
fn[ pos ].done = true;
  
if ( pos == 0 || !fn[ pos-1 ] )
  
for ( var i = pos; i < fn.length && fn[i].done; i++ ) {
  
if ( fn[i].error ) fn[i].error.apply( jQuery, data[i].error );
  
if ( fn[i].success ) fn[i].success.apply( jQuery, data[i].success );
  
if ( fn[i].complete ) fn[i].complete.apply( jQuery, data[i].complete );
  
fn[i] = null;
  
data[i] = null;
  
}
  
};
  
return jQuery.ajax(o);
  
};