Series of AJAX calls that need each other's results

Question

I'm making an ajax call to the server which returns me some data that I'm storing in a localStorage item (No need to explain why, but needs to be like that).

Then I need to restore that localStorage item in a following ajax call, right after the first one.

MY PROBLEM: Being asyncronous, the second call starts before the variable is set, so Im getting null.

I tried "when.done", "when.then", calling the second on the first's success... and nothing seems to work.

Why don't you just use a callback method after the first request was successfull? — Nico O, Jan 29 '14 at 17:23
Please post your code snippet. Without it we won't be able to guide u correctly — Saurabh Sharma, Jan 29 '14 at 17:24
@NitinRawat Are you suggesting he makes them synchronously? That's almost always a bad idea. — Jivings, Jan 29 '14 at 17:24

score 5 · Answer 1 · edited May 23 '17 at 12:21

Sequential ajax calls.

In your case probably the best solution is to use sequentially ajax calls.

edit: i see now the jquery tags.. this code is pure javascript..and works on all modern browsers including ie10 & ios/android. it's called xhr2. but as you are using localStorage this should not be a problem.

function ajax(a,b,c){ // Url, Callback, just a placeholder
 c=new XMLHttpRequest;
 c.open('GET',a);
 c.onload=b;
 c.send()
}

function store(array){
 window.localStorage['data']=JSON.stringify(array)
}

//***************************************************************

function firstCheck(){
 var call1data=JSON.parse(this.response);
 store(call1data);
 // get what you need
 ajax('url',secondCheck)
}

function secondCheck(){
 var 
 call2data=JSON.parse(this.response),
 call1data=JSON.parse(window.localStorage['data']);
 // whatever...
}

ajax('url',firstCheck);

now if you are more specific... i can elaborate the code.

More info anout the ajax function in use. there is also a example with post.

https://stackoverflow.com/a/18309057/2450730

if you have any questions just ask.

dinkydani · Answer 2 · 2014-01-29T17:43:46.300

You need to use a callback for when the first call returns.

There are two ways using $.ajax:

First way:

$.ajax({
    type: "GET",
    url: url,
    data: data,
    success: function (data){
        //store your localStorage item (data)

        //do another call when the first call is successful
        $.ajax({
            type: "GET",
            url: url,
            data: data,
            success: function (data){
                //restore your localStorage item
            }
        });
    }
});

Second way:

$.ajax({
    type: "GET",
    url: url,
    data: data,
    success: mySuccessFunction
});

function mySuccessFunction(data){
    //store your localStorage item (data)

    //do another call when this call is successful
    $.ajax({
        type: "GET",
        url: url,
        data: data,
        success: function (data){
            //restore your localStorage item
        }
    });
}

Or if you prefer a quicker/shorthand way using $.get:

$.get( "url", mySuccessFunction);

function mySuccessFunction(data){
    //store localStorage item

    $.get( "url", function(data){
        //restore localStorage item
    });
}

Might be slightly less verbose with `$.get`, but +1 because poster asked for a jQuery solution and this is the only one. — Jivings, Jan 29 '14 at 17:39

score 1 · Answer 3 · answered Jan 29 '14 at 17:28

I assume that you are calling this ajax function in a setTimeout like loop?

if, you didnt want the ajax to be async, the thrid param of:

ajax=new XMLHttpRequest();
ajax.open("GET","something.php",true);

sets the mode to async or not.

A better solution would be to get the ajax on statechange to call a new ajax call when its finsihed.

   ajax.onreadystatechange=function(){
       if (ajax.readyState==4 && ajax.status==200)
       {
           callMyAjaxFunctionAgain(ajax.response);
       }
   }

Series of AJAX calls that need each other's results

3 Answers3