jQuery Address provides strong cross-browser support for browser history and Ajax crawling:

• http://www.asual.com/jquery/address
• http://github.com/asual/jquery-address

I'm really surprised the BBQ plugin by renowned Ben Alman didn't got a mention here http://benalman.com/projects/jquery-bbq-plugin/

Update: There is now the HTML5 History API (pushState, popState) which deprecates the HTML4 hashchange functionality. History.js ^[1] provides cross-browser compatibility and an optional ^[2] hashchange fallback for HTML4 browsers.

jQuery History is my preferred choice. It can be found here: http://www.balupton.com/sandbox/jquery-history/demo/ Provide cross browser support, binding to hashes, overloading hashes, all the rest.

There is also a Ajax extension for it, allowing it to easily upgrade your webpage into a proper Ajax application: http://www.balupton.com/sandbox/jquery-ajaxy/demo/

This is the solution chosen by such sites as http://wbhomes.com.au/ and http://gatesonline.com.au/stage/public/

Overall it is well documented, supported and feature rich. It's also won a bounty question here How to show Ajax requests in URL? ^[3]

Right now, in Internet Explorer 8, Firefox 3.6+, and Chrome 5+, you can bind callbacks to the window.onhashchange event and use it without any kind of plugin.

Ben Alman has created a jQuery plugin that enables very basic bookmarkable #hash history via a cross-browser HTML5 window.onhashchange event.

http://benalman.com/projects/jquery-hashchange-plugin/

Basic usage:

$(function(){

  // Bind the event.
  $(window).hashchange( function(){
    // Alerts every time the hash changes!
    alert( location.hash );
  })

  // Trigger the event (useful on page load).
  $(window).hashchange();

});

Supported browsers:

• Internet Explorer 8-9
• Firefox 2-4
• Chrome 5-6
• Safari 3.2-5
• Opera 9.6-10.60
• iPhone 3.1
• Android 1.6-2.2
• BlackBerry 4.6-5.

I'm successfully using history ^[1] & anchors to make the back/forward buttons work on an AJAX page.

Just define a function in the global scope to get called for every navigation event:

function nav_event(hash) {
  // Some sort of navigation happened, update page
}

$(document).ready(function(){
  $.history.init(nav_event);
  $.history.load('#some_anchor');
}

This one is new and works on all recent browsers :

http://benalman.com/docs/code/files/javascript/jquery/jquery-ba-url-js.html

have fun !

http://code.google.com/p/reallysimplehistory/

For a complete AJAX Navigation solution, you may want to check out http://github.com/Panmind/jquery-ajax-nav

There's a third jQuery plugin which also gives you back/forward button support: http://www.overset.com/2008/06/18/jquery-history-plugin/

It doesn't require you to alter your hrefs with hash fragments, although it doesn't give you the bookmarking support you requested it might still be worth checking out.

For completeness of this list, jQueryTools also has one: http://flowplayer.org/tools/toolbox/history.html http://jquerytools.org/documentation/toolbox/history.html

I miss here this example: http://www.bcherry.net/playground/sanerhtml5history. It is very simple, but works as expected and has great fallback for IE6/IE7.

It uses jquery.pathchange.js plugin, which can be found here: http://www.bcherry.net/static/lib/js/jquery.pathchange.js

This worked very well right off - http://flowplayer.org/tools/toolbox/history.html#plugins_tab http://jquerytools.org/documentation/toolbox/history.html. Be aware that it is GPLv3-licensed ^[1].

And the code is:

<a id="index.cfm?fuseaction=something" href="something">Some Link</a>

<script type="text/javascript">
    $(document).ready(function(){                
        $("a.buttons").history(function(event, hash) {
        $('#rightcontent').load($(this).attr('id'));    
    });
</script>

<div id="rightcontent"></div>

The hash variable always pulls in the href attribute so you need to put the link in some other attribute. I put it in the id attribute.

You can use jQuery Address plugin http://www.asual.com/jquery/address/

There are some examples http://www.asual.com/jquery/address/samples/

And these are specific on Ajax calls:

• http://www.asual.com/jquery/address/samples/crawling/ (AJAX Crawling)

• http://www.asual.com/jquery/address/samples/state/ (HTML5 state support)

There is a urlAnchor plugin available as well. http://plugins.jquery.com/uriAnchor/

This is from the book Single Page Applications (which I've just read). I'm not sure if it's available on Amazon yet but I picked it up from the early release program on Manning.com.

The basic flow of operation if you use this one is that you direct all UI state changes (e.g. JS responding to UI events) to your URL fragment and have a separate hashChange handler for responding to those hashchange events and then make the appropriate UI state change.

This approach enables you to have one code flow for navigating the UI regardless of whether the state changes come from the user navigating the site or from clicking a URL, a bookmark or the back and forward buttons.

I really like the idea of it since you control which states of your application or site are bookmarkable and you only have one code flow to worry about.

I haven't tried it in practice however but it looks like a good approach to me.