Welcome!

AJAX & REA Authors: Charlene Qu, Yakov Fain, Andreas Grabner, Lori MacVittie, Kevin Hoffman

Related Topics: AJAX & REA

AJAX & REA: Article

AJAX: XMLHttpRequest Vs. iFrames

XMLHttpRequest Vs. iFrames

Should you use the old iFrame tricks or the new XMLHttpRequest? There is not better or worse when comparing these two techniques, but they are certainly different. While both of them allow you to communicate with the server in the background, you should choose the appropriate for your situation depending on a few questions: Do you want the back-forward buttons to work? Do you plan to perform more than one simultaneous request? Do you need cross-site calls? Do you need to monitor the status of your calls?

I'm pretty sure there are more differences, and way around the ones I will mention for either technique, but out of the box, here are the differences:

                            XHR           iFrame
Multithread:       yes             no
Back button      no               yes
Cross-site        no               yes
Statuses           yes             no

Some people use iframes because it's easier to monitor… all you have to do is to show the hidden iframe and voila, you see the responses. On the other hand, I use several http traffic sniffers that give me even more accurate information, and they're extremely easy to use. So that's not a plus for me.

Multithread is huge... you could achieve this with iframes if you create a framework that will create a new iframe using dom, use it for the call and delete it once it's completed. When using XHR, you can easily create a new remote request with simple scripting.

The back button breaks by default when using XHR. Sometimes it is actually good, f.e, if I populate a city and state using a zip code, or check if an email has been taken prior to submitting a form I wouldn't like to add a history step, so I'm glad the back button doesn't recognize that request. There are ways around it too if you do need it to work. I will post some solutions/possibilities soon.

Cross-site scripting ... while you would like this to work to use web services, they do not really work with iframes either. When scripting with iframe you need to explicitly call a function in the parent or top window, so unless you control both sites, this advantage is useless. You can implement a server side web service proxy relatively easy and I would suggest doing that if you need to use WS.

Finally, statuses... with an iframe you do not know in that status your call is. With XHR you have 5 different ones: 0 = uninitialized, 1 = loading, 2 = loaded, 3 = interactive, 4 = complete. They are useful to provide the user with more accurate information.

In conclusion, most of the times XHR is preferable over iframes, but there are cases and cases. Google maps uses iframes, while google suggest uses XHR.

This article was republished with permission of the Author.

More Stories By Rob Gonda

Rob Gonda is an industry visionary and thought leader, speaks on emerging technologies conferences nationwide, and combines unique approaches to technology and marketing strategies. He is the former Editor-in-Chief of the AJAX Developer’s Journal, an Advanced Certified Coldfusion Developer, member of the Adobe Community Experts, frequent contributor to the CFDJ and ADJ, co-author of Real-World AJAX: Secrets of the Masters, author of AjaxCFC, holds a BS in computer science and engineering and an MBA with a specialization in entrepreneurship. Rob recently joined Sapient from ichameleon/group/ where he was a founding partner and chief technical officer. He is part of the global technology leadership team, and brings with him over ten years of experience in web development and 360 marketing campaigns for clients such as Adobe, Coca-Cola, Guinness, Toyota, Taco Bell, NBC, and others. He specializes in emerging technologies, marketing strategy, social media, and he is currently fascinated with rich internet applications, service oriented architecture, mobile, agile methodology, automation, behavioral targeting, multi-channel synergy, and identifying new trends. Rob’s mission is to develop forward-thinking expertise that will ensure clients are always on par with rapidly changing technologies and maintain its ethos of evolving. You can reach him at rob[at]robgonda[dot]com and read his blog is at http://www.robgonda.com

Comments (4) View Comments

Share your thoughts on this story.

Add your comment
You must be signed in to add a comment. Sign-in | Register

In accordance with our Comment Policy, we encourage comments that are on topic, relevant and to-the-point. We will remove comments that include profanity, personal attacks, racial slurs, threats of violence, or other inappropriate material that violates our Terms and Conditions, and will block users who make repeated violations. We ask all readers to expect diversity of opinion and to treat one another with dignity and respect.


Most Recent Comments
ok 03/28/09 12:38:57 PM EDT

I think either DOM injection or iframes will do the job. At least as far as the bandwidth and server horse power won't let a ajax page refresh or evolve to let say show, for example, an animation where the info to be drawn homogeneously may be rendered/sent by the server really fast. We may play with that at this time on our local configs, but for drawing basic htm content remotely... I have to say that iframes are much easier/faster and cross-plateform to implement for the moment. Regarding the back-forward thing, something tells me that back-forwarding with anchor hashes, data cached in each iframes is really fast and enjoying on a navigation point of view.

Kenneth 07/23/08 10:55:44 PM EDT

You forgot to mention a disadvantage of xmlHttpRequest that is a major issue for me: You can't(at least not directly) run scripts that are returned as part of the response.

David 10/11/07 05:14:45 PM EDT

I can not read your story. Your ads are too intrusive. Bye

Ajax News Desk 02/27/06 10:53:27 PM EST

Should you use the old iFrame tricks or the new XMLHttpRequest? There is not better or worse when comparing these two techniques, but they are certainly different. While both of them allow you to communicate with the server in the background, you should choose the appropriate for your situation.