jQuery - 攔截所有Ajax請求(統一處理超時、返回結果、錯誤狀態碼 )


樣例代碼:

  

<html>
  <head>
    <title>hangge.com</title>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="./jquery-1.11.1.min.js"></script>
    <script>
      //全局的ajax訪問,處理ajax清求時session超時
      $.ajaxSetup({
         contentType:"application/x-www-form-urlencoded;charset=utf-8",
         complete:function(XMLHttpRequest,textStatus){
             //通過XMLHttpRequest取得響應頭,sessionstatus,
             var sessionstatus=XMLHttpRequest.getResponseHeader("sessionstatus");
             if(sessionstatus=="timeout"){
                 //如果超時就處理 ,指定要跳轉的頁面(比如登陸頁)
                 window.location.replace("/login/index.php");
             }
          }
       });
 
      //獲取數據
      function getContent() {
        $.get("content.php", function (data){
                alert(data);
        });
      }
 
      //登錄或注銷
      function login(value) {
        $.get("login.php",{"login":value} , function (data){
                alert(data);
        });
      }
    </script>
  </head>
  <body>
    <button onclick="getContent()">獲取數據</button>
    <button onclick="login(true)">登錄</button>
    <button onclick="login(false)">注銷</button>
  </body>
</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' );
      }
    }
});

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM