Wednesday, January 25th, 2006

Foldblog: Handling Multiple XHRs

Category: XmlHttpRequest

Apparently, Fold (not there yet) is to be a new Web 2.0 start page. In any event, the Fold Development Blog, by Axel Wolf, is explaining the goings-on in their Ruby-On-Rails development effort, and a recent post explains how they deal with multiple XMLHttpRequest calls. Remember this is a kind of portal, so the technique is specifically about using multiple XHRs to simultaneously update different “containers”, i.e. different parts of the screen.

The trick is to carve up the page into different containers. Then, create an array of “updaters”, one assigned to maintain each container. Each of these updaters gets its own XHR, thus ensuring the calls don’t step on each others’ toes. As always, a technique like this must still be careful to avoid too many requests being fired at once.

The pattern begins by pointing out, “Most introductory AJAX examples only have a single, globally defined XMLHttpRequest object. “, something unacceptable for most real-world systems due to the asynchronous nature of XHR. Axel notes that the “Ajax in Action” text uses an OO technique to handle the problem in one way; the Fold technique above is a different approach.

Posted by Michael Mahemoff at 10:29 am
10 Comments

+++--
3.9 rating from 25 votes

10 Comments »

Comments feed TrackBack URI

[…] Aporta tu opinión Suscribete al feed de la conversación. Post Enviar artículo por email Haz trackback desde tu blog. Guardar en del.icio.us ArtículosRelacionados […]

Pingback by La brujula verde » Fold, otra página de inicio “à la web 2.0″ — January 25, 2006

“Most introductory AJAX examples only have a single, globally defined XMLHttpRequest object. “

I thought most tutorials actually show you to create a new XHR object for every request, which is the opposite problem.

Comment by Julien Couvreur — January 25, 2006

Actually you have to create a new XHR object for every request. I think he’s saying they have one function/object that wraps this creation process and handles the asynchrounous return.

In my own framework I use some neat object oriented techniques to handle multiple requests. I’m guessing it’s similar to the “ajax in action” referred to in the text.

I create “data pipe” objects and have objects that implement a pipe-reciever interface. Objects that use the data pipe, are automatically returned the data they requested through the interface.

Stll looking for feedback on YAJAF!, all comments welcome.

Comment by mikepk — January 25, 2006

In firefox you can only have two pending requests. You can create an infinity of XHRs objects, but requests will only be dispatched two by two. I haven’t tested it in IE yet, but certainly it has something like that too. This is a good limitation, if you could create an infinity of pending requests this would overload the web server.

Comment by Christophe — January 25, 2006

Hmm that’s interesting, I guess I never noticed since most of my sample applications use very small communication payloads between application and back end. Fired up the network analyzer, and sure enough it looks like you’re right. Gonna make a new sample application to pound on the data pipe interface to see what I can get on the network analyzer. Makes me think that maybe a scatter/gather method might work for increasing the efficiency of the link, especially for smaller transactions. Will try to implement and see what it does.
Thanks for the tip!

Comment by mikepk — January 25, 2006

Yeah, it should read that you have one “single, globally defined variable” (that is assigned a new XHR object for each call etc. which will ovioulsly not work if you have more than one request at a time) Thanks for pointing this out.

Comment by Axel Wolf — January 25, 2006

So digging into the multiple request issue a bit, I think I’ve found that firefox can actually hold more request in flight simultaneously. Essentially you want to enable pipelining and increase the max outstanding values. Go into firefox, and go to “about:config”.
There are a few options you can tweak regarding simultaneity. Put “network.http” into the filter box. The options you’re looking for are the following.
network.http.pipelining=falsenetwork.http.pipelining.maxrequests=4network.http.proxy.pipelining=false

Change the booleans to true, and increase the max request to some reasonable number like 20. Add a property “nglayout.initialpaint.delay=0”. Obviously this is a little involved for end users but could be useful for testing purposes.

Check out YAJAF! still soliciting feedack!

Comment by mikepk — January 25, 2006

so much for fancy formatting.
network.http.pipelining=false
network.http.pipelining.maxrequests=4
network.http.proxy.pipeline=false
Change the booleans to true, and increase the max request to some reasonable number like 20. Add a property “nglayout.initialpaint.delay=0″. Obviously this is a little involved for end users but could be useful for testing purposes.

Comment by mikepk — January 25, 2006

[…] Foldblog: Handling Multiple XHRs Apparently, Fold (not there yet) is to be a new Web 2.0 start page. In any event, the Fold Development Blog, by Axel Wolf, is explaining the goings-on in their Ruby-On-Rails development effort, and a recent post explains how they deal with multiple … […]

Pingback by The Web Chronicals » Blog Archive » Foldblog: Handling Multiple XHRs — January 25, 2006

I have a way to get around the single http_request resource and multiple requests to it. It still uses it as a global variable, but as an array. In a nutshell, it goes through the array and finds an available resource. If there isn’t one, it creates a new one.

Here’s a sample of it in use: http://www.digitalbonsai.com/xhrmulti.php

Three functions that use XHR are called at the same time (well, one right after the other). The list at the bottom of the page show the xhr[] variables that were generated.

– Luis (lu@digitalbonsai.com)

Comment by Luis Torrefranca — February 18, 2006

Leave a comment

You must be logged in to post a comment.