Abfangen der Analyse globaler Ajax-Anfrageinstanzen über JS-js-Tutorial-php.cn

Abfangen der Analyse globaler Ajax-Anfrageinstanzen über JS

高洛峰

Freigeben： 2017-03-28 14:39:00

Original

2575 Leute haben es durchsucht

Hatten Sie jemals die folgenden Anforderungen: Sie müssen allen Ajax-Anfragen eine einheitliche Signatur hinzufügen, müssen zählen, wie oft eine bestimmte Schnittstelle angefordert wird, müssen die Methode zum Abrufen oder Posten von http-Anfragen einschränken, müssen Analysieren Sie die Netzwerkprotokolle anderer Leute usw. Wie? Denken Sie darüber nach: Wenn Sie alle Ajax-Anfragen abfangen können, wird das Problem sehr einfach!

Adresse des Ajax-Hook-Quellcodes: https://github.com/wendux/Ajax-hook

Verwendung

1. Führen Sie ajaxhook.js ein

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

Nach dem Login kopieren

2. Fangen Sie die erforderlichen Ajax-Rückrufe oder -Funktionen ab.

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

Nach dem Login kopieren

OK, wir verwenden die get-Methode von jQuery (v3.1), um zu testen:

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

Nach dem Login kopieren

Ergebnis:

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

Nach dem Login kopieren

Abfangen Erfolg! Wir können auch sehen, dass jQuery3.1 onreadystatechange aufgegeben und stattdessen onload verwendet hat.

API

hookAjax(ob)

1.ob, Typ ist Objekt, Schlüssel ist Want Interception Rückruf oder Funktion, Wert ist unsere Abfangfunktion.

2. Rückgabewert: Original XMLHttpRequest. Wenn Sie eine Schreibanforderung haben und nicht abgefangen werden möchten, können Sie new this verwenden.

unHookAjax()

1. Nach der Deinstallation ist das Abfangen ungültig.

Ajax-Verhalten ändern

Alle Ajax-Anfragen abfangen, die Anfragemethode erkennen, wenn sie „GET“ ist, die Anfrage unterbrechen und eine Eingabeaufforderung geben

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

Nach dem Login kopieren

Alle abfangen Ajax-Anfragen, Anfrage zum einheitlichen Hinzufügen eines Zeitstempels

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

Nach dem Login kopieren

Ändern Sie die von der Anfrage „responseText“ zurückgegebenen Daten

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

Nach dem Login kopieren

Ergebnis:

hook!<!DOCTYPE html>
<html>
<h...

Nach dem Login kopieren

Mit diesen Beispiele, ich glaube, es wird losgehen. Die genannten Anforderungen sind leicht erreichbar. Testen Sie abschließend 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))
})
})

Nach dem Login kopieren

Ausgabe:

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

Nach dem Login kopieren

Hinweis

1. Der Rückgabewert der Abfangfunktion ist ein boolescher Wert. Wenn true, wird die Ajax-Anfrage blockiert. Der Standardwert ist false und die Anfrage wird nicht blockiert.

2. Die Parameter aller Callback-Abfangfunktionen sind die aktuelle XMLHttpRequest-Instanz, z. B. onreadystatechange, onload; alle Abfangfunktionen der Ajax-Originalmethode übergeben die ursprünglichen Parameter an die Abfangfunktion im Formular eines Arrays. Dies kann in der Abfangfunktion geändert werden.

Das Obige ist die vom Herausgeber vorgestellte Beispielanalyse für die globale Ajax-Anfrage. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht pünktlich zu Ihnen.

Verwandte Artikel:

Detaillierte Erläuterung der Abfanginstanzen von Ajax-Anfragen durch Abfangjäger

Verwendung von Mock.js in der Node.js-Serverumgebung Tutorial zum Abfangen von AJAX-Anfragen

So prüfen Sie, ob es sich um eine Ajax-Anfrage über PHP handelt