Which design pattern would be best suited for monitoring the completion of multiple ajax requests?

Question

Which design pattern would be best suited for monitoring the completion of multiple ajax requests?

In my code, I have combined 3 separate ajax calls in one function along with checkAjaxCompletion method to monitor each ajax completion flag.

The current approach involves sending multiple independent ajax calls and using an interval method to continuously check the completion flags. However, I am considering exploring alternative methods instead of relying on intervals.

This is how the code looks like:

function manyAjax() {

   setInterval( function() { checkAjaxCompletion(); } , 200);

   ajax1(); 

   ajax2();

   ajax3();

}

function ajax1() {
   //send ajax request to server and update flag based on success or error
}

function ajax2() {
   //send ajax request to server and update flag based on success or error
}

function ajax3() {
   //send ajax request to server and update flag based on success or error
}

function checkAjaxCompletion() {

   if(ajax1_flag == 1 && ajax2_flag == 1 && ajax3_flag == 1) {
       //all ajax requests completed successfully
   }
   else if(ajax1_flag == 2 || ajax2_flag == 2 || ajax3_flag == 2) {
       //some ajax requests failed
   }
   else {
      //not all ajax requests are completed yet
   }
}

I am concerned about the inefficiency of using the interval function repeatedly and believe there might be a more optimal solution. I am contemplating the use of the observer pattern, but I am open to suggestions and insights from others.

javascript ajax design-patterns callback

Answer 1

Answer №1

Perhaps you could consider implementing an observer-notifier pattern in your AJAX calls. Each call can have a callback function in JavaScript that gets executed upon completion. Instead of waiting for all calls to finish, try calling checkAjaxCompletion() at the end of each call and handle any necessary actions based on the result.

Answer 2

Perhaps you could consider implementing an observer-notifier pattern in your AJAX calls. Each call can have a callback function in JavaScript that gets executed upon completion. Instead of waiting for all calls to finish, try calling checkAjaxCompletion() at the end of each call and handle any necessary actions based on the result.

Answer 3

Answer №2

Dustin Diaz demonstrates an excellent example in his article on the JavaScript observer class.

function Observer() {
  this.fns = [];
}

Observer.prototype = {
  subscribe : function(fn) {
    this.fns.push(fn);
  },

  unsubscribe : function(fn) {
    this.fns = this.fns.filter(
      function(el) {
        if ( el !== fn ) {
          return el;
        }
      }
    );
  },

  fire : function(o, thisObj) {
    var scope = thisObj || window;
    this.fns.forEach(
      function(el) {
        el.call(scope, o);
      }
    );
  }
};

The publisher:

var o = new Observer;
o.fire('here is my data');

The subscriber:

var fn = function() {
  // my callback stuff
};

o.subscribe(fn);

To unsubscribe:

var fn = function() {
  // my callback stuff
};

o.subscribe(fn);

Answer 4

Dustin Diaz demonstrates an excellent example in his article on the JavaScript observer class.

function Observer() {
  this.fns = [];
}

Observer.prototype = {
  subscribe : function(fn) {
    this.fns.push(fn);
  },

  unsubscribe : function(fn) {
    this.fns = this.fns.filter(
      function(el) {
        if ( el !== fn ) {
          return el;
        }
      }
    );
  },

  fire : function(o, thisObj) {
    var scope = thisObj || window;
    this.fns.forEach(
      function(el) {
        el.call(scope, o);
      }
    );
  }
};

The publisher:

var o = new Observer;
o.fire('here is my data');

The subscriber:

var fn = function() {
  // my callback stuff
};

o.subscribe(fn);

To unsubscribe:

var fn = function() {
  // my callback stuff
};

o.subscribe(fn);

Answer 5

Answer №3

// function for ajax callback
            this.ajaxCallback = function(){                          
                $.ajax({            
                        type: "POST",
                        url: ajax.url,
                        data: {key: value},
                        async   : !isAll,// false for synchronous AJAX request, true for asynchronous AJAX request
                        dataType: "json",
                        success: function(data){
                            if(data.status == 'successful'){                                
                                selfVal.parent().find('.msg').addClass('ok').html(msg.ok);
                            }else if(data.status == 'failed'){
                                checkRet = false;
                                selfVal.parent().find('.msg').removeClass('ok').html(msg.error);
                            }else{
                                checkRet = false;
                            }
                            return this;
                     }
                });                 
            }               
            return this;

If you need to validate the input value and handle the callback using Ajax in your form, you can refer to my website Demo. It might be helpful.

Answer 6

// function for ajax callback
            this.ajaxCallback = function(){                          
                $.ajax({            
                        type: "POST",
                        url: ajax.url,
                        data: {key: value},
                        async   : !isAll,// false for synchronous AJAX request, true for asynchronous AJAX request
                        dataType: "json",
                        success: function(data){
                            if(data.status == 'successful'){                                
                                selfVal.parent().find('.msg').addClass('ok').html(msg.ok);
                            }else if(data.status == 'failed'){
                                checkRet = false;
                                selfVal.parent().find('.msg').removeClass('ok').html(msg.error);
                            }else{
                                checkRet = false;
                            }
                            return this;
                     }
                });                 
            }               
            return this;

If you need to validate the input value and handle the callback using Ajax in your form, you can refer to my website Demo. It might be helpful.

Answer 7

Answer №4

I had an innovative idea to create a custom object capable of managing an array of requests, maintaining a log of each request, and performing what I like to call 'postProcessing' on every response. Below is a somewhat rudimentary code snippet intended to illustrate my concept.

var CustomAjax = function() {
    var request, callback, lst;

    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }

    request.onreadystatechange = handleResponse;

    this.history = [{}];

    this.send = function(args) {
        for (var i = 0; i < args.length; i++) {
            if (args.url) {
                request.open(args.type || 'GET', args.url);
            }
            request.send(args.data || null);
            callback = args.callback;
            lst++;
        }
    }

    function handleResponse() {
        var response = {
            url: '',
            success: true,
            data: 'blah'
        };
        history.push(response);
        if (postProcess()) {
            callback();
        }

    }

    function postProcess() {
        if (this.history[lst].success) {
            return true;
        } else {
            return false;
        }
    }
}

Answer 8

I had an innovative idea to create a custom object capable of managing an array of requests, maintaining a log of each request, and performing what I like to call 'postProcessing' on every response. Below is a somewhat rudimentary code snippet intended to illustrate my concept.

var CustomAjax = function() {
    var request, callback, lst;

    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
    } else if (window.ActiveXObject) {
        request = new ActiveXObject("Microsoft.XMLHTTP");
    }

    request.onreadystatechange = handleResponse;

    this.history = [{}];

    this.send = function(args) {
        for (var i = 0; i < args.length; i++) {
            if (args.url) {
                request.open(args.type || 'GET', args.url);
            }
            request.send(args.data || null);
            callback = args.callback;
            lst++;
        }
    }

    function handleResponse() {
        var response = {
            url: '',
            success: true,
            data: 'blah'
        };
        history.push(response);
        if (postProcess()) {
            callback();
        }

    }

    function postProcess() {
        if (this.history[lst].success) {
            return true;
        } else {
            return false;
        }
    }
}

Which design pattern would be best suited for monitoring the completion of multiple ajax requests?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Module 'js' not found

Attempting to configure a discord bot. Can anyone help me identify the issue?

Unleashing the Power of Dynamic JSON Data Access

Ensure all fields are valid prior to performing an update

The response is dispatched without delay and does not necessitate awaiting

Replacing an array element by a specific index number in a React application

What is the best way to handle requests once a SpookyJS script has finished running?

The text-center alignment in Bootstrap doesn't seem to be applying to buttons

Ways to delete a particular query parameter from a URL in Next.js

What is the best way to mimic an AJAX request using the Flask test client?

What is the best way to eliminate the input range in a React date range picker?

Is it possible to improve the cleanliness of a dynamic button in Jquery?

Controller encounters a error when requiring a module

Retrieving Database Data using Ajax Cascading DropDownMenus

Having trouble with your HTML5 canvas?

Leverage the exported data from Highcharts Editor to create a fresh React chart

Tips for detecting a false return value from a jQuery AJAX script

Dynamically update the contents of a ModalPopup using AJAX when controls within the panel are changed

Troubleshooting the Hover Effect of Buttons in Next.js when Using Tailwind CSS for Dynamic Color Changes

Using an array as a reference can lead to failure when dealing with asynchronous calls