Js intercepte la requête ajax globale-js tutoriel-php.cn

Js intercepte la requête ajax globale

小云云

Libérer： 2017-12-09 16:52:43

original

1763 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

Introduisez ajaxhook.js
```
<script src="wendu.ajaxhook.js"></script>
```
Copier après la connexion

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

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!