This is a demonstration of how to load page content dynamically whilst preserving history and allowing bookmarking.

This can dramatically speed up page loads, giving a better user experience. It can also reduce load on your server.

There are two main approaches to dynamic content loading which preserves history. You can manipulate the page fragment (/something#pagefragment). This is only a client side solution. A request for /something#pagefragment will actually request /something from your server. The browser will then attempt to scroll the page to an element with an id of "pagefragment". This means that you need to detect the page fragment client-side on page load and then request the relevant data from the server. This will actually increase page load time of initial page requests. Also, search engines will not be able to crawl the content properly.

An alternative is to use the JavaScript History API, namely "window.history.pushState". This is not widely supported, as shown in this table. It allows you to manipulate the URL. The browser's back functionality will not cause a page reload, but instead will trigger an onpopstate event. Because you can manipulate the URL, bookmarks are actually bookmarks to sensible pages. They will cause a page load of the page that the user actually wants.

For an example of the second approach go to "One". Please note that I have added an artificial delay in response time in order to illustrate the loading mechanism.