当前位置: 首页 > 中文手册 > jQuery.ajaxStart() 函数详解

jQuery.ajaxStart() 函数详解

ajaxStart()函数用于为AJAX请求的ajaxStart事件绑定处理函数

这是一个全局AJAX事件函数,用于在ajaxStart事件被触发时执行绑定的事件处理函数。

jQuery官方文档描述:无论什么时候,当一个AJAX请求将要被发送时,jQuery会检查当前是否还有其他活跃的(未完成的)AJAX请求。如果在进程中没有找到其他活跃的AJAX请求,jQuery就会触发ajaxStart事件。此时,通过ajaxStart()函数绑定的所有事件处理函数都将被执行。

简而言之,当开始一个AJAX请求的时候,此时没有其他活跃的AJAX请求,该请求就会触发ajaxStart事件。

一般而言,连续执行多个AJAX请求,只有其中的第一个AJAX请求会触发ajaxStart事件。等到所有AJAX请求执行完毕后,再次连续执行多个AJAX请求,还是只有其中的第一个AJAX请求会触发ajaxStart事件。

如果某个AJAX请求被禁止触发全局AJAX事件,则它不会被视为活跃的AJAX请求。

该函数必须在jQuery对象实例上调用,ajaxStart()将为每个匹配元素绑定事件处理函数。当ajaxStart事件被触发时,所有匹配元素上绑定的处理函数都将被调用。事件处理函数内的this将指向当前DOM元素。

你可以为同一元素多次调用该函数,从而绑定多个事件处理函数。触发事件时,jQuery会按照绑定的先后顺序依次执行绑定的事件处理函数。

jQuery 1.8开始,该函数只能document对象绑定事件处理函数,为其他元素绑定的事件处理函数不会起作用。

如果在jQuery.ajax()jQuery.ajaxSetup()中将选项参数global设为false,可以禁止该AJAX请求触发全局的AJAX事件。

该函数属于jQuery对象(实例)。

语法

jQuery 1.0 新增该函数。

jQueryObject.ajaxStart( handler )

参数

参数描述
handlerFunction类型触发该事件时,需要执行的事件处理函数。

返回值

ajaxStart()函数的返回值为jQuery类型,返回当前jQuery对象本身。

示例&说明

关于ajaxStart事件和ajaxStop事件的触发机制,你可以参考jQuery的jQuery.ajax()函数的部分源代码。

通过以下源代码,我们可以知道:jQuery会统计当前活跃的AJAX请求数。每当开始执行一个AJAX请求时,会在活跃数上加1;每当一个AJAX请求结束时,就在活跃数上减1。如果一个AJAX请求开始时,活跃数为0,则触发ajaxStart事件;如果一个AJAX请求结束时,活跃数为0,则触发ajaxStop事件。

// jQuery.ajax()函数的开头部分

var fireGlobals = s.global; // 是否允许触发全局AJAX事件

// 如果允许触发全局AJAX事件,并且活跃的AJAX请求数为0,则触发ajaxStart事件
if ( fireGlobals && jQuery.active++ === 0 ) {
	jQuery.event.trigger("ajaxStart");
}

// ... 省略中间的源代码

// jQuery.ajax()函数的末尾部分
if ( fireGlobals ) {
	globalEventContext.trigger( "ajaxComplete", [ jqXHR, s ] );
	// 如果允许触发全局事件,并且活跃的AJAX请求数为0,则触发ajaxStop事件
	if ( !( --jQuery.active ) ) {
		jQuery.event.trigger("ajaxStop");
	}
}

请参考以下HTML示例代码:

<div id="content1">CodePlayer</div>
<div id="content2">专注于编程开发技术分享</div>
<div id="content3">http://www.365mini.com</div>
<input id="btn" type="button" value="开始AJAX请求" />

以下是与ajaxStart()函数相关的jQuery示例代码,以演示ajaxStart()函数的具体用法:

以下代码请基于1.8之前版本的jQuery来运行。

var $divs = $("div");

$divs.ajaxStart( function(){
	alert("处理函数1:当前元素id为" + this.id );
} );

$divs.ajaxStart( function(){
	alert("处理函数2:当前元素id为" + this.id );
} );

// 点击执行AJAX请求
$("#btn").click( function(){

	// 该AJAX请求开始时,此时没有其他活跃的AJAX请求,因此会触发ajaxStart事件
	// 它会弹出6次对话框 ,因为当前页面有3个div元素,我们为每个div元素绑定了2个事件处理函数
	$.ajax( { url: "index.html" } );	
	
	// 该AJAX请求开始时,上一个AJAX请求尚未执行完毕,因此不会触发ajaxStart事件,也不会弹出对话框
	$.ajax( { url: "myurl.php" } );
	
} );

如果当前jQuery为1.8及以上版本,上述jQuery代码不会弹出对话框。因为从jQuery 1.8开始,ajaxStart事件的处理函数必须绑定到document对象上才能生效。

因此,不论当前jQuery为何版本,如果不是特殊需求,我们都应该将ajaxStart事件的处理函数绑定到document对象上。

var $doc = $( document );

$doc.ajaxStart( function(){
	alert("处理函数1" );
} );

$doc.ajaxStart( function(){
	alert("处理函数2" );
} );

// 点击执行AJAX请求
$("#btn").click( function(){

	// 该AJAX请求开始时,此时没有其他活跃的AJAX请求,因此会触发ajaxStart事件
	// 它会弹出2次对话框 ,因为我们为document绑定了2个事件处理函数
	$.ajax( { url: "index.html" } );
	
	
	// 该AJAX请求开始时,上一个AJAX请求尚未执行完毕,因此不会触发ajaxStart事件,也不会弹出对话框
	$.ajax( { url: "myurl.php" } );
	
} );

现在,我们参考以下jQuery代码。我们将第二个AJAX请求延迟3秒执行(或者其他能保证第一个AJAX请求执行完毕的时间值),此时两个AJAX请求都会弹出对话框。

var $doc = $( document );

$doc.ajaxStart( function(){
	alert("处理函数1" );
} );

$doc.ajaxStart( function(){
	alert("处理函数2" );
} );

// 点击执行AJAX请求
$("#btn").click( function(){

	// 该AJAX请求开始时,此时没有其他活跃的AJAX请求,因此会触发ajaxStart事件
	// 它会弹出2次对话框
	$.ajax( { url: "index.html" } );

	// 延迟3秒执行第二个AJAX请求
	setTimeout( function(){
		
		// 该AJAX请求开始时,此时没有其他活跃的AJAX请求(上一个请求已经执行完毕)
		// 因此会触发ajaxStart事件,会弹出2次对话框
		$.ajax( { url: "myurl.php" } );
		
	}, 3000);	
	
} );

如果第一个AJAX请求被禁止触发全局AJAX事件,则它不会被视作活跃的AJAX请求。下一个AJAX请求会触发ajaxStart事件。

var $doc = $( document );

$doc.ajaxStart( function(){
	alert("处理函数1" );
} );

$doc.ajaxStart( function(){
	alert("处理函数2" );
} );

// 点击执行AJAX请求
$("#btn").click( function(){

	// 该AJAX请求开始时,此时没有其他活跃的AJAX请求,但它不会触发ajaxStart事件
	// 因为它的global选项为false,被禁止触发任何AJAX事件,所以它不会弹出对话框
	$.ajax( { 
		url: "index.html",
		global: false // 禁止触发全局AJAX事件
	} );
	
	
	// 该AJAX请求开始时,此时没有其他活跃的AJAX请求(上一个请求虽然尚未执行完成,但它被禁止触发全局AJAX事件,jQuery在检查活跃请求时会忽略掉它)
	// 因此会触发ajaxStart事件,会弹出2次对话框
	$.ajax( { url: "myurl.php" } );
	
} );
24 3
我们认为: 用户的主要目的,是为了获取有用的信息,而不是来点击广告的。因此本站将竭力做好内容,并将广告和内容进行分离,确保所有广告不会影响到用户的正常阅读体验。用户仅凭个人意愿和兴趣爱好点击广告。
我们坚信:只有给用户带来价值,用户才会给我们以回报。
CodePlayer技术交流群1CodePlayer技术交流群1

帮朋友打一个硬广告:

P2P网贷系统(Java版本) 新年低价大促销,多年P2P技术积累,系统功能完善(可按需定制,可支持第三方存管、银行存管),架构稳定灵活、性能优异、二次开发快速简单。 另可提供二次开发、安装部署、售后维护、安全培训等一条龙服务。

外行看热闹,内行看门道。可以自信地认为,在系统设计上,比市面上的晓风、迪蒙、方维、绿麻雀、国融信、金和盛等P2P系统要好。
深圳地区支持自带技术人员现场考察源代码、了解主要技术架构,货比三家,再决定是否购买。

也可推荐他人购买,一旦完全成交,推荐人可获得实际售价 10% 的返现。
有意向者,详情请 点击这里 联系,工作时间立即回复。