Loading web application content through AJAX

Question

I'm about to build a web application(not web presentation) which will load its content through AJAX (jQuery) into a specific div. There will be a menu above the div and when a user clicks on an item from the menu, the appropriate page will be loaded into the main div.

I'd like to know if there are any cons and pros of choosing this pattern for a web application.

So far I'm avare that the browser back button and history/url will be gone.

Answer 1

Two possible downsides are that it could make it difficult for users to bookmark content on your site and difficult for search engines to differentiate pages on your site.

You should probably provide more information on your reasons for taking this approach. You might have good reasons or it might be a case of using a technology (AJAX) because it is cool to use.

If you want to give the users the impression of fast responsiveness, then yes AJAX load your pages, but still have a different url for each page. This will take more code but it will solve both issues that I mentioned.

  http://yourdomain.com/home.aspx //loads its own content via AJAX

  http://yourdomain.com/contact.aspx //loads its own content via AJAX

  etc

This is really only appropriate if you have a lot of content, or where the content involves time-consuming calculations, such as on a financial site. In most cases, it would be less trouble to just load your pages normally or break you content into paged chunks.

Answer 2

The main con of this approach this will make your site very difficult for search engines to crawl. They don't read Javascript, so your content won't get seen or indexed by them. Try to do progressive enhancement so that they (and any users who don't use Javascript, e.g. screen-readers) don't get left behind.

On the other hand, you can keep browser history functionality. This can be done using the URL hash, e.g. http://www.example.com/#home vs http://www.example.com/#about-us. The nicest way to do this is to get Ben Alman's hashchange plugin and then use the hashchange event:

$(window).hashchange(function(){
    var location = window.location.hash;

    //do your processing here based on the contents of location
});

This will allow your users to use the history function and the bookmarking function of their browsers. See the documentation on his site for more information.