Monitor the completion status of all Ajax requests using only JavaScript

Question

Monitor the completion status of all Ajax requests using only JavaScript

I am aware of the ajaxStop method in jQuery.

$(document).ajaxStop(function() { //Do something });

If jQuery is not available, is there a way to achieve this with pure JavaScript instead?

If so, could you please provide an example?

Thanks

javascript ajax request

Answer 1

Answer №1

Alright, I'll tackle this (even though it seems like you're taking the lazy route by not even attempting):

Referencing the jQuery documentation:

After each Ajax request is completed, jQuery checks for any remaining outstanding requests. If none are left, jQuery triggers the ajaxStop event. Any functions registered using the .ajaxStop() method will then be executed.

So what do you need to do? You'll require a central API (or a module) that handles AJAX requests. Within this module, you must keep track of ongoing requests and remove them once they are finished.
If there are no pending requests, you can then check the ajaxStop queue for any registered callbacks and run them.

A basic structure in pseudo-code would resemble the following:

var myAjax = (function()
{//create closure scope to track ajax requests
    var activeRequests = [],
        stopQueue = [],
        ajaxModule = {},//the module itself
        createXhr = function(){};//function to create XHR requests
    ajaxModule.ajax = function(params, callback)
    {
        var xhr = createXhr(params),
            key = activeRequests.length;
        activeRequests.push(xhr);//add to active array
        xhr.onreadystatechange = function()
        {//assign internal handler
            if (this.readyState === 4 && this.status === 200)
            {
                //invoke passed callback only if request is done
                callback.call(this, []);//pass params as you please
                activeRequests.filter(function(e)
                {
                     return e !== this;
                }, this);//define this callback in closure, of course
                if (activeRequests.length === 0)
                {//no more active requests
                    stopQueue.map(function(callback)
                    {
                        callback();//invoke callbacks
                    });
                }
            }
        };
    };
    return ajaxModule;//expose module
}());

Naturally, you will still need to write the functions managing the stopQueue callbacks and develop a trustworthy AJAX module on your own. However, this represents a straightforward setup that could be useful.

Answer 2

Alright, I'll tackle this (even though it seems like you're taking the lazy route by not even attempting):

Referencing the jQuery documentation:

After each Ajax request is completed, jQuery checks for any remaining outstanding requests. If none are left, jQuery triggers the ajaxStop event. Any functions registered using the .ajaxStop() method will then be executed.

So what do you need to do? You'll require a central API (or a module) that handles AJAX requests. Within this module, you must keep track of ongoing requests and remove them once they are finished.
If there are no pending requests, you can then check the ajaxStop queue for any registered callbacks and run them.

A basic structure in pseudo-code would resemble the following:

var myAjax = (function()
{//create closure scope to track ajax requests
    var activeRequests = [],
        stopQueue = [],
        ajaxModule = {},//the module itself
        createXhr = function(){};//function to create XHR requests
    ajaxModule.ajax = function(params, callback)
    {
        var xhr = createXhr(params),
            key = activeRequests.length;
        activeRequests.push(xhr);//add to active array
        xhr.onreadystatechange = function()
        {//assign internal handler
            if (this.readyState === 4 && this.status === 200)
            {
                //invoke passed callback only if request is done
                callback.call(this, []);//pass params as you please
                activeRequests.filter(function(e)
                {
                     return e !== this;
                }, this);//define this callback in closure, of course
                if (activeRequests.length === 0)
                {//no more active requests
                    stopQueue.map(function(callback)
                    {
                        callback();//invoke callbacks
                    });
                }
            }
        };
    };
    return ajaxModule;//expose module
}());

Naturally, you will still need to write the functions managing the stopQueue callbacks and develop a trustworthy AJAX module on your own. However, this represents a straightforward setup that could be useful.

Answer 3

Answer №2

Using the abort(); method in JavaScript can be helpful when you need to cancel a request. For more information, you can visit this link:

var httpRequest = null;
function sendRequest() {
    if (!httpRequest) {
        httpRequest = createHTTPRequestObject();
    }
    if (httpRequest) {          

        var url = "file.php";

        httpRequest.open("GET", url, true);  
        httpRequest.onreadystatechange = onStateChange;
        httpRequest.send(null);
    }
}

function abortRequest(){
  if(httpRequest)
      httpRequest.abort();
}

Answer 4

Using the abort(); method in JavaScript can be helpful when you need to cancel a request. For more information, you can visit this link:

var httpRequest = null;
function sendRequest() {
    if (!httpRequest) {
        httpRequest = createHTTPRequestObject();
    }
    if (httpRequest) {          

        var url = "file.php";

        httpRequest.open("GET", url, true);  
        httpRequest.onreadystatechange = onStateChange;
        httpRequest.send(null);
    }
}

function abortRequest(){
  if(httpRequest)
      httpRequest.abort();
}

Monitor the completion status of all Ajax requests using only JavaScript

Answer №1

Answer №2

Similar questions

A guide on changing a plus sign into a minus sign with CSS transition

What causes the entire page to refresh when using ValidatorCallOut in the Ajax Control Toolkit?

The app.get() method in Node JS and Express requires three parameters, and I am seeking clarification on how these parameters work

Should you include the dollar sign in a Vue HTML variable or not?

Weekly downloads for NPM show no activity

Issue when attempting to update user profile picture using Mongoose schema and Cloudinary

Real-time validation using Ajax and Rails 3

The Google Maps API has been successfully initialized, however, it is experiencing difficulties being displayed on the webpage

A tool that enhances the visibility and readability of web languages such as HTML, PHP, and CSS

Attempting to activate template rendering with Meteor session

What is the best practice for using templates in a constructor versus connectedCallback?

angular 2 checkbox for selecting multiple items at once

Encountering problems during the installation of Ionic - Error code 'EPROTO'

Display complete information of the selected list in a modal window by clicking on it in PHP Yii

Modifying the height of the bar in Google Charts Timeline using react-google-charts

Managing data binding for checkboxes within a constantly changing set of options

Understanding Pass by Reference within Objects through Extend in Javascript with underscore.js Library

What is the best location to manage errors within a sequelize ORM query?

Tips for handling imports and dependencies in a React component that is shared through npm

Running a server-side function on the client-side in Node.js