Updating your
ajax for html5

What is the current situation

Well, anyone who has used ajax knows that it comes with the history problem. In a nutshell, it broke the back and forward button of the browser. Enter hashtags. People started adding hashtags after the url to save the state of the ajax and the website (webpage.com/#page1, webpage.com/#page2). If you ask me this never looked good, and what is even worse for developers, the search engines don't care about hashtags in urls.

HTML5 goodies

With the new html5 way of handeling history this has become easy as can be. Now we can just call a function called pushState() and that handles the url part. It allows you to change the url (as long as you stay on the current domain) to whatever you want without the browser actually loading a new webpage.

However, dont' start cheering yet. You know html5 isn't done yet, and I'm guessing it will take some time before it will be. So who has joined the party?

Browser support

Looking at the current browser situation we see that there is no cause for depression. Our beloved webkit browsers have the support going on. However, Firefox has not implemented this yet. The documentation by mozilla reveals that this will be implemented in FF 4.00. But hey, that is better than nothing! So, let's take a look at how this works.

The code to the right shows what you need to know to get started. Note however that onpopstate is not called after pushState, but only when the user presses the back/forward button in the browser. So if you wanna implement this nicely, you should use one functions that works with both hashtags and pushState

The Code

//Setting our variables
var stateObj = {page: 'page1'};
var title = 'page1';
var url = '/pages/page1';

//Check for browser support
if(window.history.pushState){
  //Doing the html5 magic
  window.history.pushState(stateObj,title,url);
    
  //Fixing html5 problems
  document.title = title; 
}else{
  //Support the hashtag for the other browser
  hashtagFunction(stateObj,title,url);
}
window.onpopstate = function(event){
  //Here you can do your magic with event.state
}