All notes

Intro jQuery-pjax.

pjax = pushState + ajax

pjax works by fetching HTML from your server via ajax and replacing the content of a container element on your page with the loaded HTML. It then updates the current URL in the browser using pushState.

pushState History API.

Suppose executes the following JavaScript:

var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");

This will cause the URL bar to display, but won't cause the browser to load bar.html or even check that bar.html exists.

Suppose now that the user navigates to, then clicks the Back button. At this point, the URL bar will display, and the page will get a popstate event whose state object contains a copy of stateObj. The page itself will look like foo.html, although the page might modify its contents during the popstate event.

If we click Back again, the URL will change to, and the document will get another popstate event, this time with a null state object.

A very good tutorial

wcfNote: it's a very good tutorial with demo scripts, though it uses "pjax" lib instead of the more popular "jquery-pjax" lib.