Intercept all ajax calls?
From http://api.jquery.com/ajaxSuccess/ :
Whenever an Ajax request completes successfully, jQuery triggers the ajaxSuccess event. Any and all handlers that have been registered with the .ajaxSuccess() method are executed at this time.
So the selector doesn't define the position where you are "catching" the event (because, honestly, ajax event by its nature doesn't start from a DOM element), but rather defines a scope to which the handling will be defaulted (i.e. this
will poitn to that/those element(s)).
In summary - it should be exactly what you wish for
How to intercept all AJAX requests made by different JS libraries
This type of function hooking is perfectly safe and is done regularly on other methods for other reasons.
And, the only performance impact is really only one extra function call for each .open()
plus whatever code you execute yourself which is probably immaterial when a networking call is involved.
In IE, this won't catch any code that tries to use the ActiveXObject
control method of doing Ajax. Well written code looks first for the XMLHttpRequest
object and uses that if available and that has been available since IE 7. But, there could be some code that uses the ActiveXObject
method if it's available which would be true through much later versions of IE.
In modern browsers, there are other ways to issue Ajax calls such as the fetch()
interface so if one is looking to hook all Ajax calls, you have to hook more than just XMLHttpRequest
.
How to intercept every AJAX request from a webpage
Huh... i made this work)))
with help of this topic Extending an ActiveXObject in javascript
i made script that intercept all ajax requests no matter what framework or browser do user use.
You can look at it here: Script
Intercept or catch Ajax Calls with Javascript
Try this snippet. It extends the send
function so that you can execute something before or after the real sending.
XMLHttpRequest.prototype.reallySend = XMLHttpRequest.prototype.send;
XMLHttpRequest.prototype.send = function(body) {
// Do something...
this.reallySend(body);
};
var req = new XMLHttpRequest();
req.open("GET", "any.html", true);
req.send(null);
Add a hook to all AJAX requests on a page
Inspired by aviv's answer, I did a little investigating and this is what I came up with.
I'm not sure that it's all that useful as per the comments in the script and of course will only work for browsers using a native XMLHttpRequest object.
I think it will work if javascript libraries are in use as they will use the native object if possible.
function addXMLRequestCallback(callback){
var oldSend, i;
if( XMLHttpRequest.callbacks ) {
// we've already overridden send() so just add the callback
XMLHttpRequest.callbacks.push( callback );
} else {
// create a callback queue
XMLHttpRequest.callbacks = [callback];
// store the native send()
oldSend = XMLHttpRequest.prototype.send;
// override the native send()
XMLHttpRequest.prototype.send = function(){
// process the callback queue
// the xhr instance is passed into each callback but seems pretty useless
// you can't tell what its destination is or call abort() without an error
// so only really good for logging that a request has happened
// I could be wrong, I hope so...
// EDIT: I suppose you could override the onreadystatechange handler though
for( i = 0; i < XMLHttpRequest.callbacks.length; i++ ) {
XMLHttpRequest.callbacks[i]( this );
}
// call the native send()
oldSend.apply(this, arguments);
}
}
}
// e.g.
addXMLRequestCallback( function( xhr ) {
console.log( xhr.responseText ); // (an empty string)
});
addXMLRequestCallback( function( xhr ) {
console.dir( xhr ); // have a look if there is anything useful here
});
How to intercept every Ajax Request with Angular JS
You can set the $interceptor on application config()
.config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push(['$location', '$q', function($location, $q) {
return {
'request': function(request) {
return request;
},
'responseError': function(response) {
if (response.status === 401) {
// do stuff
}
// otherwise, default behaviour
return $q.reject(response);
}
};
}]);
}])
Is it possible to listen all Ajax calls?
Try this:
$(document).ajaxStart(function () {
console.log('Request Initiated');
});
$(document).ajaxComplete(function () {
console.log('Request Complete');
});
Related Topics
Jquery Get Values of Checked Checkboxes into Array
How to Access Object Property with Invalid Characters
React - How to Force a Function Component to Render
Calling Method Using JavaScript Prototype
How Is a Promise/Defer Library Implemented
JSON Left Out Infinity and Nan; JSON Status in Ecmascript
Jslint Is Suddenly Reporting: Use the Function Form of "Use Strict"
Angularjs $Resource Restful Example
Property 'Value' Does Not Exist on Type Eventtarget in Typescript
Understanding React-Redux and Mapstatetoprops()
What Is the $$ (Double Dollar Sign) Used for in Angular
How to Access Xhr Responsebody (For Binary Data) from JavaScript in Ie
Fetching Values from Email in Protractor Test Case
Is There a Downside to Using Es6 Template Literals Syntax Without a Templated Expression
Understanding What Goes on with Textarea Selection with JavaScript
How to Detect with JavaScript/Jquery If the User Is Currently Active on the Page