Ajax url navigation

I'm trying to make something similar to GitHub that loads content based on the url.

I saw this article, but I do not want to use a plugin. I would like to write my code manually.

One article I saw here, they kept checking the document.location.hash for any changes, then load the content. Is there a better way to achieve this?

The following are what Im thinking开发者_如何学Python about:

1. Load content on page load.
2. Load content on url change.
3. Change url from anchor tag without reloading page.
4. SEO.
5. Back button.

Some browsers support a hashchange event and a window.onhashchange event handler:

The hashchange event fires when a window's hash changes (see location.hash).

but some don't, the timer hack is used for browsers that don't have a hashchange event.

Your best bet is to grab an existing plugin or library and figure out how it works, that should help you get past the various browser hacks and special cases:

• Sammy.js
• jQuery BBQ

If you want some resemblance of SEO you still need real links, and then replace the click events with some javascript that utilisies https://github.com/browserstate/History.js this. Then you just setup the events so it loades via AJAX on History triggers.

The History.js script i linked uses the new History api introduced in newer browsers, but will fallback if not supported.

On page reloads/first page loads, you might want to have the first content served from the server - so Google has some actual content to cache.

I've found this on a "codeigniter" similar question, but should answer your question.

CodeIgniter + jQuery(ajax) + HTML5 pushstate: How can I make a clean navigation with real URLs?

This is a pretty light solution: https://github.com/cairo140/html5-history-example

Check the demo here: http://cairo140.github.io/html5-history-example/one.html

Hope it can help