Have you wondered how the websites like Gmail use Ajax and yet make sure that usability is not compromised? The trick is widely being used but still, I get almost 3-4 hits everyday on this topic. So I decided to explain it…
The problem: Sending requests to servers asynchronously using javascript to load content dynamically(or should I say AJAX?) has been around for quite some time. It became popular when Google started using it in Gmail and it has been in the buzz since then. The buzz has started dying down now with usability becoming the important aspect now. I completely agree with the trend and this post is about solving one of the problems related to it. The problem in one sentence is:
While making AJAX calls, how do you keep the behavior of back button from breaking.
To explain it further: When you are changing the state of a page, using Ajax, how do you make sure that the user can return to it or a meaningful state without problems?
The solution:
The simple solution: If you are using some standard javascript library, Search for something that allows you to do it. For example, in JQuery, you can directly use the History Plug-in available at: http://www.mikage.to/jquery/jquery_history.html.
The more interesting is the description of how it is done and if you want to do it by yourself, how should you go about doing it.
The trick lies in using dummy strings at the end of your actual URL. A typical URL looks like this: http://example.com/link/to/page/#deep-link-information. When you type a link this in the browser and hit enter, the first part of the URL: http://example.com/link/to/page goes to the server. A server creates and sends the page corresponding to the link to the client(browser). A browser then starts working and searches in the page for any item that has an id “deep-link-information”. The browser then brings that item in focus, if found. If it is not found, the browser just ignores it.
The important behavior to remember here is that two links with different “deep links” are treated differently by the browser and are stored in its history.
So how does it work again? Well the trick is to change the “deep link” part of the URL every time you go to a new page. This is only one part of the solution though. The other part is to write javascript code that looks at this part of the URL and loads the content accordingly. Is it going over the head? Look at the way Gmail works. When you are in inbox, the URL is “https://mail.google.com/mail/?shva=1#inbox” when you go to settings page, the URL changes to “https://mail.google.com/mail/?shva=1#settings“ and when you go to a different tab in settings, it changes to: “https://mail.google.com/mail/?shva=1#settings/accounts“. Note the three parts: #inbox, #settings and #settings/accounts. The javascript in Gmail’s page actually looks at this part and loads the required section once a page change takes place. It is not very difficult from this point to manage stuff.
Want a working example? You can get the code from: http://jodhpuriguy.com/previous/darkChocolate/ (view source and download the file general.js).
Hope this post has been of some help :).
When you use back button in google it is always unbelivable fast. Does they reload data from server? are there any way to say browser to cache the last page so you can come back without request to the server?
I assume you are talking about GMail. In that case, yes the data is generally cached. If you pay attention, you will see that Gmail starts caching emails once you load the page. If you have opened a mail once, the second time you load it, it is going to be faster. If you notice, even pressing the Inbox button does not always load the latest mails(it just shows the cache). To check the latest mails you have to press refresh or g+i or wait for it to do it by itself. (Of course not everything is cached – settings page seems to be an example of that.)
As for the browser caching technologies, If you would like to do that caching without user intervention, javascript seems to be the easiest way. Other than that, you could use Google Gears. Mozilla is developing a tech to do it but i dont think it is very usable right now.
This is very hot info. I think I’ll share it on Facebook.