Should I load an entire html page with AJAX?

Question

My designer thought it was a good idea to create a transition between different pages. Essentially only the content part will reload (header and footer stay intact), and only the content div should have a transitional effect (fade or some sort). To create this sort of effect isn't really the problem, to make google (analytics) happy is...

Solutions I didn't like and why;

• Load only the content div with ajax: google won't see any content, meaning the site will never be found, or only the parts which are retrieved by ajax, which arent't full pages at all
• show the transitional effect, then after that 'redirect' the user to the designated page (capture the click event of a elements): effect is pretty much the same as just linking to another page, eg. user will still see a page being reloaded

I thought of one possible solution: When a visitor clicks a link, capture the event, load the target with ajax, show the transitional effect in the meantime, then just rewrite the entire document with the content fetched with the ajax request.

At least this will work and has some advantages; the page reload will look seamless, no matter how slow your internet connection is, google won't really mind because the ajax content is a full html page itself, and can be crawled as is, even non-javascript browsers (mobile phones et al.) won't mind, they just reload the page.

My hesitation to implement this method is that i would reload an entire page using ajax. I'm wondering if this is what ajax is meant to do, if it would slow things down. Most of all, is there a better solution, eg. my first 'bad' solution but slightly different so google would like it (analytics too)?

Thanks for your thoughts on this!

Answer 1

Short answer: I would not recommend loading an entire page in this manner.

Long answer: Not recommended. whilst possible, this is not really the intent of XHR/Ajax. Essentially what you're doing is replicating the native behaviour of the browser. Some of the problems you'll encounter:

1. Support for the Back/Forward button. You'll need a URI # scheme to solve.
2. The Browser must parse the entire page through AJAX. This'll slow things down. E.g. if you load a block of HTML into the browser, then replace the DOM with it, only then will any scripts, CSS or images contained therein begin downloading.
3. Memory - the browser's not changing pages. Over time (depending on the browser), I'd expect the memory usage to increase.
4. Accessibility. Screen readers will need to be notified whenever the page content is updated. Might not be a concern for you but worth mentioning.
5. Caching. Browser would not know which page to cache (beyond the initial load).
6. Separation of concerns - your View is essentially broken into server-side pieces to render the page's content along with the static HTML for the page framework and lastly the JS to combined the server piece with the browser piece. This'll make maintenance over time problematic and complex.
7. Integration with other components - you're already seeing problems with Google Analytics. You may encounter issues with other components related to the timing of when the DOM is constructed.

Whether it's worth it for the page transition effect is your call but I hope I've answered your question.

Answer 2

1. you can have AJAX and SEO: Google's proposal .

2. i think you can learn something from Gmail's design.

Answer 3

This may be a bit strange, but I have an idea for this.

Prepare your pages to load with an 'ifarme' GET parameter.

• When there is 'iframe' load it with some javascript to trigger the parent show_iframe_content()
• When there is no 'iframe' just load the page, with a hidden iframe element called 'preloader'

Your goal is to make sure every of your links are opened in the 'preloader' with an additional 'iframe' get parameter, and when the loading of the iframe finishes, and it calls the show_iframe_content() you copy the content to your parent page.

Like this: Link clicked -> transition to loading phase -> iframe loaded -> show_iframe_content() called -> iframe content copied back to parent -> transition back to normal phase

The whole thing is good since, if a crawler visit ary of your pages, it will do it without the 'iframe' get parameter, so it can go through all your pages like normal, but when you use it in a browser, you make your links do the magic above.

This is just a sketch of it, but I'm sure it can be made right.

EDIT: Actually you can do it with simple ajax, without iframe, the thing is you have to modify the page after it has been loaded in the browser, to load the linked content with ajax. Also crawlers should see the links.

Example script:

$.fn.initLinks = function() {
    $("a",this).click(function() {
        var url = $(this).attr("href");
        // transition to loading phase ...
        // Ajax post parameter tells the site lo load only the content without header/footer
        $.post(href,"ajax=1",function(data) {
            $("#content").html(data).initLinks();
            // transition to normal phase ...
        });
        return false;
    });
};

$(function() {
   $("body").initLinks();
});