How to Do Awesome Refreshless Page Changes Like Github Do

How do I do awesome refreshless page changes like GitHub do?

They have a detailed blog entry up on how it works (HTML5 History API) here: https://github.com/blog/760-the-tree-slider

How does GitHub change the URL but not the reload?

It uses the new push/pop state functions in the history manipulation API.

Change browser URL and page content without reload and without using fragments

I believe this is due to the new History pushState HTML5 feature

how can i improve this code

You should look at new History API additions in HTML5. There's a somewhat long introduction from "Dive into HTML5" book but I like it a bit more than MDN article.

Also there's a great library called History.JS that abstracts away the differences between the new API and old hash-based approach. I also works around many incompatabilities among browsers which is great! It works with jQuery, Prototype, MooTols and Zepto.

Why the new web Dropbox can change the URL without page refresh?

They're using HTML5 Pushstate:

http://badassjs.com/post/840846392/location-hash-is-dead-long-live-html5-pushstate

What is pushState?

The history object gains two new methods, pushState & replaceState, that allow us to change the
current location of the browser without making an HTTP request. These new locations are stored in the
browsers history so that both the back and forward button work as expected.

 history.pushState({foo: "bar"}, "foo page", "/foo")

How to change url in address bar?

You can use the history manipulation api:

//Change address to http://www.test.com/page.php:
history.pushState('', '', 'http://www.test.com/page.php');

See
How do I do awesome refreshless page changes like GitHub do? or
https://github.com/blog/760-the-tree-slider