http://home.peufeu.com/posts/xhreorder.rar

Oooooo by the way it only works in Opera cause that’s what I had on hand…

I wrote a bittorrent tracker in Python, using an asynchronous select/poll model ala lighttpd. It uses all the tricks in the book, including deferred execution of closures, deferred execution of SQL queries via thread pool, generators as asynchronous fake threads, deferred zero-overhead firewall checks, and it can reload its own code without restarting. Number of concurrently opened sockets is limited only by the OS and it could handle about 1000 HTTP hits per second on my old pentium-m laptop. Since then (about 2 years ago) it has never crashed. This code could be called complex. Not “very” complex though.

Anyway back to xmlhttp :

var seq_counter = a global sequence counter.
var pending = an array of pending xmlhttp requests.

When sending a request, tag it with seq_counter, and increment seq_counter. Store the request in the “pending” array. Perhaps init a timeout to kill it if it takes too long, that’s up to you.

When you get a response, look in the pending requests array. Scan it in order of sequence number.

Process all responses received, popping them out of the array, until you find an unanswered request. If this happens, stop processing. The processing will resume from this point when/if the response is received, or the timeout kills it.

This is pretty simple and it guarantees that all responses will be processed in the same order as the requests.

I do this with a simple javascript call, separate from the ajax call – I don’t modify all my ajax request handlers to do their own checking for member login, and their own event handling (in the success function) if the member is not logged in.

I currently have a home-grown synchronous ajax call to check for logged-in-ness that I use before initiating the specific ajax action. I was hoping to drop the home-grown stuff and just use YUI – but it appears I can’t, since YUI doesn’t support synchonous calls. Is there some better YUI way to handle this use case?

While you have a valid point, I disagree that current behavior of XMLHttpRequest is a problem or faulty design. A true async operation should return when the operation is finished. It shouldn’t have dependency on when the operation is invoked.

Previous comments has shown that it is easy to cope with the async behavior to achieve your goal. But if XMLHttpRequest is designed to have response return in invocation order, it will be very difficult to achieve true async operation, therefore make it useless on many other use cases.

For example, you have a database application with a list view and a record view. Records are locked when loaded and unlocked when unloaded. The locking can be done server-side, but the unlocking needs to be done via a JavaScript request.

By the time the request is complete the page is gone. If there was a callback function, it’s gone. If the loading of the next page is affected by the lock status, there is no guarantee that the XMLHttpRequest is finished before it starts loading. You can’t just put the unlock function on the list page, or in the link, because you don’t know what the user is clicking on or if they might want to have two records open.

My solution was to track the XMLHttpRequest object in a variable (we’ll call it xhr).

When an attempt to make a new Ajax call is made I check xhr to see if it is null. If it is not I call xhr.abort() to kill the request (now it will not return, out of order or otherwise). Then I set xhr = null and make the new request storing the new XMLHttpRequest object in xhr.

var xhr = null;
function MakeAjaxCall() {
if (xhr !== null) {
xhr.abort();
xhr = null;
}

xhr = new XMLHttpRequest(/* proper settings */);
/* more code to complete the XMLHttpRequest */
}

I also add a delay when making Ajax requests from a UI component. This gives the user a tiny moment to cycle through selects without my code making and aborting a lot of Ajax calls.

var select_change_timeout = null;
var reasonable_delay = 100; // or something reasonable
var select_element = document.getElementById("my_select_element");
select_element.onchange = function () {
if (select_change_timeout !== null) {
clearTimeout(select_change_timeout);
select_change_timeout = null;
}

select_change_timeout = setTimeout(MakeAjaxCall, reasonable_delay);
};

Disclaimer: code samples are simplified and untested and may not work for you.