AJAX Streamlining techniques?

Question

My question is a bit abstract.

We're all familiar with AJAX preloaders/spinners that come up when an AJAX request is being made. My question is how do you avoid these?

Take for example, a sortable list. When a user drags and drops items to resort them, an AJAX call is made to update the order.

Before, I would pop up a fullscreen AJAX spinner to prevent the user from doing anything until the AJAX call was complete.

My question is, how would I go about avoiding the AJAX spinner and "streamlining" ajax requests to ensure if a user initiates 20 ajax requests in 2 seconds, that they will be executed in order?

I don't really need code examples, just accepted or popular techniques/ideas. Or if I'm going completely off track here.

Thank you

Answer 1

update

use async javascript library instead of this to achieve what you want

old below

So far good answers in terms of using an array or queue to ensure they are loaded and returned one at a time. I would eliminate the spinner all together similar to how gmail does and only message the user only when necessary. There is no point in bothering the user about all these spinner deals. They just look like little robot a-holes anyways. Here is some code to do I whipped up.

Since I got a nod on this I will explain its features.

1. Stops queue if error occurs
2. Continues queue as success occurs
3. Has event handlers for success / error with context

I write plugins so is this an idea worthy of a plugin? I don't think so but hey you never know.

var queue = [],
doRequest = function(params) {
    params.running = true;
    $.ajax({
        url: params.url,
        dataType: 'json',
        success: function(d) {
            params.success.call(params,d);
            queue.unshift(); // Quit counting your change and move along.
            if (queue.length > 0) {
                doRequest(queue[0]); // Hey buddy, your next.
            }
        },
        error: function(a,b,c) {
            params.error.call(params,a,b,c);
            alert('"oops"'); // Rick Perry
        }
    });
},
queueRequest = function(params) {
    queue.push(params); // Sir, you'll need to go to the BACK of the line.
    if (!queue[0].running) {
        doRequest(queue[0]);
    }
};

// so to use this little snippit, you just call "queueRequest" like so (over and over)
queueRequest({
    url: 'someajax.abc',
    success: function(d) {
        // let the user know their stuff was saved etc.
        // "this" will be the context of the "params"
    },
    error: function(a,b,c) {
        // let the user know something went wrong etc.
        // "this" will be the context of the "params"
    } 
});

And you're done.

Answer 2

You could make an "ajax request manager" that queues (and potentially bundles together) pending ajax requests. I have a complex application with many ajax-updatable controls, I show spinners only over the controls that are being updated. Since your draggable list updates just stuff on the server you can probably get away without a spinner.