Is there a better way to serially submit multiple AJAX requests?

Question

I have a page with multiple forms that I submit via Ajax POSTs serially. At first, I tried using synchronous XHR requests, but this causes the browser to lock up for the duration of the request, and breaks my DOM-manipulation effects, which is unacceptable. So the pattern I ended up using is basically this:

var fcount = 0;    // incremented for each form to be submitted
function submit_form( num ) { 
    var fdata = { ... }; // data from form # num
    $.ajax( { async:    true,
              url:      '/index.cgi',
              data:     fdata,
              type:     'POST',
              success:  function() { 
                  if ( num < fcount ) { 
                      submit_form( ++num );
                  }
              }
           } );
}

$( '#submit_form_btn' ).click( function() { submit_form( 1 ) } );

The recursion strikes me as a bit of an ugly solution to what is essentially an iterative problem. Is there a cleaner or more elegant way that this could be handled?

Answer 1

A cleaner way would be to maintain a queue of callbacks(ajax requests) that you want to make and fire them one by one.

Answer 2

Are these requests idempotent? If they are you can simply fire them off one after the other. Otherwise you are somewhat limited by the asynchronous nature of AJAX.

UPDATE

I did some more research and apparently there exists a framework called jQuery Message Queuing that handles serial AJAX requests via message-queuing. Maybe this can help you out.

Answer 3

I would say raise the timeout for your script on the server and send everything in one POST.

Answer 4

If what you want to do is what your code does it is just fine to use a recursion structure.

But the suspicious part here is using more than one call, you are wasting a lot of time submitting multiple calls. Stick all the data in one call and get it over with, if it is in any way possible that is by far the preferred method.