Tale of autocomplete

As  a web user, I have always known that those automatic suggestions you get when you search for something at Google or when you fill in the forms while booking a Flight or Train Ticket are the handiwork of Javascript scripts working behind the scenes. Off late, I was very curious to know how exactly this works. This took me through a long road in the unknown territory.

To give a short summary for those like me, what really happens is that the JS script running on your browser (which gets downloaded from the webpage/site you are viewing) issues various HTTP requests to the server “asynchronously” while you are plugging in some values into a form. There is a standard way of issueing this request  - XMLHttpRequest. Once we get the data, we can modify the structure of the HTML Page. I was sort of lying. HTML page is not modified. The HTML page is read by the browser, parsed and arranged as a Tree structure and is made accessible to the JS Script. This structure is called DOM - Document Object Model. Think of DOM as a parsed HTML page re-arranged as a Tree, because HTML Document is indeed a heirarchical data structure and can be represented as a tree. The attributes of any HTML tag is now an attribute of a node in the tree and is accessible to the JS. JS script can now add/delete/change any node or its properties in the tree. When a change in DOM is made, it reflects immediately in the rendered page and one need not do a “refresh”.

But all this comes because the server can respond to those “asynchronous” requests coming from the browser and respond back with data. If it can’t, then all these are useless. One has to write code at the server side to handle these requests and return the required data (usually as XML or as JSON, an alternative to XML or key/value pairs which express the data as Javascript objects).

This is the essense of what happens in the so called “Web 2.0” style websites. Unfortunately, web has too many jargons which creates an impression that it is highly complex. It is complex but with a bit of effort, it is not difficult to understand.

I found the IBM DeveloperWorks series on AJAX very useful in understanding the above concepts.

Syndicated 2009-12-25 08:00:00 from Ramakrishnan Muthukrishnan