首頁 > web前端 > js教程 > 主體

Js 攔截全域ajax請求

小云云
發布: 2017-12-09 16:52:43
原創
1738 人瀏覽過

你是否有過下面的需求:需要為所有ajax請求添加統一簽名、需要統計某個接口被請求的次數、需要限制http請求的方法必須為get或post、需要分析別人網絡協議等等,那如何做?想想,如果能夠攔截所有ajax請求,那麼問題就會變的很簡單!


如何使用

一.直接引入腳本

  1. 引入ajaxhook.js

    <script src="wendu.ajaxhook.js"></script>
    登入後複製
  2. 攔截所需的ajax 回呼或函數。

    hookAjax({
        //拦截回调
        onreadystatechange:function(xhr){
            console.log("onreadystatechange called: %O",xhr)
        },
        onload:function(xhr){
            console.log("onload called: %O",xhr)
        },
        //拦截函数
        open:function(arg){
         console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2])
        }
    })
    登入後複製

ok, 我們使用jQuery(v3.1) 的get方法來測試:

// get current page source code 
$.get().done(function(d){
    console.log(d.substr(0,30)+"...")
})
登入後複製

結果 :

> open called: method:GET,url:http://localhost:63342/Ajax-hook/demo.html,async:true
> onload called: XMLHttpRequest
> <!DOCTYPE html>
  <html>
  <head l...
登入後複製

攔截成功了! 我們也可以看到jQuery3.1內部已經放棄onreadystatechange而改用onload了。

二. CommonJs下的模組建置工具環境中

假設在webpack下,第一步, 安裝ajax-hook npm外掛

npm install ajax-hook --save-dev
登入後複製

第二步,引入模組並且呼叫api:

const ah=require("ajax-hook")
ah.hookAjax({ 
  onreadystatechange:function(xhr){ ... },
  onload:function(xhr){ ... }, 
  ...
})
...
ah.unHookAjax()
登入後複製

API

hookAjax(ob)

  • ob,類型是對象,key為想要攔截的回呼或函數, value為我們的攔截函數。

  • 傳回值: 原始的 XMLHttpRequest。如果有寫請求不想被攔截,可以new 這個。

unHookAjax()

  • #卸載攔截;卸載後,攔截將失效。

改變ajax行為

攔截所有ajax請求,檢測請求method,如果是「GET」,則中斷請求並給予提示

hookAjax({
  open:function(arg){
    if(arg[0]=="GET"){
      console.log("Request was aborted! method must be post! ")
      return true;
    }
  } 
 })
登入後複製

攔截所有ajax請求,請求統一添加時間戳

hookAjax({
  open:function(arg){
    arg[1]+="?timestamp="+Date.now();
  } 
 })
登入後複製

修改請求返回的資料「responseText」

hookAjax({
   onload:function(xhr){
    //请求到的数据首部添加"hook!" 
    xhr.responseText="hook!"+xhr.responseText;
   }
 })
登入後複製

結果:

hook!<!DOCTYPE html>
<html>
<h...
登入後複製

有了這些範例,相信開頭提到的需求都很容易實現。最後測試unHook

   hookAjax({
        onreadystatechange:function(xhr){
            console.log("onreadystatechange called: %O",xhr)
            //return true

        },
        onload:function(xhr){
            console.log("onload called")
            xhr.responseText="hook"+xhr.responseText;
            //return true;
        },
        open:function(arg){
          console.log("open called: method:%s,url:%s,async:%s",arg[0],arg[1],arg[2])
          arg[1]+="?hook_tag=1";

        },
        send:function(arg){
         console.log("send called: %O",arg[0])
        }
    })

    $.get().done(function(d){
        console.log(d.substr(0,30)+"...")
        //use original XMLHttpRequest
        console.log("unhook")
        unHookAjax()
        $.get().done(function(d){
            console.log(d.substr(0,10))
        })

    })
登入後複製

輸出:

open called: method:GET,url:http://localhost:63342/Ajax-hook/demo.html,async:true
send called: null
onload called
hook<!DOCTYPE html>
<html>
<he...
unhook
<!DOCTYPE
登入後複製

注意

  1. 攔截函數回傳值是一個boolean,如果為true則會阻斷ajax請求,預設為false,不會阻斷請求。

  2. 所有的回呼攔截函數的參數為目前的XMLHttpRequest 實例,如onreadystatechange、onload;所有ajax原始方法的攔截函數會將原始參數以陣列的形式傳遞給攔截函數,你可以在攔截函數中修改它。

相關推薦:

ajax要求成功後新開視窗window.open()被攔截解決方法

ajax回呼開啟新視窗防止瀏覽器攔截有效方法

關於用JavaScript攔截form的submit方法實作

以上是Js 攔截全域ajax請求的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!