Maison > interface Web > js tutoriel > le corps du texte

Js intercepte la requête ajax globale

小云云
Libérer: 2017-12-09 16:52:43
original
1738 Les gens l'ont consulté

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

  1. Introduisez ajaxhook.js

    <script src="wendu.ajaxhook.js"></script>
    Copier après la connexion
  2. 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])
        }
    })
    Copier après la connexion

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)+"...")
})
Copier après la connexion

Résultat :

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

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
Copier après la connexion

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()
Copier après la connexion

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;
    }
  } 
 })
Copier après la connexion

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

hookAjax({
  open:function(arg){
    arg[1]+="?timestamp="+Date.now();
  } 
 })
Copier après la connexion

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

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

Résultat :

hook!<!DOCTYPE html>
<html>
<h...
Copier après la connexion

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

    })
Copier après la connexion

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
Copier après la connexion

Note

  1. 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.

  2. 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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!