How to chain ajax calls using plain javascript

Question

I've looked for the answers but couldn't find anything with plain Javascript. What would be the appropriate way? I tried to use the same approach repetitively but it didn't work. How can I solve this with pure Javascript?

       function someFunction(){ 
    var url = "someUrl";
    var xmlhttp = new XMLHttpRequest ();
    xmlhttp.open("GET", url, true);
    xmlhttp.send();
    xmlhttp.onreadystatechange = function (){
      if (xmlhttp.readyState == 4 && xmlhttp.status == 200){  
        obj = JSON.parse(xmlhttp.responseText);
      length = obj.ajax.length;
        for(var i = 0; i < length; i++ ){
            try{
              var someVar = obj.ajax.elements[i].id; 
              var url2 = "someOtherUrl"+someVar+"/features";
              var xmlhttp = new XMLHttpRequest ();
              xmlhttp.open("GET", url, true);
              xmlhttp.send();
              xmlhttp.onreadystatechange = function (){
              if (xmlhttp.readyState == 4 && xmlhttp.status == 200){  
              obj2 = JSON.parse(xmlhttp.responseText);
              length2 = obj2.ajax.length;
              for(var j= 0; j < length2; j++){ 
              var elementNames = obj2.elements[j].name; 
               }
             }
            }
           }
          }
         }

http://stackoverflow.com/questions/30008114/how-do-i-promisify-native-xhr — Amir Popovich, Dec 09 '16 at 16:25
Oh, I'm actually quite new to JS and didn't know about promises, I'll try to use them not sure how at the moment but thank you. — ricster, Dec 09 '16 at 16:29
@ricster if you start googling how to chain promises you will find the answer to your question. This is actually a fairly common use-case. — Jared Smith, Dec 09 '16 at 16:33

Jimish Fotariya · Accepted Answer · 2016-12-11T08:40:13.940

You can call that someFunction() recursively.
To do so, You just have to invoke that same function after 200 ok response.
In following code I've added a restriction to return form recursive callback stack after a fixed amount of requests in chain.

EDIT : for multiple urls

callDone  = 0;
urls = ['http://url1','http://url2','http://url3'];
totalCall = urls.length - 1;

function someFunction(){
  
  //Edit: > Fetch url from array
   var url     = urls[ callDone ] ;
   var xmlhttp = new XMLHttpRequest ();
       xmlhttp .open( "GET", url, true);
       xmlhttp .send();
       xmlhttp .onreadystatechange = function ()
       {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
              //your stuff with response... 
      
              if( callDone < totalCall ){
                callDone++;
                someFunction();
              }
              else{
                  return;
              }
           }
       }
}

But how can I use my second ajax URL if I keep calling same function? — ricster, Dec 09 '16 at 18:49
Thanks for this answer. It helped me solve my problems however as things stand in the answer above, the last iteration does not happen as 2 is not less than 2. — Paula Livingstone, May 07 '19 at 16:54

How to chain ajax calls using plain javascript

1 Answers1