Is there an easy way to detect if an XMLHttpRequest is active in the browser window? Or how many are active? ie. Is there a way to detect if there are any AJAX calls active in my browser window?
Extension of question: Using javascript is there a way I can see if any XMLHttpRequests are open? Such as "window.XMLisActive()" or something like that?
Solution: Ended up writing a wrapper for XMLHttpRequest: gist here
There is not a way to detect an open connection from JS unless you write a wrapper for XmlHttpRequest (or monkey patch it) that keeps track of opened connections.
Here's kidcapital's monkey patch, not sure if it's perfect, but it's a good start
(function() {
var oldOpen = XMLHttpRequest.prototype.open;
window.openHTTPs = 0;
XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {
window.openHTTPs++;
this.addEventListener("readystatechange", function() {
if(this.readyState == 4) {
window.openHTTPs--;
}
}, false);
oldOpen.call(this, method, url, async, user, pass);
}
})();
Note
This does not handle fetch or websockets but you could do something similar in those cases.
abort() being called
setInterval call that logs the variable each second, it worked without any problems. So it should not mess up any application. If it does, a developer who is familiar with js debugging should double-check it... :) We will be testing this approach for test-automation for being able to know if no ajax-request is open at the moment, or for notifiying if all requests have been finished...You can use FireBug for that.
I tried @juan-mendes's solution and got an error: ERROR Error Code: undefined Message: Failed to set the 'responseType' property on 'XMLHttpRequest': The response type cannot be changed for synchronous requests made from a document.
in my Angular application. The cause is the async parameter which is supposed to be true by default, but when the argument is missing, this patch passes undefined which translates to false. The code with this small change works for me:
(function() {
var oldOpen = XMLHttpRequest.prototype.open;
window.openHTTPs = 0;
XMLHttpRequest.prototype.open = function(method, url, async = true, user = null, pass = null) {
window.openHTTPs++;
this.addEventListener("readystatechange", function() {
if(this.readyState == 4) window.openHTTPs--;
}, false);
oldOpen.call(this, method, url, async, user, pass);
}
})()
By using jQuery, you can keep track if there are open requests with the global event handlers: .ajaxStart() and .ajaxComplete()
A global variable set on ajaxStart and reset on ajaxComplete should do the job.
XmlHttpRequest, it's easy to do (if your wrapper supports it). If you don't have jQuery, you can either start using it, or write your own wrapper.