jQuery AJAX 事件监听: 代码详解与应用

这段代码使用 jQuery 的 $.each() 方法遍历一个包含 AJAX 事件类型的数组，例如 'ajaxStart'、'ajaxStop' 等。对于每个事件类型，代码会创建一个名为该事件类型的 jQuery 方法，例如 $.fn.ajaxStart。

当调用这些方法时，例如 $(selector).ajaxStart(function(){...})，实际上是将指定的回调函数绑定到对应的 AJAX 事件类型。这意味着当相应的 AJAX 事件发生时，注册的回调函数将会被执行。

代码解析:

jQuery.each( [ 
	'ajaxStart',
	'ajaxStop',
	'ajaxComplete',
	'ajaxError',
	'ajaxSuccess',
	'ajaxSend'
], function( i, type ) {
	jQuery.fn[ type ] = function( fn ) {
		return this.on( type, fn );
	};
} );

1. jQuery.each(): 遍历数组 ['ajaxStart', 'ajaxStop', ...] 中的每个事件类型 type。
2. jQuery.fn[ type ] = function( fn ) { ... }: 为每个事件类型 type 创建一个新的 jQuery 方法，例如 $.fn.ajaxStart。这个方法接收一个回调函数 fn 作为参数。
3. this.on( type, fn ): 使用 jQuery 的 on() 方法将回调函数 fn 绑定到当前 jQuery 对象的 type 事件上。

应用场景:

这段代码可以让开发者更方便地监听 AJAX 请求的不同状态，并在相应的事件发生时执行特定的操作。例如，可以在 ajaxStart 事件中显示一个加载动画，在 ajaxSuccess 事件中隐藏动画并显示成功信息，在 ajaxError 事件中显示错误信息。

示例:

$(document).ready(function() {
    $.ajax({ 
        url: '...', 
        success: function(data) { 
            // 成功处理 
        }, 
        error: function() { 
            // 错误处理 
        }, 
        ajaxStart: function() { 
            // 请求开始时显示加载动画 
        }, 
        ajaxComplete: function() { 
            // 请求结束后隐藏加载动画 
        } 
    });
});