Tons of websites are now using ajax to dynamically load content into a page instead of reloading the entire page.  This gives a much better experience for the user, and it just feels much more seamless than traditional websites do.  However, people often run into issues with ajax because it doesn't update the url.  This means that the user cannot bookmark the page or use the back button like they normally would.  However, with some clever javascript, we can still make everything work as they expect.There are several elements that we need to solve to address these issues.  Let's start with getting the url to change, so that each ajax "page" has a unique url.

You may already know that there is a javascript variable "document.location" that allows you to change the url.  However, when using ajax, if we change this variable, it will cause the entire page to reload (just like before).  So instead of modifying "document.location", we need to modify "document.location.hash".  This variable is commonly used for internal page links.  If there is a table of contents on a page and clicking on an item jumps you down to that section on the page, that is using the hash.  This will help us too because changing the hash doesn't trigger a page load.  This method is also often used for Flash websites to store bookmarks to specific pages.

So when our ajax request returns, we just set "document.location.hash" equal to some unique value that we can check later.  See the example below:

1. Load example.com
2. Click something to trigger ajax request for content
3. document.location.hash = "newpage"
4. New url is example.com#newpage

So now we have a unique url, but that url doesn't really have any meaning for the actual page.  Loading that url doesn't actually get us the content that we want.  To solve that, we need to add some javascript that gets executed on page load.  The checkHash function below should be executed on page load.  It will grab the hash from the url, check to make sure it is a new page, and then call another function, loadPage, which will just take the hash string and trigger an ajax request for the appropriate page.  The loadPage function is custom code that you will need to write as it will be specific to the data you are trying to swap out with ajax.

var recentHash = "";
var checkHash = function() {
  var hash = document.location.hash;
  if (hash) {
    hash = hash.substr(1);
    if (hash == recentHash) {
      return;
    }
    recentHash = hash;
    loadPage(hash);
  }
}

With that function in place, bookmarking of pages will now work, but we need to add one more small thing to get the back button to work too.  On page load we need to execute the following code:

setInterval(checkHash, 1000);

This code tells the page to run the checkHash function once every second.  This will make it so that when the user hits back in their browser this function will see the new url and trigger the ajax request for the new content.

That is it.  You now have a fancy ajax loading page that still supports all of the common browser behaviors.