jQuery AJAX 扩展 ----自动放弃及 队列实现

自动放弃:

在发起AJAX请求时,如上一请求未完成则自动放弃.

修改参数  isAbort = false 可关闭该项

 AJAX请求队列:

依次执行一组 AJAX请求,前一个请求成功后,执行下一个

 

/**
 * ajax通信类
 * 依赖 jQuery 1.6+
 * 扩展jQuery的ajax 对象,用以实现 :
 * 1.继承上次请求的参数,
 * 2.如果上次请求未完成,自动放弃.
 * 3.ajax 队列讲求
 *
 * by oTwo [email protected]
 * v 1.0 2013年7月31日
 *
 * 说明:
 * var db = new oTwo.DB(option) option:ajax常规设置 详见注释
 * db.xhr jqXHR 浏览器的XMLHttpRequest对象的一个超集
 * db.queueList array 请求队列(如果保存的话)
 * db.defaultAjaxOption Object ajax默认设置
 *
 * .get(option,[isExtend],[isAbort]) 用以获取 GET 请求.
 * .queue(optionArr,[flag]) ajax队列请求
 * .setDefault(option) 设置默认ajax 请求参数
 * .send(option) 继承默认设置,发送请求.
 */
var oTwo = oTwo || {};
oTwo.DB = function(option) {
	this.xhr = {};
	this.queueList = [];
	this.defaultAjaxOption = {
		url: "",
		type: "GET",
		data: "",
		dataType: "json",

		// 超时(毫秒) 当超时后,将执行.fail(), .done() 不会执行.
		timeout: "",

		//async:false 同步请求
		async: true,

		// cache:false 不缓存此页面 , ture 缓存此页面
		cache: false,

		//强制HTTP头 解决中文乱码
		contentType: 'application/x-www-form-urlencoded; charset=utf-8'
	}
        option = $.extend(true,this.defaultAjaxOption, option);
	this.setDefault(option);
	this.ajaxOption =$.extend(true,{},this.defaultAjaxOption);
}
oTwo.DB.prototype = {
	/**
	 * 用以获取 GET 请求.可通过 option 修改相关设置
	 * .get() 重复上次讲求
	 *
	 * .get(option,[isExtend],[isAbort]) 新的请求
	 * @param  Object option ajax设置参数
	 * ----请参考 http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
	 * @param  boolean isExtend 继承上次请求的参数
	 * ---- 默认 true,如果为false,则关闭该功能.
	 * @param  boolean isAbort  在发起AJAX请求时,如上一请求未完成则自动放弃.
	 * ---- 默认 true,如果为false,则关闭该功能.
	 *
	 * @return jqXHR $.ajax() 的返回对象,浏览器的XMLHttpRequest对象的一个超集.
	 * ----其常用方法
	 * ----jqXHR.done(function(data, textStatus, jqXHR) {}); 请求成功
	 * ----jqXHR.fail(function(jqXHR, textStatus, errorThrown) {}); 请求失败
	 * ----jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { });请求完成
	 * ---请参考 http://api.jquery.com/jQuery.ajax/#jqXHR
	 */
	get: function(option, isExtend, isAbort) {
		if (typeof option === "string") {
			option = {
				"url": option
			}
		};

		//放弃上一个未完成的请求
		if (this.xhr && this.xhr.done && isAbort !== false) {
			this.xhr.abort();
		};

		// ajaxOption 回复到默认设置
		if (isExtend === false) {
			this.setDefault();
		};
		this.ajaxOption = $.extend(true,this.ajaxOption, option);
		this.xhr = this.send(this.ajaxOption);
		return this.xhr;
	},

	/**
	 * 内部方法请无视它
	 * 继承默认设置,发送请求.
	 * @param  Object option ajax设置参数
	 * @return jqXHR
	 */
	send: function(option) {
		option = $.extend(true, {},this.defaultAjaxOption, option);
		var xhr = $.ajax(option);
		return xhr;
	},

	/**
	 * .setDefault(option)
	 * 设置默认ajax 请求参数
	 * @param  Object option ajax设置参数
	 * @return oTwo.DB
	 *
	 * .setDefault()
	 * 恢复到默认设置
	 */
	setDefault: function(option) {
		if (!option) {
			this.ajaxOption = $.extend({}, this.defaultAjaxOption);
			return this;
		};

		this.defaultAjaxOption = $.extend(true,{}, option);
		return this;
	},

	/**
	 * ajax队列请求
	 * .queue()
	 * 获取当前队列
	 *
	 * .queue(optionArr,[flag])
	 * @param array option 请求数组
	 * ---- $.extend(ajaxoption, {callback:function(data){return true}});
	 * ---- ajaxoption: ajax设置参数将单独继承
	 * ---- callback:请求成功后的回调函数.如callback返回false后续请求将被放弃.
	 * ---- 如果请求不成功后续请求也将被放弃.
	 *
	 * @param boolean isSaveQueue 是否保存请求队列
	 * ---- 默认 true(保存)
	 */
	queue: function(queueList, isSaveQueue) {
		if (!queueList) {
			return;
		};
		if (isSaveQueue === false) {
			this.queueList = queueList;
		};
		if (queueList.length === 0) {
			return;
		};

		var ss = queueList.shift(),
			self = this;
		this.send(ss.ajaxoption).done(function(d) {
			var isGoOn = ss.callback(d);
			if (isGoOn !== false) {
				self.queue(queueList, false);
			};
		});
	}
}