pandao / jquery-ajaxqueuer

jquery plugin for ajax queue

jQuery.ajaxQueuer

jquery plugin for ajax queue，jQuery Ajax队列扩展。

####参数说明

$.ajaxQueuer([ajax队列], {配置});

配置项(具有优先级)：

type		String		请求方式，默认为GET
async		Boolean		是否为异步，默认为false，即同步
timeout		Number(ms)	设置请求超时时间（毫秒），此设置将覆盖全局设置
namePrefix	String		队列名称前缀，默认为'ajaxQueuer'

ajax队列是一个数组，由$.ajax方法的配置选项组成($.ajaxQueuer删除和增添一部分)：

async											Boolean		在$.ajaxQueuer中默认为false，为同步队列，每个请求都需要上一个请求成功才能开始；
before(queue)									Function	在$.ajax()执行之前的处理，例如： loading；
beforeSend(xhr, queue, ajaxOptions)				Function	发送请求前可修改 XMLHttpRequest 对象的函数，如添加自定义 HTTP 头；
cache											Boolean		默认为true，dataType为script和jsonp时默认为false；
complete(xhr, ts, queue, ajaxOptions)			Function	请求完成后回调函数，请求成功或失败之后均调用；
contentType										String		发送信息至服务器时内容编码类型，默认为"application/x-www-form-urlencoded"；
crossDomain										Boolean		默认为同域请求，false；跨域请求为true，例如JSONP请求；
data											Key/Value	发送到服务器的数据，默认为{}
dataType										String		服务器返回的数据类型，默认为"text html"
error(xhr, status, queue, ajaxOptions)			Function	请求失败时调用此函数
headers											Key/Value	设置HTTP头的键值对，默认为{}
jsonp											String		在一个jsonp请求中重写回调函数的名字，默认为"callback"；
index											Integer		队列序号
name											String		队列名称ID
priority										Integer		优先级数字，在异步方式下，数值越大优先执行和发送，但不一定是最先完成；
processData										Boolean		通过data选项传递进来的数据，如果是一个对象，都会处理转化成一个查询字符串，默认为true
status											String		请求完成的状态，例如"error"、"success"、"timeout"；
statusCode										Key/Value	一组数值的HTTP代码和函数对象，当响应时调用了相应的代码，默认为{}；
success(data, status, xhr, queue, ajaxOptions)	Function	请求成功后的回调函数
timeout											Number		设置请求超时时间（毫秒），此设置将覆盖全局设置；
type											String		请求方式，默认为GET
url												String		发送请求的目标地址

成员方法和属性：

# 当前执行的队列序号
nowIndex

# 获取配置选项
settings

# 队列ID
qid

# 队列数组
queue

# 队列总数
count

# 追加队列
add([ajax队列数组])
add({ajax队列})

# 开始执行队列, 依据配置同步或异步
run()

# 开始执行队列, 同步方式
synch()

# 开始执行队列, 异步方式
async()

# 清除整个队列
flush()

# 获取整个队列对象
getQueues()

# 只执行队列中的最后一个
last()

####使用方法

<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="../src/jquery.ajaxqueuer.js"></script>
<script type="text/javascript">
	var ajaxQueuer = $.ajaxQueuer([
		{ 
			url : "ajax.get.php?no=1", 
			error : function(xhr, status) {
				console.error(this.name, "请求错误：", xhr, status);
			},
			success : function(data, status, xhr, queue, ajaxOptions) {
				console.log(this.name, "GET", data, ajaxOptions);
			},
			complete : function(xhr, status) {
				// this指向队列选项
				console.log(this.name, "请求完成：", xhr, status);	
			}
		},
		{
			url : "ajax.get.php", 
			data : "temp="+Math.random(),
			success : function(data, status, xhr, queue, ajaxOptions) {
				console.log(this.name, "GET", data, ajaxOptions);
			}
		},
		{
			url : "ajax.get.php?timeout", 
			data : "temp="+Math.random(), 
			priority : 3,
			statusCode : {
				0: function() {
					$("#debuger")[0].innerHTML += '<span style="color:red;">请求超时：status=>0, '+this.url+'</span><br/>';
				},
				404: function() { 
					$("#debuger")[0].innerHTML += '<span style="color:red;">请求失败：status=>404, '+this.url+'</span><br/>';
				}
			},
			before : function() {
				console.log('priority', this.priority);
			},
			error : function(xhr, status) {
				console.error(this.name, "GET", "请求失败", xhr, status);
			},
			success : function(data, status, xhr, queue, ajaxOptions) {
				console.log(this.name, "GET", data, ajaxOptions);
			}
		}
	], {
		type 	: "GET",
		async	: true,
		timeout	: 3000
	});

	ajaxQueuer.add([
		{
			url : "ajax.jsonp.php",
			data : {temp : Math.random()},
			dataType : "json",
			priority : 2,
			success : function(data, status, xhr, queue, ajaxOptions) {
				$("#debuger")[0].innerHTML += "<p>getJSON => ajax.jsonp.php =>" + JSON.stringify(data) + "</p>";
			}
		},
		{
			url : "ajax.jsonp.php",
			data : {temp : Math.random()},
			dataType : "json",
			priority : 2,
			success : function(data, status, xhr, queue, ajaxOptions) {
				$("#debuger")[0].innerHTML += "<p>getJSON => ajax.jsonp.php =>" + JSON.stringify(data) + "</p>";
			}
		}
	]).add({
		url : "ajax.post.php",
		type : "POST",
		priority : 1,
		before : function() {
			console.log('priority', this.priority);
		},
		data : {temp : Math.random()}, 
		success : function(data, status, xhr, queue, ajaxOptions) { 
			console.log('getJSON => ajax.post.php =>', this.url, "\n", data);
			$("#debuger")[0].innerHTML += "<p>getJSON => ajax.post.php =>" + data + "</p>";
		}
	}).run(); 	
</script>

同时也支持在Require.js和Sea.js中使用：

# 在Sea.js中使用
<script type="text/javascript" src="js/sea.js"></script>
<script type="text/javascript">
	seajs.config({
		base : "./js",
　　　　alias : {
　　　　　　"jquery": "jquery.min"
　　　　}
　　});

	seajs.use("./js/main");
</script>

# main.js
define(function(require, exports, module) {	
	var $ = require('jquery');
	require('../../src/jquery.ajaxqueuer'); 
	require('../js/jquery.ajaxqueuer.demo');  
});

# 在Require.js中使用
<script type="text/javascript" src="js/require.min.js"></script>
<script type="text/javascript">
	require.config({
　　　　paths: {
　　　　　　"jquery": "js/jquery.min"
　　　　}
　　});

　　require(['../src/jquery.ajaxqueuer', './js/jquery.ajaxqueuer.demo'], function () {   
	});
</script>

####License

The MIT License (MIT)

Copyright (c) 2014 Pandao