jQuery - 拦截所有Ajax请求（统一处理超时、返回结果、错误状态码 ）

jQuery - 拦截所有Ajax请求（统一处理超时、返回结果、错误状态码 ）

前言

通过 jQuery 提供的 ajaxSetup 方法，我们可以拦截页面上所有的 Ajax 请求响应（包括 $.ajax、$.post、$.get）。这样我们可以对这些 Ajax 请求响应做统一的处理。比如判断 sesion 是否失效，失效的话就跳转到登录页。下面通过几个样例进行演示。
原文出自：www.hangge.com
转载请保留原文链接：http://www.hangge.com/blog/cache/detail_1412.html

一、统一处理返回结果

1. 后台返回数据样例

   比如后台返回如下格式的 JSON 数据，包括正常情况和异常情况。

    //正常数据返回
    {"state":1, "msg":"", "data":"欢迎访问hangge.com"}
     
    //session超时数据返回
    {"state":-1, "msg":"session超时，请重新登录！"}
     
    //异常情况数据返回
    {"state":0, "msg":"服务器繁忙，请稍后再试。"}

2. 前台处理样例

    //全局的ajax访问，处理ajax清求时异常
    $.ajaxSetup({
       contentType:"application/x-www-form-urlencoded;charset=utf-8",
       complete:function(XMLHttpRequest,textStatus){
          //通过XMLHttpRequest取得响应结果
          var res = XMLHttpRequest.responseText;
          try{
            var jsonData = JSON.parse(res);
            if(jsonData.state == -1){
              //如果超时就处理 ，指定要跳转的页面(比如登陆页)
              alert(jsonData.msg);
              window.location.replace("/login/index.php");
            }else if(jsonData.state == 0){
              //其他的异常情况,给个提示。
              alert(jsonData.msg);
            }else{
              //正常情况就不统一处理了
            }
          }catch(e){
          }
        }
     });
     
    //获取数据
    function getContent() {
      $.get("content.php", function (data){
          var jsonData = JSON.parse(data);
          //只处理正常的情况
          if(jsonData.state == 1){
            alert(jsonData.data);
          }
       });
    }

二、统一处理异常的HTTP状态码

       我们还可以通过 Ajax 拦截，根据异常的 HTTP 状态码（404、500等）统一处理各种请求错误、服务器错误等情况。

$.ajaxSetup({
   contentType:"application/x-www-form-urlencoded;charset=utf-8",
   complete:function(XMLHttpRequest,textStatus){
   },
   statusCode: {
     404: function() {
         alert('数据获取/输入失败，没有此服务。404');
     },
     504: function() {
         alert('数据获取/输入失败，服务器没有响应。504');
     },
     500: function() {
         alert('服务器有误。500');
     }
   }
});