Ajax entire page - display only one div and retain CSS and other header material?

Question

A client wants a merch shop on their site, and has set one up. I could iFrame in the whole page to the merch page, but frankly the merch site is an eyesore, and their site has a very particular feel to it. So I'm considering using an AJAX GET to grab the whole page, then javascript to display only the div with the merchandise in it. However, there are a lot of javascript includes (etc) on the merch site that I'd need to make sure are still present for the div to work correctly.

Any feeling on if this would work or not? Would the displayed div take its stylesheet and scripts from the AJAX'd page? Can I put the div in an iframe instead?

Opinions?

Answer 1

looks like you can use jquery load function http://docs.jquery.com/Ajax/load

Answer 2

It sounds like an ugly solution. Isn't it better to do this serverside instead, for example let a PHP script read in the page and to whatever magic it takes to display it?

Using AJAX to load entire pages is ugly for a couple of reasons, including:

• It breaks the URLs (can be worked around but requires extra work)
• It's hard for search engines to crawl your site
• It breaks some GUI elements in the browser, such as loading visualisations