ajax vs iframe

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.

Source : http://ajax.sys-con.com/read/188390.htm

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s