suchen

Heim  >  Artikel  >  Web-Frontend  >  Js fängt globale Ajax-Anfragen ab

Js fängt globale Ajax-Anfragen ab

小云云
小云云Original
2017-12-09 16:52:431759Durchsuche

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 die Netzwerkprotokolle anderer Leute analysieren. Warten Sie, also wie? Denken Sie darüber nach: Wenn Sie alle Ajax-Anfragen abfangen können, wird das Problem sehr einfach!


Verwendung

1. Stellen Sie das Skript direkt vor

  1. Ajaxhook.js vorstellen

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

  2. Den erforderlichen Ajax-Rückruf oder die erforderliche Funktion abfangen. 

    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) zum 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 erfolgreich! Wir können auch sehen, dass jQuery3.1 onreadystatechange aufgegeben und stattdessen onload verwendet hat.

2. In der Modul-Building-Tool-Umgebung unter CommonJs

Vorausgesetzt, es befindet sich unter Webpack, besteht der erste Schritt darin, das Ajax-Hook-NPM-Plug-In zu installieren 

npm install ajax-hook --save-dev

Der zweite Schritt besteht darin, das Modul vorzustellen und die API aufzurufen: 

const ah=require("ajax-hook")
ah.hookAjax({ 
  onreadystatechange:function(xhr){ ... },
  onload:function(xhr){ ... }, 
  ...
})
...
ah.unHookAjax()

API

hookAjax(ob)

  • ob, der Typ ist ein Objekt und der Schlüssel ist der Rückruf oder die Funktion, die Sie abfangen möchten. Der Wert ist unsere Abfangfunktion.

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

unHookAjax()

  • Deinstallieren Sie das Abfangen. 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 Ajax-Anfragen abfangen und Zeitstempel zu den Anfragen hinzufügen

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

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

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

Ergebnis:

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

Ja, mit diesen Beispielen glaube ich, dass sich die eingangs genannten Anforderungen leicht umsetzen lassen. 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, falls vorhanden wahr ist, werden Ajax-Anfragen blockiert, der Standardwert ist falsch, die Anfrage wird nicht blockiert.

  2. Die Parameter aller Rückruf-Abfangfunktionen sind die aktuelle XMLHttpRequest-Instanz, z. B. onreadystatechange, onload; alle Abfangfunktionen der Ajax-Originalmethode übergeben die ursprünglichen Parameter an die Abfangfunktion in Form eines Arrays. Sie können dies in der Interceptor-Funktion ändern.

Verwandte Empfehlungen:

Lösung für das Abfangen von window.open() beim Öffnen eines neuen Fensters nach erfolgreicher Ajax-Anfrage

Ajax-Rückruf zum Öffnen eines neuen Formulars, um das Abfangen des Browsers zu verhindern, ist eine wirksame Methode

Über die Implementierung der Submit-Methode mithilfe von JavaScript zum Abfangen von Formularen

Das obige ist der detaillierte Inhalt vonJs fängt globale Ajax-Anfragen ab. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

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：Daten aus JSON lesen und an HTML anhängenNächster Artikel：Daten aus JSON lesen und an HTML anhängen

In Verbindung stehende Artikel

Mehr sehen