Heim > Artikel > Web-Frontend > Abfangen der Analyse globaler Ajax-Anfrageinstanzen über JS
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