jquery ajax 事件

一、ajax 事件顺序

jquery中各个事件执行顺序如下：

1.ajaxStart(全局事件)

2.beforeSend

3.ajaxSend(全局事件)

4.success

5.ajaxSuccess(全局事件)

6.error

7.ajaxError (全局事件)

8.complete

9.ajaxComplete(全局事件)

10.ajaxStop(全局事件)

Ajax中success与complete的关系

$.ajax({
      type: "get|post",
      url: url,
      dataType:'data',
      success: function(data) { },
     complete: function(XMLHttpRequest, textStatus) { },
     error: function(){}
});

success ： 当请求成功时调用的函数。这个函数会得到一个参数：从服务器返回的数据。当请求成功时调用函数，即status==200。
complete ：当请求完成时调用的函数。这个函数会得到两个参数：XMLHttpRequest对象和一个描述请求成功的类型的字符串。当请求完成时调用函数，即status==404、403、302...。

var data = XMLHttpRequest.responseText;
var dataJson = JSON.parse(data);

总结 success是只有在请求成功（status=200）时才会执行，而complete在请求完成后都会执行，不管成功失败

二、JQuery ajax设置全局错误处理

1. $(function(){  
2.     // 设置jQuery Ajax全局的参数  
3.     $.ajaxSetup({  
4.         type: "POST",  
5.         error: function(jqXHR, textStatus, errorThrown){  
6.             switch (jqXHR.status){  
7.                 case(500):  
8.                     alert("服务器系统内部错误");  
9.                     break;  
10.                 case(401):  
11.                     alert("未登录");  
12.                     break;  
13.                 case(403):  
14.                     alert("无权限执行此操作");  
15.                     break;  
16.                 case(408):  
17.                     alert("请求超时");  
18.                     break;  
19.                 default:  
20.                     alert("未知错误");  
21.             }  
22.         },   
23.         success: function(data){  
24.             alert("操作成功");  
25.         }  
26.     });  
27. });  

三、ajax方法的全局事件的用处

ajax全局事件，有个典型的应用场合：
你的页面存在多个甚至为数不少的ajax请求，但是这些ajax请求都有相同的消息机制。ajax请求开始前显示一个提示框，提示“正在读取数据“；ajax请求成功时提示框显示“数据获取成功”；ajax请求结束后隐藏提示框。
不使用全局事件的做法是：
给$.ajax()加上beforeSend、success、complete回调函数，在回调函数中加上处理提示框。
使用全局事件的做法是：

$(document).ajaxStart(onStart)
           .ajaxComplete(onComplete)
           .ajaxSuccess(onSuccess);
 
    function onStart(event) {
        //.....
    }
    function onComplete(event, xhr, settings) {
        //.....
    }
    function onSuccess(event, xhr, settings) {
        //.....
    }