How to check if any AJAX request is running on page via JQuery?

Question

Is there any way to find any AJAX request is running on page (on $(window).load event) ?

I want to apply some event when all ajax request completed.

I have tried

.ajaxStop(function(){ })

but I want to put this block(ajaxstop) when AJAX request exist on page.

Any help would be appreciated.

You can use `.ajaxStart()` to call a function when the first AJAX request starts. This can add the `.ajaxStop()` handler. — Barmar, Sep 05 '19 at 14:56
@Barmar: I need to apply ajaxstart only when if any ajax request are there, if there is no ajax request on page I don't want to execute this code. — Sunil Kumar, Sep 05 '19 at 15:05
I thought you needed to apply `ajaxStop` when there are ajax requests out there. `ajaxStart` will tell you when an AJAX request is started, so then you'll know that there are AJAX request. — Barmar, Sep 05 '19 at 15:08
@Barmar: yes but I don't want to apply `ajaxStart` if the page doesn't any ajax request. — Sunil Kumar, Sep 05 '19 at 15:11
Maybe **jQuery deferred _when_** would be useful [https://api.jquery.com/jQuery.when/](https://api.jquery.com/jQuery.when/) — Marcus Vilete, Sep 05 '19 at 15:17

score 1 · Answer 1 · answered Sep 05 '19 at 15:11

Put this at the beginning:

var ajax_running = false;
$(document).ajaxStart(function() {
  ajax_running = true;
});

Then you can later use:

$(document).ready(function() {
  if (ajax_running) {
    $(document).ajaxStop(function() {
      // do something
    })
    ajax_running = false;
  }
});

score 1 · Answer 2 · answered Sep 05 '19 at 15:14

1

You can do something like this, which creates a function that will tell you how many active requests are pending.

const activeAjaxRequests = (function(send) {
    var active_requests = 0;
    XMLHttpRequest.prototype.send = function(body) {
        active_requests++;
        this.addEventListener("readystatechange", function() {
            if(this.readyState === 4) active_requests--;
        });
        send.call(this, body);
    };
    return ()=>active_requests;
})(XMLHttpRequest.prototype.send);

var active_requests = activeAjaxRequests();

console.log(`There are currently ${active_requests} active ajax requests.`);

answered Sep 05 '19 at 15:14

I wrestled a bear once.

22,983
19
69
116

it is always returning 0 request – Sunil Kumar Sep 06 '19 at 07:13
@SunilKumar - that's because there are always zero requests when you run it...... try running it on your own page during an ajax request.. – I wrestled a bear once. Sep 06 '19 at 13:14

Ricardo Rocha · Answer 3 · 2019-09-05T15:13:32.843

0

Make sure this functions is the first thing loaded to the browser:

(function(open) {

    XMLHttpRequest.prototype.open = function(method, url, async, user, pass) {

        this.addEventListener("readystatechange", function() {
            //Put your code here
        }, false);

        open.call(this, method, url, async, user, pass);
    };

})(XMLHttpRequest.prototype.open);

Each time an ajax response is retrieve, the following listner functions is called, and is in there that you should put your code:

this.addEventListener("readystatechange", function() {
    //Put your code
}, false);

Note: This code was extracted from this answer which was used to intercept all ajax requests and from this answer you don't need to pass the parameters on functions:

(function(open) {
    XMLHttpRequest.prototype.open = function() {
        this.addEventListener("readystatechange", function() {
            // put your code here!
        }, false);
        open.apply(this, arguments);
    };
})(XMLHttpRequest.prototype.open);

edited Sep 05 '19 at 15:13

answered Sep 05 '19 at 15:01

Ricardo Rocha

14,612
20
74
130

How I will check the Ajax request are running on page from your code, I mean what your code will return ? – Sunil Kumar Sep 05 '19 at 15:03
Do I really need to pass the parameters i.e. method, url , async etc ? – Sunil Kumar Sep 05 '19 at 15:07
1

@SunilKumar I'm not understanding well your questions. My code will not return nothing. You just need to ensure that this code is loaded before any of your code that makes an ajax request. Then, for each response of an ajax request, the listener "readystatechange" will be called and in the listener function you can put wherever you want to do. – Ricardo Rocha Sep 05 '19 at 15:11
@SunilKumar I made some changes to my code so you can review it! I hopped as answer well your doubts – Ricardo Rocha Sep 05 '19 at 15:18
if there is no ajax request on page then which code block will execute ? – Sunil Kumar Sep 05 '19 at 15:20
@SunilKumar None, this code will only be called if there is performed, ate least, one ajax request – Ricardo Rocha Sep 05 '19 at 15:24

How to check if any AJAX request is running on page via JQuery?

3 Answers3