By now I am sure that you must have visited Google maps, if not have a click here. To me it was a fascinating experience to lookup for maps using Google. As a web developer I wondered how one could be make the user experience so interactive that it seemed almost like an application installed in my desktop. The ease with which you could move around the map just amazed me. My quest for the secret behind this experience made me do few “google” for the technology behind this, which revealed something called Ajax (Asynchronous JavaScript + XML ). Ajax is a concept that incorporates XHTML/CSS, DOM, XML and XSLT, XmlHttpRequest and JavaScript.
We all know how the web works. The client makes the request and the server processes the request and sends its response back. So there is a significant time for the response to reach the client (which includes time for request to reach server+processing_time+time for response to reach client). Ajax is an engine written usually in JavaScript that resides in the client side and is responsible for rendering the user interface by separating it from the client/server communication. It does both of them in an asynchronous fashion and hence the user will never have to wonder if the globe is spinning! The idea is redirect every user action which would make a HTTP request to the Ajax engine instead. The engine sees if it can handle the request without sending it across and if it can’t it then makes request asynchronously using XML to the server without stalling user’s interaction with application.
The websites that implement Ajax are from Google. They are orkut, Google Suggest, Gmail. I played with Google Suggest to find out how they have built. I am presenting what I learnt:
The Ajax engine as discussed is implemented as a JavaScript file called ac.js. The source can be obtained from here. The code is obfuscated and so reading it is not obvious. The requirement for Google Suggest is straightforward and so looks the implementation. As the user types something, suggestions have to be obtained from server and are to be presented to the user. The Ajax engine (JavaScript) handles the onkeydown event of the search textbox and grabs the content of the textbox and sends a request for suggestion to the server using:
http://www.google.com/complete/search?hl=en&js=true&qu=google
This request would return a result like this:
sendRPCDone(frameElement, "google", new Array("google", "google.com", "google toolbar", "google maps", "google scholar", "google mail", "google images", "google tool bar", "google map", "google uk"), new Array("155,000,000 results", "1 result", "3,170,000 results", "6,890,000 results", "2,210,000 results", "20,600,000 results", "21,500,000 results", "3,460,000 results", "10,500,000 results", "16,300,000 results"), new Array(""));
What has happend is that the server has processed the request and has sent a response back to the client. Here the Ajax engine (function qc(ac)) is responsible for sending the request and handling the response. Once the response is received it refreshs the view.
Its just amazing to see how some primitive time tested technologies if used in a certain combination could make the line between the thin and thick client so thin!
Reference:
1. http://www.adaptivepath.com/publications/essays/
2. http://www.google.com/webhp?complete=1&hl=en
No comments:
Post a Comment