`
yiminghe
  • 浏览: 1460279 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

带自动重连的 Ajax request 队列

阅读更多

常常 一系列 的 Ajax 请求之间 要求 有一定的次序要求,依赖关系,以及为了防止突发网络故障需要一定的自动重练功能。

写过一个增强 Extjs 自动重连的功能

 


例如:


1.b请求必须要在a请求返回后执行。

 

2.b请求要求必须a操作成功后再执行。

 

3.a 请求失败了就重练3次,最后仍然失败,则b请求取消

 


那么传统在每个callback中分别判断写得很死就很那重用了,实现一个队列来集中管理吧。

 

 

<script>


	function AjaxQueue(){
		this.restore();
	};
	
	//重用对象,清除队列
	AjaxQueue.prototype.restore = function(){
		//函数队列
		this._queue=[];
		//队列当前函数重试次数
		this._retry=0;	
		//是否当前失败	
		this._stopped=false;
	},
	
	//没有停止就添加执行
	AjaxQueue.prototype.addToQueue = function(func){
		if(this._stopped)	return;
		this._queue.push(func);		
		if(this._queue.length==1)
			this._start();
	};
		
	AjaxQueue.prototype.retry = function(maxRetry){		
		
			//失败
		if(this._retry<maxRetry){
			this._retry++;		
			this._queue[0]();		
		}
		else {
			//超过最大重试次数,清空队列,其他等待处理的ajax 作废(依赖于上一个操作)			
			this.stop();
		}
		
	};
	
	AjaxQueue.prototype.next = function(){
			//当前处理函数弹出,处理下一个
			this._queue.shift();
			this._start();		
	},
	
	//
	AjaxQueue.prototype._start = function(){
		if(this._queue.length==0)	{
			//全部处理完了
			return;
		}
		this._retry=0;
		this._queue[0]();			
	};
	
	AjaxQueue.prototype.stop = function(){
		this._queue=[];
		this._stopped=true;
	};
	
	
	
	
	var mger = new AjaxQueue();
	var maxRetry=3;
	
	
	(function yy(){
	
	
		var z=prompt("input");		
		mger.addToQueue(function (){
			/*
			
			Ajax.request({
			
					success:function(){
					//成功了,通知队列执行下一个
						mger.next();
					},
			
					err:function(){
					//失败了,通知队列重试当前函数
						mger.retry(maxRetry);				
					}
			});
			
			*/
			
			alert(z);
			
			//通知队列执行下一个
			//mger.next();	
			
			//重试,最终导致取消
			mger.retry(maxRetry);
			
						
		});
		
		
		mger.addToQueue(function (){
			alert(z+"_1");
			mger.next();
		});	
		
	
	})();
	
</script>
 

 

 

 

 

分享到:
评论

相关推荐

    AJAX请求队列实现

    AJAX请求队列实现主要讲解了如何管理多个异步AJAX请求,确保它们能够按照一定的顺序执行,以防止请求因执行时机冲突而被取消或丢失。在Web应用中,用户可能会在短时间内发起多个请求,这些请求可能是异步的。如果不...

    extjs对ajax的支持文档

    - 使用`Ext.Ajax.request`方法发起Ajax请求,该方法接受一系列参数,如URL、方法(GET或POST)、数据、回调函数等。 2. **请求配置**: - `url`: 发送请求的目标地址。 - `method`: HTTP方法,通常为GET或POST。...

    ajaxProxy:ajaxProxy 是一个ajax请求发送代理,支持链序请求和阻塞请求

    ajaxProxy is an ajax request sending proxy, which supports chain order request and blocking request ajaxProxy是一个异步请求的代码发送器,提供一种可读性更好的接口来实现异步请求的流程控制,并且提供了...

    ajax实现简单聊天室

    用户输入消息后,消息会通过Ajax发送到服务器,同时页面会自动更新以显示新的聊天记录。尽管这个例子没有使用数据库,但在实际应用中,通常会需要持久化存储聊天记录,以便用户刷新页面后还能看到之前的聊天内容。

    Ajax中get与post请求详解

    Ajax 发送请求时,get 请求的参数必须是 null 或 xhr.send(),否则可能会自动转换成 post 请求方式。可以通过 request.getMethod() 方法获取请求的方式。 实例代码: function getAjax(){ //获取 xhr 对象 var ...

    多ajax请求的各类解决方案(同步, 队列, cancel请求)

    var ajaxRequest = {}; $.ajaxQueue = function (settings) { // 省略部分代码... }; })(jQuery); ``` 通过队列,你可以确保请求按照添加到队列的顺序依次执行,而不会阻塞浏览器。 3. **取消请求**: 当有...

    AJAX 三种实现方式 自己构建 prototype juery

    以上三种方式都实现了基本的AJAX功能,但jQuery和Prototype提供了更多的抽象和便利功能,如错误处理、数据序列化、异步请求队列等。选择哪种方式取决于项目需求和个人喜好。如果你需要更高级的功能或者更好的浏览器...

    YUI-ajax框架开发文档

    - `YAHOO.util.Connect.asyncRequest`: 这是发起Ajax请求的主要函数,接受四个参数:请求类型(GET或POST)、请求URL、回调函数对象(包含success、failure和complete回调)和请求配置(如额外的HTTP头、POST数据等...

    ajax实现文件上传

    题目中提到可以控制同时上传文件的个数,这通常通过设置多个 Ajax 请求实例或者使用队列管理来实现。例如,可以设定一个最大并发数,超出数量的文件会被放入队列等待上传。 6. **错误处理**: 为了提供良好的用户...

    Laravel开发-salao-gerencial-ajax

    【Laravel开发-salao-gerencial-ajax】项目是一个基于Laravel框架的管理应用程序,用于管理沙龙业务。帕科特·拉雷维尔可能是这个项目的开发者或贡献者。在这个项目中,他利用了Laravel的强大功能,结合Ajax技术,...

    jquery+ajax上传文件

    JavaScript 部分会配置 Uploadify 的参数,如上传的 SWF 文件路径、处理文件的脚本地址、取消按钮图片、目标文件夹、队列 ID、是否自动上传以及是否支持多文件上传等。 5. **编写上传处理器代码**:在 `...

    教你如何终止JQUERY的$.AJAX请求

    var request = $.get("ajax.aspx", {id: 1}, function(data){ if(data.length == 0) return true; // 一些操作 }); request.abort(); // 立即停止请求 ``` 示例三:防止重复发送请求 ```javascript var request; ...

    laravel-ajax-crud:使用AJAX创建Laravel CRUD应用

    在本文中,我们将深入探讨如何使用AJAX与Laravel框架结合来创建一个完整的CRUD(创建、读取、更新和删除)应用程序。Laravel是一个基于PHP的优雅且强大的Web开发框架,而AJAX则允许我们在不刷新整个页面的情况下实现...

    使用案例驱动的示例来使用Puppeteer和headlesschrome

    通过学习这些例子,你可以更全面地了解 Puppeteer 在实际项目中的应用,比如登录操作、Ajax 请求处理、动态内容的等待、错误处理等。 总的来说,Puppeteer 结合 headless Chrome 提供了一种高效、灵活的方式来实现...

    ASP.NET(C#)实现一次性上传多张图片

    在服务器端,还可以考虑使用队列处理大量文件上传,以防止服务器负载过高。 总之,ASP.NET(C#)实现一次性上传多张图片主要涉及前端的文件选择、Ajax提交,以及后端的文件接收、处理和存储。理解这些关键步骤,...

    asp.net带进度上传控件

    3. **初始化Uploadify**:使用JavaScript代码初始化Uploadify,设置上传参数,例如`swf`(Flash对象的路径)、`uploader`(服务器端处理文件的URL)、`queueID`(进度队列容器ID)等。 4. **服务器端处理**:在ASP...

    前端开发简历模板-Web前端开发工程师_梁先生 3年.pdf

    * 熟悉使用事件队列和自动登录机制 * 了解如何进行代码优化和性能优化 七、其他 * 了解如何编写简洁、可读和可维护的代码 * 熟悉使用代码编码风格guide和best practice * 了解如何对项目进行性能优化和问题解决

    ExtJS Web应用程序开发指南

    1. **Ext.Ajax对象**:它是ExtJS中的核心Ajax接口,提供了发送Ajax请求的所有方法,如`request()`,`getJSON()`,`getScript()`等。 2. **配置选项**:在使用Ajax请求时,你可以通过配置对象设置多种参数,如URL、...

    ExtJS 编写的批量上传(java实现)

    在描述中提到的"带自动压缩图片功能",这意味着在上传过程中,图片会被预先压缩以减少上传的数据量和服务器存储空间。这通常通过JavaScript库如`imgAreaSelect`或`canvas` API来实现。在选择图片文件后,前端可以先...

    Uploadify示例

    Uploadify通过AJAX请求将文件数据发送到服务器,这样可以在不刷新页面的情况下完成文件上传,提供实时的进度反馈。 在ASP.NET中集成Uploadify,你需要确保以下几个关键步骤: 1. **引入依赖**:首先在项目中添加...

Global site tag (gtag.js) - Google Analytics