Friday, March 31st, 2006

The XMLHttpRequest Reuse Dilemma

Category: Programming, XmlHttpRequest

<p> If you’ve ever been programming along, working with your Ajax connections and wondered why you have to make a new one each time, you’re not alone. Eric Pascarello asked himself the same question and decided to do something out it. He’s written up a simple test Ajax app that just pulls in XML data from a remote script to illustrate the example.

One thing I see popping up over message boards is people want to reuse the XMLHttpRequest Object instead of creating a new instance every single time. Some developers think this will help in memory leaks. I have not tested it in any way to see if it really helps. But I thought that I would show you it is possible to reuse the same object over again and again with Internet Explorer.

For this code I am going to be using a very basic example. I am not going to use OO code so just bear with it. With Firefox you are able to reuse the XMLHttpRequest object without this craziness, but with Internet Explorer 6 you are not able to do that (I have not tested this in IE 7 yet so hopefully someone will comment on the reuse factor!)

His example involves the simple click of two buttons to load the remote file into the Ajax object. Everything behanves just fine in Firefox when clicking both of the buttons – object reuse is fine. The real issue comes around when Internet Explorer is thrown into the mix. Click on the first button and all is well. Click on the second and nothing happens. It just doesn’t understand normally how to reuse that previously created object.

Eric did, however, find a way to get around this lovely little bug in IE – the use of the abort() method in the loading of the XMLHttpRequest object. The issue is that Internet Explorer doesn’t seem to release the connection once it’s made, so it can’t reuse a still-open connection. Abort() closes it and allows the object to be refreshed and open to whatever use on whatever browser.

Always good to see a simple solution for a simple problem…

Related Content:

Posted by Chris Cornutt at 8:07 am
17 Comments

++++-
4.2 rating from 34 votes

17 Comments »

Comments feed TrackBack URI

I emailed you guys something a while back that was a chat app that re-used the same XMLHTTP object repeatedly.

I thought everyone was re-using the XMLHTTP object!!!?!?!

(I have found on more complex apps that creating new instances can get around some problems though… maybe this is why everyone was re-creating them to start off with??)

Comment by m3 — March 31, 2006

Just to let you know there is another way to do it. Thanks to Paven Keely http://keelypavan.blogspot.com/2006/03/reusing-xmlhttprequest-object-in-ie.html for pointing out my error you do not have to use the abort method if you code the request properly.

I posted a new article here: http://radio.javaranch.com/pascarello/2006/03/31/1143817890773.html

Eric

Comment by Eric Pascarello — March 31, 2006

Please stop hacking in the name of righteousness! I have no love for Microsoft, but it is ridiculous to call something a bug when IE’s XMLHttpRequest docs don’t say that you can use the same instance for multiple requests.

If you’ve ever written code for an object class, you know there are plenty of reasons that it can be more efficient to create a new object every time you want to do an action. Request objects store state which you are no doubt confusing by using the object badly.

There are also plenty of legitimate reasons to hack around these restrictions, but stand up and acknowledge that it is a hack and that when your code breaks in the next version of IE, it is not Microsoft’s fault.

Comment by Travis Wilson — March 31, 2006

IE 7 will have a native XmlHttpRequest object, so eventually this will no longer be a problem.

http://blogs.msdn.com/ie/archive/2006/01/23/516393.aspx

Comment by Matthew Ratzloff — March 31, 2006

First of all, IE doesn’t hold the first connection. As I specified in my blog (please see Eric’s response link), if you observe with client side TCP probe tools like HTTPWatch, you can see that the requests are being fired second, third and nth time for one object. But the only problem is that the callback handler is not getting called.
Pavan Keely

Comment by Pavan Keely — April 1, 2006

Hi All,

On IntuiCat, every request share the same XMLHTTP object.

We have a WaitState() function called before and after the request, and in case of timeout.
If IE, WaitState() aborts the request (useful in case of timeout)

function WaitState(tlWait, toObject) {
if (tlWait){
this.nTimerID = window.setTimeout(‘ServerMute()’, this.nTimeOut*1000);
}
else {
window.clearTimeout(this.nTimerID);
this.oXMLHTTP.onreadystatechange = new function(){};
if (this.lIE) {
this.oXMLHTTP.abort();
}
}
}

Comment by Thierry Nivelet — April 3, 2006

So after all that, did anyone do any benchmarking to see if there’s an appreciable saving in time or memory when reusing the XHR object?

Comment by Sam Foster — April 3, 2006

[...] Last week, we mentioned Eric Pascarello’s “XMLHttpRequest Reuse Dilemma” article. Eric explained that to reuse an XMLHttpRequest object in IE, you must call abort(). [...]

Pingback by Ajaxian » Reusing XMLHttpRequest Without abort() — April 3, 2006

I guess what I don’t get is why people think that not creating new objects will somehow magically affect memory leakage patterns?

Our testing has shown that how you attach event handlers matters and not the number of XMLHTTP objects allocated. Somehow “recycling” the XMLHTTP object won’t prevent you from leaking the entire enclosed scope of the handler function object if you’re still directly assigning functions onto the event handler slots of the ActiveX object. “Leaking” the same scope multiple times is hardly worse. It’s still one (possibly large) scope.

Until some empirical evidence to the contrary is presented, this “solution” looks like a no-op.

Regards

Comment by Alex Russell — April 3, 2006

why I cannot do this:

obj.attachEvent(‘onreadystatechange’, function(){ /* do something.. */});

or this

obj.addEventListener(‘readystatechange’, function(){ /* do something.. */}, false);

another bug? Or I’m the bug!?

thanks

Comment by Alex Possi — October 21, 2006

Free Porn Galleries! http://www.avxf.com

Comment by Free Porn Galleries — January 5, 2007

cool site

Comment by cnfm — March 8, 2007

Hi guys. Good little points here. Again…

Comment by Jerome Black — March 22, 2007

great info

Comment by Erik — June 6, 2007

very nice

Comment by resim — October 23, 2007

cool site

Comment by forum — October 28, 2007

This techie stuff is a bit much for me

Comment by Ebook Resell Rights — November 6, 2007

Leave a comment

You must be logged in to post a comment.