Maison >interface Web >js tutoriel >Js intercepte la requête ajax globale

Js intercepte la requête ajax globale

小云云original: 2017-12-09 16:52:431766parcourir

Avez-vous déjà eu les besoins suivants : besoin d'ajouter une signature unifiée à toutes les requêtes ajax, besoin de compter le nombre de fois qu'une certaine interface est demandée, besoin de limiter la méthode des requêtes http pour obtenir ou publier , besoin d'analyser les protocoles réseau d'autres personnes Attendez, et comment ? Pensez-y, si vous parvenez à intercepter toutes les requêtes ajax, alors le problème deviendra très simple !

Comment utiliser

1. Présentez directement le script

Introduisez ajaxhook.js

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

Interceptez le rappel ou la fonction ajax requis.

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, on utilise la méthode get de jQuery (v3.1) pour le tester :

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

Résultat :

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

Interception réussie ! Nous pouvons également voir que jQuery3.1 a abandonné onreadystatechange et utilisé onload à la place.

2. Dans l'environnement de l'outil de création de modules sous CommonJs

En supposant qu'il soit sous webpack, la première étape consiste à installer le plug-in ajax-hook npm

npm install ajax-hook --save-dev

La deuxième étape consiste à présenter le module et à appeler l'API :

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

API

hookAjax(ob)

ob, le type est un objet, et la clé est ce que vous voulez intercepter. Rappel ou fonction, la valeur est notre fonction d'interception.
Valeur de retour : XMLHttpRequest originale. Si vous avez une demande d'écriture et que vous ne souhaitez pas être intercepté, vous pouvez utiliser new this.

unHookAjax()

Désinstallez l'interception ; après la désinstallation, l'interception sera invalide.

Modifier le comportement d'Ajax

Intercepter toutes les requêtes ajax, détecter la méthode de requête, si c'est "GET", interrompre la requête et donner une invite

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

Intercepter toutes les requêtes ajax et ajouter des horodatages aux requêtes

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

Modifier les données "responseText" renvoyées par la requête

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

Résultat :

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

Oui Avec ces exemples, je pense que les exigences mentionnées au début peuvent être facilement réalisées. Enfin, testez 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))
        })

    })

Sortie :

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

Note

La valeur de retour de la fonction d'interception est un booléen, si elle est vrai, cela bloquera les requêtes ajax, la valeur par défaut est false, la requête ne sera pas bloquée.
Les paramètres de toutes les fonctions d'interception de rappel sont l'instance XMLHttpRequest actuelle, telle que onreadystatechange, onload ; toutes les fonctions d'interception de la méthode d'origine ajax transmettront les paramètres d'origine à la fonction d'interception dans le forme d'un tableau, vous pouvez modifier cela dans la fonction intercepteur.

Recommandations associées :

Solution à l'interception de window.open() lors de l'ouverture d'une nouvelle fenêtre après la réussite de la requête ajax

Rappel Ajax pour ouvrir un nouveau formulaire pour empêcher le navigateur d'intercepter une méthode efficace

À propos de l'implémentation de la méthode submit utilisant JavaScript pour intercepter le formulaire

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Lire les données depuis JSON et les ajouter au HTMLArticle suivant：Lire les données depuis JSON et les ajouter au HTML

Articles Liés

Voir plus