jQuery封装一个方法实现监控页面所有ajax请求

之前我转载了一篇文章（http://blog.csdn.net/u010999809/article/details/79427640），

我在使用里面的代码后发现存在以下问题：

1.这种写法重写了jQuery中的$.ajax，如果说页面本身用了iframe的形式设计的话，内部的页面第一次加载使用此方法可以正常运行，但是第二次加载内部页面的话，可能会造成jQuery相关的函数失效（报undefined的错误）

2.ajax请求完成之后的操作（回调）直接写在了这个方法里面，如果下次对于请求完成后有新的操作，这个方法估计又得重写

考虑到以上的问题，我在参考了原始代码的基础上，使用jQuery进行了封装。封装代码如下：

pageRequest.js

/**
 * 监控页面所有ajax请求，如果处理完，则执行特定操作
 */

(function($){
	// 将$.ajax存放到window对象中
	var ajaxBack = window.ajaxBack||$.ajax;
	// 上面这种写法与window.ajaxBack?window.ajaxBack:$.ajax等效
	window.ajaxBack = ajaxBack;
	
	var PageRequest = function(pageRequest) {
		
		var _this_ = this;
		
		this.pageRequest = pageRequest;
		
		// 默认配置参数
		this.options = {
			// 请求成功后要做的操作
			success:initSeePage
		};
		
		// 如果传了options，则覆盖默认的options
		if(this.getOptions()){
			$.extend(this.options, this.getOptions());
		}
		
		// 保存配置参数
		var options = this.options;
		
		// 当sucess不为空时，执行函数
		if(options.success) {
			_this_.invoke(options);
		}
	};
	
	PageRequest.prototype = {
		// 获取配置参数
		getOptions:function() {
			// 拿到初始化时传入的参数
			var pageRequest = this.pageRequest;
			
			// 确保有配置参数
			if(pageRequest) {
				return pageRequest;
			} else {
				return null;
			}
		},
		
		// 事件驱动函数
		invoke:function(options) {
			//前提：所有ajax请求都是用jquery的$.ajax发起的，而非原生的XHR；
		    // var ajaxBack = $.ajax;
		    var ajaxCount = 0;
		    var allAjaxDone = function(){
		    	options.success();
		    } //一行代码，就可以知道所有ajax请求什么时候结束
		    
		    //由于get/post/getJSON等，最后还是调用到ajax，因此只要改ajax函数即可
		    $.ajax = function(setting){
		      ajaxCount++;
		      var cb = setting.complete;
		      setting.complete = function(){
		        if($.isFunction(cb)){cb.apply(setting.context, arguments);}
		        ajaxCount--;
		        if(ajaxCount==0 && $.isFunction(allAjaxDone)){
		          allAjaxDone();
		          $.ajax = ajaxBack; // 将$.ajax恢复成原来的jquery对象
		        }
		      }
		      ajaxBack(setting);
		    }
		}
	}
	
	PageRequest.init = function(pageRequest) {
		var _this_ = this;
		new _this_(pageRequest);
	}
	
	window.PageRequest = PageRequest;
	
	// 初始化查看页面
	function initSeePage() {
		// 将页面上的按钮禁用
		$("input[type=button]").attr("class", "disabled_button")
		$("select").attr("disabled", "disabled");
		$("textarea").attr("disabled", "disabled");
		$("input").each(function(i) {
			if ($(this).is(":visible")) {
				$(this).attr("disabled", "disabled");
			}
		});
		$("img").attr("onclick", "");
		$("img").unbind("click");
		
		$("div").attr("onclick", "");
		$("div").unbind("click");
		
		var images = document.getElementsByTagName("img");
		for ( var i = 0; i < images.length; i++) {
			try {
				images[i].removeEventListener("onclick", function() {
				});
			} catch (e) {
				images[i].attachEvent("onclick", function() {
				});
			}
		}
	}
	
})(jQuery);

使用方法如下：

1.不传入参数的情况下，ajax所有请求完成后，会执行initSeePage方法（该方法将页面上的所有按钮等元素禁用，及相关的click事件解除）

<script type="text/javascript">
	// 在点击查询后，页面所有ajax请求完成后，禁用掉页面元素
	$(document).ready(function() {
		var initPage = function() {
			PageRequest.init()
		};
		$("#searchBtn").click();
		initPage();
	});
</script>

2.如果想要在页面点击查询按钮后，所有除查询以外的元素被禁用，但是再次点击查询，依然仍维持这种效果，可以这样写

（注：这里传入了自定义操作，该操作替换了默认的initSeePage方法）

<script type="text/javascript">
	// 在点击查询后，页面所有ajax请求完成后，禁用掉页面元素
	$(document).ready(function() {
		var initPage = function() {
			PageRequest.init({
				"success":myOperation
			})
		};
		$("#searchBtn").on("click", initPage).click();
		initPage();
	});
</script>

// 自定义操作
function myOperation() {
	$("input").each(function(i) {
		if ($(this).is(":visible")) {
			var butValue=$(this).attr("value");
			if(butValue=="新增"||butValue=="编辑"||butValue=="删除"||butValue=="添加"||butValue=="保存"){
				$(this).attr("class", "disabled_button");
				$(this).attr("disabled", "disabled");
			}
		}
	});
}