详解jQuery官方的完整的Ajax事件
Posted 我是老冯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了详解jQuery官方的完整的Ajax事件相关的知识，希望对你有一定的参考价值。
列举jQuery官方的完整的Ajax事件列表：
1、ajaxStart (Global Event) ---- This event is broadcast if an Ajax request is started and no other Ajax requests are currently running.
***当开始一个AJAX请求的时候，此时没有其他活跃的AJAX请求，该请求就会触发ajaxStart事件。***
***从jQuery 1.8开始，ajaxStart事件的处理函数必须绑定到document对象上才能生效。***
$doc = $(document);
$doc.ajaxStart(function(){
alert(1)
})
$("#btn").click(function(){
// 该AJAX请求开始时，此时没有其他活跃的AJAX请求，但它不会触发
// 因为它的global选项为false，被禁止触发任何AJAX事件，所以它不会弹出对话框
$.ajax({
url: "index.html",
global: false //禁止触发全局AJAX事件
})
// 该AJAX请求开始时，此时没有其他活跃的AJAX请求(上一个请求虽然尚未执行完成，但它
被禁止触发全局AJAX事件，jQuery在检查活跃请求时会忽略掉它)
// 因此会触发ajaxStart事件，会弹出2次对话框
$.ajax({url:"myurl.php"})
})
2、beforeSend (Local Event) ---- This event, which is triggered before an Ajax request is started, allows you to modify the XMLHttpRequest object (setting additional headers, if need be.)
***beforeSend方法，用于在向服务器发送请求前执行一些动作。***
$.ajax({ beforeSend: function(){ // Handle the beforeSend event } // ......
});
常见用法案例：（在$.ajax请求中的beforeSend方法中把提交按钮禁用掉，等到Ajax请求执行完毕，在恢复按钮的可用状态。防止因网络或者其他原因导致重复提交）
// 提交表单数据到后台处理
$.ajax({ type: "post", data: studentInfo, contentType: "application/json", url: "/Home/Submit", beforeSend: function () { // 禁用按钮防止重复提交 $("#submit").attr({ disabled: "disabled" }); }, success: function (data) { if (data == "Success") { //清空输入框 clearBox(); } }, complete: function () { $("#submit").removeAttr("disabled"); }, error: function (data) { console.info("error: " + data.responseText); }
});
3、ajaxSend (Global Event) ---- This global event is also triggered before the request is run.
***ajaxSend() 方法规定 AJAX 请求即将发送时运行的函数。（每当一个Ajax请求即将发送，jQuery就会触发ajaxSend事件，在这个时间点所有处理函数都会使用.ajaxSend()方法注册并执行。）***
***注意：自 jQuery 版本 1.8 起，该方法只被附加到文档。***
$(document).ajaxSend(function(event,xhr,options){
//... ...
})
event - 包含 event 对象
xhr - 包含 XMLHttpRequest 对象
options - 包含 AJAX 请求中使用的选项
例:当 AJAX 请求即将发送时，改变 <div> 元素的内容
<!DOCTYPE html>
<html>
<head>
<script ></script>
<script>
$(document).ready(function(){
$(document).ajaxSend(function(e,xhr,opt){
$("div").append("<p>Requesting " + opt.url + "</p>");
});
$("button").click(function(){
$("div").load("demo_ajax_load.php");
});
});
</script>
</head>
<body>
<div>
<h2>使用 AJAX 修改文本</h2>
</div>
<button>修改内容</button>
</body>
</html>
当我们点击button元素并且Ajax请求即将开始，这个<div> 元素的内容就会改变。
***在jQuery1.9中，jQuery全局AJAX事件的所有处理程序， 包括哪些.ajaxSend()添加的方法，必须 附加到 document上。***
***如果 $.ajax() 或 $.ajaxSetup()调用时， global 选项设置为 false， 那么.ajaxSend()将不会被触发。***
4、success (Local Event) ---- This event is only called if the request was successful (no errors from the server, no errors with the data).
例：
$.ajax({
async : false,
cache : false,
type : 'POST',
url : 'area/prepareCreate',
error : function() {
alert('smx失败 ');
},
success : function(data) {
$("#content-wrapper").html(data);
}
});
***success（本地事件）----只有在请求成功时才会调用此事件（服务器没有错误，没有数据错误）。***
5、ajaxSuccess (Global Event) ---- This event is also only called if the request was successful.
语法：
.ajaxSuccess(function(event,xhr,options))
event - 包含 event 对象
xhr - 包含 XMLHttpRequest 对象
options - 包含 AJAX 请求中使用的选项
$("#msg").ajaxSuccess(function(evt, request, settings){
$(this).append("<p>请求成功!</p>");
});
***ajaxSuccess() 方法在 AJAX 请求成功时执行函数。***
***ajaxSuccess（全局事件）----只有在请求成功时才会调用此事件。***
***无论 Ajax 请求在何时成功完成 ，jQuery 都会触发该 ajaxSuccess 事件。在此时，由 .ajaxSuccess() 方法注册的任何函数都会被执行。***
6、error (Local Event) ---- This event is only called if an error occurred with the request (you can never have both an error and a success callback with a request).
例：
$.ajax({
async : false,
cache : false,
type : 'POST',
url : 'area/prepareCreate',
error : function() {
alert('smx失败 ');
},
success : function(data) {
$("#content-wrapper").html(data);
}
});
***error（本地事件）----只有当请求发生错误时才会调用此事件（对于请求，您永远不会同时发生错误和成功回调）。***
7、ajaxError (Global Event) ---- This global event behaves the same as the local error event.
语法：
.ajaxError(function(event,xhr,options,exc))
event - 包含 event 对象
xhr - 包含 XMLHttpRequest 对象
options - 包含 AJAX 请求中使用的选项
exc - 包含 javascript exception
$("div").ajaxError(function(){
alert("An error occurred!");
});
***ajaxError() 方法在 AJAX 请求发生错误时执行函数。***
***ajaxError（全局事件）----这个全局事件的行为与本地error事件相同。***
8、complete (Local Event) ---- This event is called regardless of if the request was successful, or not. You will always receive a complete callback, even for synchronous requests.
例：
$.ajax({
async : false,
cache : false,
type : 'POST',
url : 'area/prepareCreate',
error : function() {
alert('smx失败 ');
},
success : function(data) {
$("#content-wrapper").html(data);
},
complete: function (XMLHttpRequest, textStatus) {
console.log(XMLHttpRequest);
}
});
***complete（本地事件）----无论请求是否成功，都会调用此事件。 即使对于同步请求，您也将始终收到完整的回调。***
9、ajaxComplete (Global Event) ---- This event behaves the same as the complete event and will be triggered every time an Ajax request finishes.
语法：
.ajaxComplete(function(event,xhr,options))
event - 包含 event 对象
xhr - 包含 XMLHttpRequest 对象
options - 包含 AJAX 请求中使用的选项
$("#txt").ajaxComplete(function(){
$("#wait").css("display","none");
});
***ajaxComplete() 方法在 AJAX 请求完成时执行函数。***
***与 ajaxSuccess() 不同，通过 ajaxComplete() 方法规定的函数会在请求完成时运行，即使请求并未成功。***
***ajaxComplete（全局事件）----这个事件的行为与complete事件相同，每当Ajax请求结束时就会触发。***
10、ajaxStop (Global Event) ---- This global event is triggered if there are no more Ajax requests being processed.
$("div").ajaxStop(function(){
alert("所有 AJAX 请求已完成");
});
***无论 Ajax 请求在何时完成 ，jQuery 都会检查是否存在其他 Ajax 请求。如果不存在，则 jQuery 会触发该 ajaxStop 事件。在此时，由 .ajaxStop() 方法注册的任何函数都会被执行。***
总结：
***触发ajax请求后，各个事件执行顺序就是1~10的顺序
***先执行success，再执行error，最后始终执行complete
***success：即status==200;
***complete：即status==404、403、302...只要不出错就行。
***因为通常我们需要用来清理资源 所以就设计成compelete在success之后执行
以上是关于详解jQuery官方的完整的Ajax事件的主要内容，如果未能解决你的问题，请参考以下文章