全局 Ajax 事件处理器
jQuery中将Ajax请求和响应分成了若干(5)个阶段 并且允许开发者在Ajax请求和响应的不同阶处理不同的逻辑,
这些方法用于注册事件处理器,用来处理页面上的任何 Ajax 请求,当某些事件触发后,这些事件处理器被调用。例如正在加载的页面的loading图片...
这五个方法分别是:
.ajaxStart() 准备发送
.ajaxSend() 请求发出
.ajaxSuccess() 请求成功
.ajaxError() 请求失败
.ajaxComplete() 任一单个Ajax请完成时会触发
.ajaxStop() 某一页所有Ajax请求都完成时才触发
详细描述:
- .ajaxStart() : 在AJAX 请求刚开始时执行一个处理函数。每当一个Ajax请求即将发送,jQuery检查是否有任何其他响应过程中的Ajax请求(注:未完成的请求)。如果没有检查到,jQuery就会触发
ajaxStart
事件,在这个时间点所有处理函数都会使用.ajaxStart()
方法注册并执行。
例:当Ajax请求开始发送时显示一个信息 (没有一个Ajax请求是已经激活的).
$('.btn').ajaxStart(function() { $( "#loading" ).show(); });
- .ajaxSend() : 在Ajax请求发送之前绑定一个要执行的函数。每当一个Ajax请求即将发送,jQuery就会触发
ajaxSend
事件,在这个时间点所有处理函数都会使用.ajaxSend()
方法注册并执行。
例:当Ajax请求即将发送前显示一个信息。
$('.btn').ajaxSend(function(event, request, settings) { $( "#msg" ).append( "<li>Starting request at " + settings.url + "</li>" ); });
- .ajaxSuccess() : 绑定一个函数当 Ajax 请求成功完成时执行。每当一个Ajax请求成功完成,jQuery就会触发
ajaxSuccess
事件,在这个时间点所有处理函数都会使用.ajaxSuccess()
方法注册并执行。
例:当Ajax请求成功完成时,显示一个信息。
$('.btn').ajaxSuccess(function(event, request, settings) { $( "#msg" ).append( "<li>Successful Request!</li>" ); });
- .ajaxError() : Ajax请求出错时注册一个回调处理函数。每当一个Ajax请求出错时,jQuery就会触发
ajaxError
事件,在这个时间点所有处理函数会使用.ajaxError()
方法注册并执行。
例:当Ajax请求失败后显示一个信息.
$('.btn').ajaxError(function(event, request, settings) { $( "#msg" ).append( "<li>Error requesting page " + settings.url + "</li>" ); });
- .ajaxComplete() 当Ajax请求完成后注册一个回调函数。每当一个Ajax请求完成,jQuery就会触发
ajaxComplete
事件,在这个时间点所有处理函数会使用.ajaxComplete()
方法注册并执行。
例:当Ajax请求完成后显示一个信息。
$('.btn').ajaxComplete(function(event,request, settings) { $( "#msg" ).append( "<li>Request Complete.</li>" ); });
- .ajaxStop():在AJAX 请求完成时执行一个处理函数。每当一个Ajax请求完成,jQuery检查是否有任何其他响应过程中的Ajax请求(注:未完成的请求)。如果都执行完成,jQuery就会触发
ajaxStop
事件,在这个时间点所有处理函数都会使用.ajaxStop()
方法注册并执行。如果一个未处理完成的Ajax请求用beforeSend
回调函数返回false
取消,ajaxStop
事件也被触发
例:在Ajax请求停止后隐藏加载信息
$('.btn').ajaxStop(function() { $( "#loading" ).hide(); });
注:监听不同阶段的元素可以是任意DOM元素,但是从版本1.8开始只能绑订到document
此随笔参照 jQuery API 中文文档