ホームページ > 記事 > ウェブフロントエンド > Js がグローバル Ajax リクエストをインターセプトする

Js がグローバル Ajax リクエストをインターセプトする

小云云オリジナル: 2017-12-09 16:52:431759ブラウズ

次のようなニーズがあったことはありますか: すべての Ajax リクエストに統一署名を追加する必要がある、特定のインターフェイスがリクエストされた回数をカウントする必要がある、http リクエストの取得または投稿のメソッドを制限する必要がある、分析する必要がある他の人のネットワークプロトコルなどを確認するにはどうすればよいですか?考えてみてください。すべての ajax リクエストをインターセプトできれば、問題は非常に単純になります。

使い方

1. スクリプトを直接導入します

ajaxhook.js

<script src="wendu.ajaxhook.js"></script>

を導入して、必要な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])
    }
})

わかりました。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 を使用していることもわかります。

2. CommonJs 下のモジュール構築ツール環境で

webpack の下にあると仮定して、最初のステップは ajax-hook npm プラグインをインストールすることです

npm install ajax-hook --save-dev

2 番目のステップはモジュールを導入して API を呼び出すことです:

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

API

hookAjax( ob)

ob、タイプはオブジェクト、キーはインターセプトするコールバックまたは関数、値はインターセプト関数です。
戻り値: 元の XMLHttpRequest。書き込みリクエストがあり、傍受されたくない場合は、これを新しく作成できます。

unHookAjax()

インターセプトをアンインストールします。アンインストール後は、インターセプトは無効になります。

Ajaxの動作を変更します

すべてのAjaxリクエストをインターセプトし、リクエストメソッドを検出し、それが「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;
   }
 })

Result:

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))
        })

    })

output:

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

注意

インターセプト関数の戻り値はブール値です。true の場合、デフォルトは false で、Ajax リクエストはブロックされません。リクエスト。
すべてのコールバックインターセプト関数のパラメーターは、onreadystatechange、onload などの現在の XMLHttpRequest インスタンスです。Ajax オリジナルメソッドのすべてのインターセプト関数は、元のパラメーターを配列の形式でインターセプト関数に渡します。インターセプト関数で変更してください。