Intercepter l'analyse globale de l'instance de requête ajax via JS-js tutoriel-php.cn

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

高洛峰

Libérer： 2017-03-28 14:39:00

original

2505 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 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>

Copier après la connexion

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

Copier après la connexion

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)+"...")
})

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

Copier après la connexion

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

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

Copier après la connexion

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

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

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

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

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.