Intercept global ajax request instance parsing through JS-JS Tutorial-php.cn

Intercept global ajax request instance parsing through JS

高洛峰

Release： 2017-03-28 14:39:00

Original

2495 people have browsed it

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>

Copy after login

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

Copy after login

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

Copy after login

Result:

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

Copy after login

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

Copy after login

Intercept all ajax requests, request Unifiedly add timestamp

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

Copy after login

Modify the data returned by the request "responseText"

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

Copy after login

Result:

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

Copy after login

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

Copy after login

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

Copy after login

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