How to check if HTTP requests are open in browser?

Question

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

What do you mean by active? Can you expand the question a little more, like how are you trying to accomplish this, what have you tried etc.? — TheBoyan, Feb 13 '12 at 20:23

Ruan Mendes · Accepted Answer · 2021-12-08T13:39:20.633

36

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.

edited Dec 08 '21 at 13:39

answered Feb 13 '12 at 20:27

Ruan Mendes

90,375
31
153
217

3

ended up writing a gist for it which can be found here https://gist.github.com/1820380 – kidcapital Feb 13 '12 at 20:53
1

@kidcapital: I posted something very similar here, but didn't take the time to finish it, so I removed it. Did you look at it for the 30 seconds that it was posted? It looks almost exactly like what I had ;) In any case, be sure to test for network errors, and `abort()` being called – Ruan Mendes Feb 13 '12 at 21:02
haha i didn't see it. the network errors will still trigger the responseCode 4 though? will double check on abort() – kidcapital Feb 13 '12 at 21:23
after injecting this script into the browser for selenium tests my application stopped working. does this block my application calls. – Karthi Jul 28 '17 at 17:29
Tried injecting this code with a `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... – Martin May 20 '19 at 14:41
@Martin Note that this is a really old question, and you probably also need to handle `fetch()` – Ruan Mendes May 20 '19 at 15:05
@JuanMendes, that is correct, however our App uses a Vaadin Version that relies 100% on XHR Requests, so for the use case it is ok... – Martin May 20 '19 at 19:08

score 3 · Answer 2 · answered Feb 13 '12 at 20:23

3

You can use FireBug for that.

enter image description here

answered Feb 13 '12 at 20:23

Sarfraz

377,238
77
533
578

Or any of the other browser development environments. http://stackoverflow.com/questions/4445759/is-there-a-single-html5-javascript-and-css-debugger/4445828#4445828 – Ruan Mendes Feb 13 '12 at 20:25

score 2 · Answer 3 · answered Aug 17 '20 at 13:11

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

score 1 · Answer 4 · answered Feb 13 '12 at 20:35

1

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.

answered Feb 13 '12 at 20:35

vdeantoni

1,948
14
19

This assumes you are using jquery .ajax though. What if you have no jQuery ibrary? – kidcapital Feb 13 '12 at 20:36
2

This is what my answer mentioned, if you have a wrapper for `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. – Ruan Mendes Feb 13 '12 at 20:38
The correct pairing is ajaxSend and ajaxComplete (check the docs) – Rushabh Mehta Jul 27 '17 at 11:46

How to check if HTTP requests are open in browser?

4 Answers4

Linked