How to create a centralized callback for multiple ajax requests?

Question

I would like to be able to send multiple ajax requests and merge all the responses in a single callback, how can i do that without mess with callbacks inside each request?

Instead of a system like this -> send ajax1 on ajax1 success -> send ajax2 on ajax2 success process both answer and render a view

I would like to be able to request ajax1 and ajax2

call ajax1
call ajax2

> when both are finished

process answer from both requests in a single function

callback (response_ajax1, response_ajax2 ) {
    // process information
}

This has been answered many, many times before, so why you're posting a duplicate and answering it yourself is beyond me. +1 for effort at least. — adeneo
– adeneo, Commented Nov 27, 2013 at 16:12

Lothre1 · Accepted Answer · 2013-11-27 16:09:09Z

1

According to jquery, since it's version 1.5 we can use Deferred objects for this.

What's a deferred object?:

[...] deferreds can be thought of as a way to represent asynchronous (not realtime) operations which can take a long time to complete (ajax requests are one of thoose examples).

-

Deferred objects are the asynchronous alternative to blocking functions and the general idea is that rather than your application blocking while it awaits some request to complete before returning a result.

-

[...] a deferred object can instead be returned immediately.

As summary:

Deferred objects provides a way to register multiple callbacks into self-managed callback queues, invoke callback queues as appropriate, and relay the success or failure state of any synchronous or asynchronous function..

To answer the question: http://jsfiddle.net/mreis1/DCmrN/

function _ajax(id){ 
    return $.ajax({
        url: '/echo/json/',
        type: 'GET',
        dataType: 'json',
        data: {param1: id},
        complete: function(xhr, textStatus) {
          //called when complete
        },
        success: function(data, textStatus, xhr) {
            //console.log(data)
          //called when successful

        },
        error: function(xhr, textStatus, errorThrown) {
          //called when there is an error
        }


});


}

// merge response data from both ajax calls when they are done
$.when( _ajax(1), _ajax(2) ).done(function(a1, a2){
      console.log(a1, a2);
});

DOCUMENTATION

http://api.jquery.com/category/deferred-object/

SIMILAR PROBLEMS

http://forum.jquery.com/topic/using-when-to-deal-with-response-of-multiple-ajax-calls-deferred-objects

ARTICLES TO EXPLORE

http://www.tentonaxe.com/index.cfm/2011/9/22/Using-jQuerywhen-with-a-dynamic-number-of-objects

http://learn.jquery.com/code-organization/deferreds/

http://learn.jquery.com/code-organization/deferreds/examples/

answered Nov 27, 2013 at 16:09

Lothre1

3,8819 gold badges49 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SLaks Over a year ago

Your wrapper function is completely unnecessary.

Lothre1 Over a year ago

The wrapper function pretends to simplify the amount of code necessary to perform ajax calls. This wrapper can be greatly improved but the this examples pretends to show how it can be made. Examples at the end of the post pretend to complement the post it self. Thanks ;)

Collectives™ on Stack Overflow

How to create a centralized callback for multiple ajax requests?

> when both are finished

1 Answer 1

What's a deferred object?:

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

> when both are finished

1 Answer 1

What's a deferred object?:

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related