smallroomsoftware.com

Okay, this is pretty obvious when you think about it but I think it's the kind of thing you have to read somewhere to actually hammer it home. There's a very straightforward principle you can use to make your fancy AJAX powered partial page reloads degrade nicely when javascript isn't available (or just fails).

Say you have an "add to cart" link and you want it to use an AJAX request to inform the server that the item is to be added to the cart and to also get some html to update a "mini-cart" div. Well, what you should do is code this without any AJAX/javascript first. Have the link just target an action, e.g. "/cart/add_product?id=123". The action should then redirect to the cart details page or wherever. Fine, that works nicely for non-javascript browsers.

Now, write your link onClick handler so it pulls the same URL from the link (using the DOM) and makes an XMLHttpRequest. This time though, the server should return just the html fragment to be updated. How does the server know to return a fragment? Most AJAX libraries add a special header to the request identifying it as an AJAX request.

Something like Ruby on Rails should of course be able to do all of this for you! But, by default, the link_to_remote function inserts "#" into the link's href parameter and you have to repeat the URL parameters to get the desired result.

Unfortunately, there is quite a low limit on the number of simultaneous connections that a web browser will/should make to a single server. In the HTTP 1.1 spec, the limit is just 2 simultaneous connections. From an efficiency standpoint this makes sense, but I've run into a problem coding the object details pages for FlyMine as they now do something a little bit unusual - the page displays results for several database query operations that may each take up to say, 10 seconds to run. I want the page to display immediately (allowing the user to read the rest of the page or navigate away) and for the results of the long running queries to 'trickle' in over the next few seconds. So when the page loads, an AJAX request is made for each query, pulling the results from the server and placing them in a hidden div.

The problem I have is that other parts of the page also make AJAX requests in response to user interaction and these elements won't function if my background queries (of which there are 5 or 6) aren't done (presumably because the browser is queueing the connections).

A possible solution would be to queue all the database query requests so they only take up one connections. Might even be possible to use a keepalive connection for that. Not too sure though.

Alternatively, maybe I'll bundle all the database query requests into a single AJAX request and update multiple divs with the response HTML - that's more complicated that I would like though.

Internet Explorer and Connection Limits

Clients that use persistent connections SHOULD limit the number of simultaneous connections that they maintain to a given server. A single-user client SHOULD NOT maintain more than 2 connections with any server or proxy.

RFC2616 HTTP 1/1

Update (3/3/06): So I implemented my queueing scheme, firing off each AJAX request as the previous one finishes. You can see an example by visiting a gene page on FlyMine. Scroll down quickly (you may have to be quite quick to catch it) to see the pulsing square blobs on the left-hand side. They pulse until their associated request finishes, and then, one at a time, they turn into a little disclosure icon and fill in the number of results for each sub-query on the page. You can find the JavaScript used somewhere in the HTML source.