Multiple ajax calls at same time

I have developed some websites and I always stumble a the same point: multiple ajax calls. I have a main page where all the content is loaded asynchronously. When the page is loaded, there are four INDEPENDENT calls that “draw” the page by areas (top, left, right and bottom) and while it are loaded I show to the user the typical ajax spins. So, when a request is received by the browser I execute the callback and the different areas are drawing at different time. The fact is that the answer for the server sometimes are mixed up, I mean, the answer of top is drawn in the left or vice-versa.

I’ve tried some solutions like creating a timestamp in each request to indicate to the browser and server that each request is different.

Also I’ve tried to configure some parameters of cache in the server, in case.

The only way in which works has been including the request2 in the callback of the one, etc.

Anyone knows the proper way to do it or ever has beaten this issue?? I don’t want to do chained request.


Here is an example of what I mean:

$(document).ready(function() {


And the html is a simple jsp with four container each one with a different id.

Ajax jQuery multiple calls at the same time – long wait for answer and not able to cancel

My problem is as follows: On a page, I am doing multiple (6) ajax calls (via jQuery) to fetch some data at the same time (using php wrapper to fetch the data via the calls) The requests are made at t

multiple ajax calls at the same time override eachother

I have a page with several different forms on which people can insert their zipcode and housenumber. After an onblur on these input field I make an ajax call to get the streetname and city from the se

Multiple ajax calls for the same client with reverse ajax

I’m developing a very large application in JAVA / Sping MVC / Jquery over Oracle Weblogic that has a couple of screens called overviews that make multiple ajax calls to the server. All this calls shou

JSF multiple ajax calls

I am having trouble with multiple ajax calls on the same page. The first ajax call on a blur event populates a drop down. Then when the button is clicked, the page is supposed to display otherEleme

Ajax, multiple calls

I wonder is it a good practice to do multiple Ajax calls?

measure processing time of multiple AJAX calls at the same page

In this way I can measure the processing time of mine ajax call var ajaxTime= new Date().getTime(); $.ajax({ type: POST, url: some.php, }).done(function () { var totalTime = new Date().getTime()-a

multiple ajax calls to servlet

I have an issue with AJAX calls to a servlet. On a page i want to make multiple ajax calls to the same servlet, but i cant get it to work as how i want: page.jsp: … // Button A pressed $.ajax({ ty

Ajax Heartbeat using setInterval, Preventing multiple calls at the same time

I wish to make an AJAX call using jQuery as a heartbeat in the background so that my web application can check for new data. For example every 10 seconds. I have seen on other posts that it is possi

ExtJs Multiple Ajax calls

I am trying to learn extjs 4.1 MVC. I have a controler with multiple ajax calls. When the code runs on Firefox I can see all the ajax calls are made but the alert of only one of the sucess method is c

Running Tinymce multiple ajax calls issue

I have been sending multiple ajax calls from a single page and trying to load TinyMCE with each ajax call. But TinyMCE loads only the first time. The code I have been using after AJAX success: succes


Make sure you have different callbacks for each ajax call, it sounds like you are trying to use the same function for all four, thus when they are called out of order (because they take different amounts of time server-side), they are rendering in the wrong place. If you insist on using the same function for all your callbacks, then you have to put something in the payload so that the callback knows where to render to.


Closures are a little mind-blowing at first. They are a feature of javaScript and several other modern computing languages.

A closure is formed by an executed instance of a function that has an inner function (typically an anonymous event handler or named method) that needs access to one or more outer variables (ie. variables that are within the outer function but outside the inner function). The mind-blowing thing is that the inner function retains access to the outer variables even though the outer function has completed and returned at the time that the inner function executes!

Moreover, variables trapped by a closure are accessible only to inner functions and not to the further-out environment that brought the closure into being. This feature allows us, for example, to create class-like structures with private as well as public members even in the absence of language keywords “Public” and “Private”.

Closures are made possible by inner functions’ use of outer variables suppressing javaScript’s “garbage collection” which would otherwise destroy the outer function’s environment at some indeterminate point after completion.

The importance of closures to good, tidy javaScript programming cannot be overstressed.

In the code below the function getData() forms, at each call, a closure trapping id1 and id2 (and url), which remain available to the anonymous ajax response handler ($.get’s third argument).

$(document).ready(function() {

    function getData(url, id1, id2) {
        $.get(url, Common.genSafeId(), function(data) {

    getData('/activity', '#stream', '#load_activity');
    getData('/messages', '#message', '#load_messages');
    getData('/deals', '#new_deals_container', '#load_deal');
    getData('/tasks', '#task_frames', '#load_task');


Thus, rather than writing four separate handlers, we exploit the language’s ability to form closures and call the same function, getData(), four times. At each call, getData() forms a new closure which allows $.get’s response handler (which is called asynchronously when the server responds) to address its DOM elements.