Multiple chained jQuery AJAX POST webservice calls

Question

Im using jQuery AJAX Calls to a webservice. The calls have to be chained. Based on the solution of https://stackoverflow.com/a/995648/296575 I created an AJAX queue.

function ajaxQueue(step) {
          switch(step) {
            case 0: $.ajax({
                      type: "POST",
                      url: "url",
                      data: SoapRequest1,
                      contentType: "text/xml",
                      complete: storeData1                          
                     }); break;
            case 1: $.ajax({
                      type: "POST",
                      url: "url",
                      data: SoapRequest2,
                      contentType: "text/xml",
                      complete: storeData2
                    }); break;
            case 2: $.ajax({
                      type: "POST",
                      url: "url",
                      data: SoapRequest3,
                      contentType: "text/xml",
                      complete: storeData3
                    }); break;
          }
        }       
        //start ajaxQueue
        ajaxQueue(0);

        function storeData1(xmlHttpRequest, status) 
        {                                           
                updateData1(xmlHttpRequest.responseXML);
                ajaxQueue(1);           
        }

        function storeData2(xmlHttpRequest, status) 
        {
              updateData2(xmlHttpRequest.responseXML);
                ajaxQueue(2);
      }

        function storeData3(xmlHttpRequest, status) 
        {
                updateData3(xmlHttpRequest.responseXML);

      }

Now I have the following issue: If the function is executed, only the first case returns the correct XML from the webservice. The second and third calls lead to an error. (parseerror, data is null).

The calls are cross domain, which is supressed by:

 netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");

If I add async:false to each call, all of them are executed correctly. If I change the order of the calls, always the first one is executed correctly.

Can anyone help me with this one? Or tell me If you need more information.

Thank you!

`parse error, data is null` > aren't `SoapRequest2` and `SoapRequest3` null when passed to `$.ajax` ? — Stock Overflaw, Jun 12 '12 at 09:49

score 0 · Answer 1 · answered Jun 12 '12 at 17:52

hmm, if I was chaining ajax calls, I would just put the second call inside of the first calls success handler or some variation of that.

$.ajax( {
   url: 'blah.com',
   success: function( result ) {
      $.ajax( {
         url: 'blah.com',
         success: function( result ) {
            // now in second leg of the chain.
            // you can keep going like this forever.

         }
      } );
   }
} );

score 0 · Answer 2 · answered Jun 12 '12 at 18:55

Use callbacks (something to call when the AJAX request has finished), pass it as an argument into your queue:

function ajaxQueue(step, callback) {
      switch(step) {
        case 0: $.ajax({
                  type: "POST",
                  url: "url",
                  data: SoapRequest1,
                  contentType: "text/xml",
                  complete: callback                          
                 }); break;
        case 1: $.ajax({
                  type: "POST",
                  url: "url",
                  data: SoapRequest2,
                  contentType: "text/xml",
                  complete: callback
                }); break;
        case 2: $.ajax({
                  type: "POST",
                  url: "url",
                  data: SoapRequest3,
                  contentType: "text/xml",
                  complete: callback
                }); break;
      }
    }       

    //start ajaxQueue
    ajaxQueue(0, function() {
        // do something when ajaxQueue(0) has returned from AJAX call
    });

    function storeData1(xmlHttpRequest, status) 
    {          
         // passes updateData1 as a callback, automatically passes params from AJAX call                                                 
         ajaxQueue(1, updateData1);           
    }

Thanks for your answer. I tried this aswell, but still 2nd and 3rd POST do not return any data... — Olga, Jun 13 '12 at 08:17
Put a debug statement at the top of the function to check `step` and in each case before the AJAX call to check the value of `SoapRequestX` — Terry, Jun 13 '12 at 12:04

Multiple chained jQuery AJAX POST webservice calls

2 Answers2