ホームページ > 記事 > ウェブフロントエンド > JS を介してグローバル Ajax リクエスト インスタンスの解析をインターセプトする
JS を介してグローバル Ajax リクエスト インスタンスの解析をインターセプトする
- 高洛峰オリジナル
- 2017-03-28 14:39:002500ブラウズ
次のようなニーズがあったことはありますか: すべての 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リクエストにおけるインターセプタのインターセプト例を詳しく解説