Home >Web Front-end >JS Tutorial >Intercept global ajax request instance parsing through JS

Intercept global ajax request instance parsing through JS

高洛峰Original: 2017-03-28 14:39:002531browse

Have you ever had the following needs: need to add a unified signature to all ajax requests, need to count the number of times a certain interface is requested, need to limit the method of http requests to get or post, need to analyze other people's network protocols, etc. So how? Think about it, if you can intercept all ajax requests, then the problem will become very simple!

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

How to use

1. Introduce ajaxhook.js

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

2. Intercept the required ajax callbacks or functions.

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, let’s use the get method of jQuery (v3.1) to test:

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

Result:

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

The interception was successful! We can also see that jQuery3.1 has abandoned onreadystatechange and used onload instead.

API

##hookAjax(ob)

1.ob, type is object, key is want Interception callback or function, value is our interception function.

2. Return value: original XMLHttpRequest. If you have a write request and don't want to be intercepted, you can use new this.

unHookAjax()

1. Load interception; after uninstalling, the interception will be invalid.

Change ajax behavior

Intercept all ajax requests, detect the request method, if it is "GET", interrupt the request and give a prompt

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

Intercept all ajax requests, request Unifiedly add timestamp

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

Modify the data returned by the request "responseText"

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

Result:

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

With these examples, I believe that the requirements mentioned at the beginning can be easily realized . Finally, test 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))
})
})

Output:

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

1. The return value of the interception function is a boolean, if it is true, then Will block ajax requests, the default is false, the request will not be blocked.

2. The parameters of all callback interception functions are the current XMLHttpRequest instance, such as onreadystatechange, onload; all interception functions of the ajax original method will pass the original parameters to the interception function in the form of an array. You This can be modified in the interception function.

The above is the JS interception global ajax request example analysis introduced by the editor. I hope it will be helpful to everyone. If you have any questions, please leave me a message and the editor will reply to you in time. of.

Detailed explanation of interception examples of interceptors for ajax requests

Using Mock.js in Node.js server environment Tutorial on intercepting AJAX requests

How to check whether it is an ajax request through php

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Detailed explanation of interception examples of interceptors on ajax requestsNext article：Detailed explanation of interception examples of interceptors on ajax requests

See more

Intercept global ajax request instance parsing through JS

Related articles