Heim >Web-Frontend >js-Tutorial >Abfangen der Analyse globaler Ajax-Anfrageinstanzen über JS

Abfangen der Analyse globaler Ajax-Anfrageinstanzen über JS

高洛峰Original: 2017-03-28 14:39:002534Durchsuche

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>

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

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)+"...")
})

Ergebnis:

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

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

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

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

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

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

Ergebnis:

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

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

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

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

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung von Abfangbeispielen für Abfangjäger bei Ajax-AnfragenNächster Artikel：Ausführliche Erläuterung von Abfangbeispielen für Abfangjäger bei Ajax-Anfragen

In Verbindung stehende Artikel

Mehr sehen