How do I use www.domain.org/#!/topic/item style URLs and what are they called?

On many sites I see URLs like www.domain.org/#!/topic/item in my address bar. For example the new twitter changes the URL into that.

I know what the hash does when you use targets in HTML: www.domain.org/page.html#topic3 moves the browser viewport to the anchor <a name="topic3">.

Also I think that this URL scheme solves the problem of having always the right URL in the address bar on a page with dynamical loaded content.

But how…

• …do I handle those URLs on the server side? (mod_rewrite, javascript?)
• …is the technique called?

Thanks for your help!

The reason why Twitter and some popular sites use hash in the address, is that it gives the website the ability to use the Back and Forward button on a content that is dynamically loaded using Ajax. You don't really have to do anything on the server-side, the trick is to catch the address change on the client-side.

There is a popular plugin for jQuery called jQuery History. - http://tkyk.github.com/jquery-history-plugin/ which does the job for you, but you would have to load the content from the server using Ajax and display it in some container on your website.

One note, the ! next to the hash is a way to make search engines be able to crawl your website. More about that on http://code.google.com/web/ajaxcrawling/docs/getting-started.html

What you usually do is to pick up the window.location.hash, and pass it as a parameter to the server in an AJAX request.

There's the window.onhashchange event for finding out when it's changed (hence when to issue a new AJAX request), but not all browsers implement it, so for now you're better off just writing a javascript interval that continuously checks if the hash has changed.

They are used by dynamic web pages as you already said. There are many ways to handle such url requests on the server side. The form with the exclamation mark is used for SEO I believe.

see http://code.google.com/intl/de-DE/web/ajaxcrawling/docs/specification.html.