JS を介してグローバル Ajax リクエストインスタンスの解析をインターセプトする-jsチュートリアル-php.cn

JS を介してグローバル Ajax リクエストインスタンスの解析をインターセプトする

高洛峰

リリース： 2017-03-28 14:39:00

オリジナル

2528 人が閲覧しました

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

Ajax-hook ソースコードアドレス: https://github.com/wendux/Ajax-hook

使用方法

1. ajaxhook.js を導入します

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

ログイン後にコピー

2.または関数。

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

API

hookAjax(ob)

1.ob、タイプはオブジェクト、キーはインターセプトするコールバックまたは関数、値はインターセプト関数です。

2. 戻り値: 元の XMLHttpRequest。書き込みリクエストがあり、傍受されたくない場合は、新しい this を使用できます。

unHookAjax()

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

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

ログイン後にコピー

出力をテストします:

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。インターセプト関数の戻り値はブール値で、デフォルトは false です。リクエストをブロックしないでください。

2. すべてのコールバックインターセプト関数のパラメーターは、onreadystatechange、onload などの現在の XMLHttpRequest インスタンスです。ajax のオリジナルメソッドのすべてのインターセプト関数は、元のパラメーターを配列の形式でインターセプト関数に渡します。インターセプト関数で変更できます。

上記は編集者が紹介した JS インターセプトのグローバル Ajax リクエスト分析の例です。ご質問があればメッセージを残してください。編集者がすぐに返信します。

Ajaxリクエストにおけるインターセプタのインターセプト例を詳しく解説

Mock.jsを使用してNode.jsサーバー環境でAJAXリクエストをインターセプトするチュートリアル

php を介した ajax リクエスト