Maison >interface Web >js tutoriel >Intercepter l'analyse globale de l'instance de requête ajax via JS

Intercepter l'analyse globale de l'instance de requête ajax via JS

高洛峰original: 2017-03-28 14:39:002529parcourir

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 de requêtes http pour obtenir ou publier, besoin de analyser les protocoles réseau d'autres personnes, etc. Alors, comment ? Pensez-y, si vous parvenez à intercepter toutes les requêtes ajax, alors le problème deviendra très simple !

Adresse du code source Ajax-hook : https://github.com/wendux/Ajax-hook

Comment utiliser

1. Introduisez ajaxhook.js

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

2. Interceptez les rappels ou fonctions 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 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 Succès! Nous pouvons également voir que jQuery3.1 a abandonné onreadystatechange et utilisé onload à la place.

API

hookAjax(ob)

1.ob, le type est un objet, la clé veut une interception rappel ou fonction, la valeur est notre fonction d'interception.

2. 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()

1. Interception de charge 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;
}
} 
})

Tout intercepter requêtes ajax , demande d'ajout uniforme d'un timestamp

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

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

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

Résultat :

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

Avec ces exemples, je crois que cela va démarrer. Les exigences mentionnées sont facilement réalisables. 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

Remarque

1 La valeur de retour de la fonction d'interception est. un booléen, si vrai, la requête ajax sera bloquée. La valeur par défaut est false et 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 sous la forme. d'un tableau. Vous Ceci peut être modifié dans la fonction d'interception.

Ce qui précède est l'exemple d'analyse de demande ajax globale d'interception JS présentée par l'éditeur. J'espère qu'il vous sera utile. Si vous avez des questions, veuillez me laisser un message et l'éditeur vous répondra. à vous à temps.

Articles Liés

Voir plus