亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

jQuery - 攔截所有Ajax請求(統(tǒng)一處理超時、返回結(jié)果、錯誤狀態(tài)碼 )

asal 2016-11-17 11:50:08 1137
abstrak:通過 jQuery 提供的 ajaxSetup 方法,我們可以攔截頁面上所有的 Ajax 請求響應(yīng)(包括 $.ajax、$.post、$.get)。這樣我們可以對這些 Ajax 請求響應(yīng)做統(tǒng)一的處理。比如判斷 sesion 是否失效,失效的話就跳轉(zhuǎn)到登錄頁。下面通過幾個樣例進行演示。一、判

通過 jQuery 提供的 ajaxSetup 方法,我們可以攔截頁面上所有的 Ajax 請求響應(yīng)(包括 $.ajax、$.post、$.get)。這樣我們可以對這些 Ajax 請求響應(yīng)做統(tǒng)一的處理。比如判斷 sesion 是否失效,失效的話就跳轉(zhuǎn)到登錄頁。下面通過幾個樣例進行演示。

一、判斷session是否失效,并統(tǒng)一進行處理

Ajax 請求數(shù)據(jù)時,后臺代碼判斷當(dāng)前 session 是否存在,是否已經(jīng)超時失效了。如果 session 存在則返回正常數(shù)據(jù)。如果不存在則不返回正常數(shù)據(jù),并在 header 中添加一個 session 超時標(biāo)記。

頁面攔截請求后判斷 header 中是否有這個超時標(biāo)記,如果有的話則提示用戶,并跳轉(zhuǎn)到登錄頁面。

1,樣例效果圖

(1)先點擊“登錄”按鈕創(chuàng)建 session,再點擊“獲取數(shù)據(jù)”按鈕則可以成功得到數(shù)據(jù)。

(2)如果未登錄,或者登錄后又點擊了“注銷”按鈕。獲取數(shù)據(jù)時后臺判斷沒有 session,則會在 header 中設(shè)置一個超時標(biāo)記。前臺頁面彈出提示并跳轉(zhuǎn)到登錄頁。


QQ圖片20161117104700.pngQQ圖片20161117104749.png

2,樣例代碼

(1)index.html(主頁面)

<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取得響應(yīng)頭,sessionstatus,
             var sessionstatus=XMLHttpRequest.getResponseHeader("sessionstatus");
             if(sessionstatus=="timeout"){
                 //如果超時就處理 ,指定要跳轉(zhuǎn)的頁面(比如登陸頁)
                 window.location.replace("/login/index.php");
             }
          }
       });
 
      //獲取數(shù)據(jù)
      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()">獲取數(shù)據(jù)</button>
    <button onclick="login(true)">登錄</button>
    <button onclick="login(false)">注銷</button>
  </body>
</html>

(2)login.php(登錄注銷)

<?php
//啟動session會話
session_start();
 
//處理登錄或登出
if($_GET["login"] == "true"){
  $_SESSION['userid'] = 123;
  echo "登錄成功!";
}else{
  unset($_SESSION['userid']);
  echo "退出成功!";
}
?>

(3)content.php(獲取內(nèi)容)

<?php
//啟動session會話
session_start();
 
//session不存在的話停止返回數(shù)據(jù),并在頭部標(biāo)記session失效
if (!isset($_SESSION["userid"])){
  echo "session超時,請重新登錄!";
  header("sessionstatus: timeout");
  return;
}
?>
 
這個是測試數(shù)據(jù)!這個是測試數(shù)據(jù)!

二、統(tǒng)一處理返回結(jié)果

上面的樣例是通過 header 中的標(biāo)記來判斷 session 是否超時。我們也可以將超時或是其他異常情況放置在返回結(jié)果中,前臺統(tǒng)一解析結(jié)果來進行各種異常處理。

1,后臺返回數(shù)據(jù)樣例

比如后臺返回如下格式的 JSON 數(shù)據(jù),包括正常情況和異常情況。

//正常數(shù)據(jù)返回
{"state":1, "msg":"", "data":"歡迎訪問hangge.com"}
 
//session超時數(shù)據(jù)返回
{"state":-1, "msg":"session超時,請重新登錄!"}
 
//異常情況數(shù)據(jù)返回
{"state":0, "msg":"服務(wù)器繁忙,請稍后再試。"}

2,前臺處理樣例

//全局的ajax訪問,處理ajax清求時異常
$.ajaxSetup({
   contentType:"application/x-www-form-urlencoded;charset=utf-8",
   complete:function(XMLHttpRequest,textStatus){
      //通過XMLHttpRequest取得響應(yīng)結(jié)果
      var res = XMLHttpRequest.responseText;
      try{
        var jsonData = JSON.parse(res);
        if(jsonData.state == -1){
          //如果超時就處理 ,指定要跳轉(zhuǎn)的頁面(比如登陸頁)
          alert(jsonData.msg);
          window.location.replace("/login/index.php");
        }else if(jsonData.state == 0){
          //其他的異常情況,給個提示。
          alert(jsonData.msg);
        }else{
          //正常情況就不統(tǒng)一處理了
        }
      }catch(e){
      }
    }
 });
 
//獲取數(shù)據(jù)
function getContent() {
  $.get("content.php", function (data){
      var jsonData = JSON.parse(data);
      //只處理正常的情況
      if(jsonData.state == 1){
        alert(jsonData.data);
      }
   });
}

三、統(tǒng)一處理異常的HTTP狀態(tài)碼

我們還可以通過 Ajax 攔截,根據(jù)異常的 HTTP 狀態(tài)碼(404、500等)統(tǒng)一處理各種請求錯誤、服務(wù)器錯誤等情況。

$.ajaxSetup({
   contentType:"application/x-www-form-urlencoded;charset=utf-8",
   complete:function(XMLHttpRequest,textStatus){
   },
   statusCode: {
     404: function() {
         alert('數(shù)據(jù)獲取/輸入失敗,沒有此服務(wù)。404');
     },
     504: function() {
         alert('數(shù)據(jù)獲取/輸入失敗,服務(wù)器沒有響應(yīng)。504');
     },
     500: function() {
         alert('服務(wù)器有誤。500');
     }
   }
});


Nota Keluaran

Penyertaan Popular