Why AJAX over iFrames?

Question

I am relatively new programmer, talking with a partner he told me, that before AJAX, he used a iframe to send data and change the content(obviously with help of JavaScript).

I understood that both are similar techniques, but i didn't find a article to describe their characteristic,

what are advantages of AJAX over Iframe ?

EDIT i didnt find any explanation of the technique, but my partner told me he post the data trough a hidden iframe and submit the iframe, sound like just the iframe have to be refreshed, but i never did that

Solution 1

1. One advantage AJAX has is being able to read the state/status of the request. You also have access to page headers, which you don't with Iframes.
2. Ajax can handle multiple asynch requests. It's a little trickier with Iframes as you need to create an Iframe per request (and keep track of all of them to delete them later) instead of recycling the same one.
3. Existing libraries are full of AJAX goodness and there is a larger community support base.

Solution 2

iframe

is a way show seperately two (or more) webpages in one

 ajax

is a way to merge two (or more) webpages ( or new data ) into one

key advantages to Ajax I find are;

• CSS will flow to the page called into it.
• A way to retrieve data and update new information to the visitors without page refresh.

A fab mention to this site for it's clever use of Ajax.

A'Google instant' and suggestive searching is achieved via Ajax

Solution 3

Just my two cents:

I agree with Kris above that I wouldn't say they are comparable.

There's on use case that I find iFrames to be easier to work with over AJAX and that is if you need to submit a complicated form to another page but you don't need any response - the iframe route is by far the easiest to code.

Beyond that, AJAX, using a metaphor, acts a very knowledgeable go-between. It will handle multiple requests, the status of those requests, and hand back the data in the format you need.

Solution 4

I just wanted to add this because I didn't see in any of the answers.

The reasons to use Ajax are mostly about control, which you get a lot of. These reasons have been mentioned above.

One serious downside of Ajax, though, is that it is a JS fix. JavaScript is a great language, but people have been throwing it at every problem for a while now, and things which could be optimized if they were built in to the browsers, are now instead being done slowly (compared to compiled languages) with JS.

iFrames are a great example of this. They represent an incredibly common use case, wanting to include some html in some other html. Unfortunately, they aren't very amazing at it, often creating more headache than anything else.

If you want to include something and not have it mess with your site, nor your site to mess with it, iFrames are great. For the more common use case of including some random html in some other html, Ajax is better.

And here is the point I'm trying to make: this is dumb. There is no reason there shouldn't be something like an iFrame that acts more like Ajax. But, by jumping on board (as all of us did) with Ajax, we are now left with no choice.

The biggest reason this is a problem is that JS was never meant to be the absolute building blocks of the internet. Further, it's being used by pretty much every site around to violate user privacy. So, if you're looking for a good reason to use iFrames, this is mine:

It feels good to not need JS. If you can make your site improved by JS rather than dependent on it, that's a hard earned accomplishment, and the site will feel less "hacky" overall.

Anyways, that's just my input.

Solution 5

In my experience data loaded via AJAX is easier to manipulate versus data inside an iFrame. Also AJAX is really good for creating a better user experience. However I am not sure if I would necessarily put iFrames and AJAX in the same category because AJAX is asynchronous content and an iFrame is really just another page being loaded from outside of your site.

Also I could see iFraming creating SEO barriers and creating bad user experience. Honestly though if I had access to content I would prefer AJAX.

View more solutions

Comments

[Diodeus - James MacFarlane]

Usually the iframe is hidden and, before AJAX, it was common to use it to retrieve data from the server without a reload. The contents of the Iframe was grabbed by JavaScript residing in the main page. HTML was to be inserted into the DOM, via JS, or executed against the parent page if it was a JS block.

[Rico Ocepek]

I think what @rob-sedgwick mentioned should also be noted here: CSS styling of the page will only apply to content loaded via AJAX. When you load content via an iFrame you have to include your styles again there..