Extjs Ajax 自动重连的增强

最新推荐文章于 2025-07-14 15:47:19 发布

最新推荐文章于 2025-07-14 15:47:19 发布 · 117 阅读

文章标签：

#Ajax #EXT #JSP

framework / lib 专栏收录该内容

72 篇文章

订阅专栏

本文介绍了一种在ExtJS框架中实现Ajax请求自动重连的方法。通过修改Ext.lib.Ajax.request函数并添加retryCount参数来实现请求失败后的自动重试功能。

在 Ajax 操作中，自动重连应该是很常见的操作，比如：网络可能短期会慢，那么增加自动重练则会给用户更好的体验。而Extjs 的 Ajax 有很多配置项，偏偏没有 retryCount 这个默认自动重练的次数，所以我把这个配置项加进去吧。

由于 Ext Ajax 操作最底层用的都是 Ext.lib.Ajax 所以我直接修改 Ext.lib.Ajax.request ,对 retryCount 进行特殊处理。

直接修改 Ext.lib.Ajax.request：

/*
	v1.0(20090529) 直接修改底层lib ajax 实现自动重连
*/
(function(){
	//保存原来的调用代码
	var oldRequest=Ext.lib.Ajax.request;
	
	//新的增强代码
	Ext.lib.Ajax.request = function(method, uri, cb, data, options) {
		//没有配置就运行老代码
		if(!options.retryCount) 
			return oldRequest.call(Ext.lib.Ajax,method, uri, cb, data, options);
		
		//保存原来的失败处理函数
		var oldFailure=cb.failure;
	
		//添加了自动重连的新的处理函数
		cb.failure=function(responseObject){
			options.retryCount--;
			
			if(options.retryCount) {
				//注意：自动重连后tId 变化
				var newTransactionId = oldRequest.call(Ext.lib.Ajax,method, uri, cb, 
data, options);
				//调用重连回调函数
				if(options.retry) {
					options.retry.apply(cb.scope||window, [options.retryCount,
newTransactionId]);
				}
				
			}	
			//重连够了，调用真正的失败函数。
			else if(oldFailure){
				oldFailure.apply(cb.scope||window, [responseObject]);
			}
		}
		
		//增强配置，再运行老代码
		return oldRequest.call(Ext.lib.Ajax,method, uri, cb, data, options);
				
	}
	
})();

使用代码：

Ext.Ajax.request({
   url: 'foo.jsp',
   timeout:2,
   
   //重连次数
   retryCount:3,
   
   //重连后要注意保存新的 newTransactionId
   retry:function(retryCount,newTransactionId){
   	
   	alert('failture remain retry count :' + retryCount+'\n'
   	+'newTransactionId : '+newTransactionId.tId);
   },
   
   //最终的失败函数
   failure: function(responseObject){
  	alert('failture finally :'+responseObject.statusText);
   },
   headers: {
       'my-header': 'foo'
   },
   params: { foo: 'bar' }
});