How to detect when several AJAX requests have completed or failed?

I have an app that loads several resources when it's first run, which are stored in localStorage. I have a function that checks whether all the local storage variables are set, so that part is working okay.

My method of working is like this:

1. Display a loading message.
2. Initialize the AJAX requests.
3. Start a timer interval to check if everything has loaded.
4. When the data has loaded, initialize the application etc.
5. If the data did not load, display an error message.

The problem is with 开发者_开发知识库#5 - how to detect if there was an error? For example if there was a connection problem or the sever sent back invalid data for whatever reason. Here is my current code - downloadData just performs a basic AJAX request:

// check local storage and download if any missing  
if ( !checkLocalStorage() )
{
    $('#content').before( '<div class="notice" id="downloading">Downloading data, please wait...</div>' );
    for ( var i in db_tables )
    {
        if ( localStorage[db_tables[i]] == null )
            downloadData( db_tables[i] );
    }       
}

// check progress
var timer = setInterval( function() {
    if ( checkLocalStorage() )
    {
        // everything is downloaded
        $('#downloading').hide();
        clearInterval(timer);
        initApp();
    }
}, 500 );

---

Could you turn it around a bit? Something like this (with sensible variable names and a "real" API) would simplify things:

1. Display a loading message.
2. Instantiate an application initializer, ai.
3. Crank up the AJAX requests:
   • Success handlers call ai.finished(task).
   • Error handlers call ai.error(task).
   • Register with the initializer, ai.register(task), in case a "you're taking too long" check is desired.
4. Once all the AJAX requests have called ai.finished, initialize the application etc.
5. If any of the AJAX tasks called ai.error, then display an error message and start cleaning things up.

This way you wouldn't need to setInterval() and the individual AJAX tasks will tell you when they have finished or fallen over. You might still want the interval to deal with tasks that are taking too long but most of the logic would be notification based rather than polling based.

---

Seeing your actual ajax calls in downloadData would help, but I suggest you look over the jquery AJAX API again. Ajax calls have callbacks not just for overall completion but specifically for success and failure including errors. Try to do something like retrying if there is an error and if it continues to fail you can warn the user. You can also use these callbacks to notify your application when the loading is done instead of using an interval timer.