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

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 2

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