Smart Ajax / Javascript Paths

I always wondered how heavy Ajax applications (like Facebook) make use of those smart paths. When I browse on Facebook, I can see that the actual URL is always the same, usually http://facebook.com/home.php, but after that comes a "#" and then a path, for example http://facebook.com/home.php#/profile.php etc. I had a look with Firebug and found that there are no magic Javascript events going on or anything, they just check document.location at a given interval (also found some funny business). The reason why this hash-url is genius is because it doesn't break the back button, although the pages load using Ajax. Knowing these, I was able to make a small function that will call another function whenever the URL has changed. Here it is: function PathWatch(path_change_cb, interval) { // Store initial path this.path = document.location.href; // Store the function to call when the path changes this.path_change_cb = path_change_cb; // Default interval is 400 miliseconds if (!interval) interval = 400; this.check_new_path = function() { // If the location has changed, store the new location // and call the callback function if (document.location.href != this.path) { this.path = document.location.href; this.path_change_cb(); } } // Check for a new path every interval miliseconds this.oInterval = setInterval(this.check_new_path, interval); } Here's a simple example use: function path_changed() { console.log(document.location.href); } PathWatch(path_changed); This obviously only works if you have Firebug installed and doesn't do any Ajax-y stuff, but it proves how useful this can be. Nice :-) In response to JD :: UX Developer's comment below: You mean how I would implement it in a real website? Well, for starters we know that, when coding an Ajax-enhanced website, it must still be able to work entirely without Javascript (for accessibility reasons). Basically, I'd do something like this: 1) On every Ajax-enabled link <a href="path/to/non-ajax/page.html" onclick="window.location.href='#/smart/ajax/path'> 2) In my script, I'd make a function that catches the URL changes using the above PathWatch object (like path_changed in our example is) in which I would parse document.location.hash which contains everything that's after "#" in the nav bar and does requests and page changes accordingly. For example, if the path changed to #/profile/1123, I'd make a request for profile details for profile #1123 and show information about it. Basically, I don't care if the path change was made by a user clicking a link or clicking the back button. I hope I was clear, let me know if I was not (I'm a bit tired and in a hurry) and I will answer any question you might still have :-).