All notes
Pjax

Intro

github.com: 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

developer.mozilla.org: History API.

Suppose http://mozilla.org/foo.html executes the following JavaScript:


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

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

Suppose now that the user navigates to http://google.com, then clicks the Back button. At this point, the URL bar will display http://mozilla.org/bar.html, 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 http://mozilla.org/foo.html, and the document will get another popstate event, this time with a null state object.