What are some good JavaScript/AJAX interface patterns for websites?

Question

I really like how sites like FogBugz and Facebook offer snappy user interfaces by loading page content asynchronously.

What are some good resources and patterns for applying this to other websites? I am looking for a solution that creates a unique hash URL for each page, preserves history and basic browser functions, and degrades gracefully if JavaScript is not enabled (a great example of this is Facebook).

This blog post is a good start, but it's far from a complete solution/pattern - and any approaches using jQuery would be great.

Answer 1

IMO, in order to allow a site to degrade gracefully, you should first build at least the framework of the site in the lowest level that you're going to support. In your case, this is going to be standard postbacks.

Once you've got this in place, you can then start adding ajax interactions.

The approach I've taken when using ASP.NET MVC is to have one function which builds the whole page from scratch (for regular postbacks) and then have some extra methods which I used to dynamically refresh content via Ajax. If I want to implement a 'Single Page' method like oyu describe then I would handle the onclick event of a hyperlink and call an ajax method that renders the 'Build Whole Page' method to a string then pump that string into my content div.

HTH

Answer 2

I have found pjax to be the most promising solution so far. From https://github.com/defunkt/jquery-pjax:

pjax loads HTML from your server into the current page without a full reload. It's ajax with real permalinks, page titles, and a working back button that fully degrades.

pjax enhances the browsing experience - nothing more.

You can find a demo on http://pjax.heroku.com/