What is AJAX?

In the past we had server side technologies like servlets and JSP pages and the client side technologies like JavaScript for web development. The common characteristic of these technologies was that a web page was redisplayed in its entirety if any change needed to be communicated by the server. Asynchronous JavaScript and XML (AJAX) is the extension of various web technologies to facilitate client-server communication without reloading the current page. The XMLHttpRequest object enabled communication with server-side scripts from within JavaScript to allow one to update portions of a page based upon user events. A good example of AJAX is Google search which provides context-specific words list whenever we type something in the search bar without waiting for the page reload. Under the AJAX umbrella we have web technologies like XHTML, CSS, DOM, XML, XSLT, JavaScript and XMLHttpRequest working together to enhance user-experience through dynamic updates.

The Classic web applications vs AJAX application comparison diagram make the approach clearer. It is the introduction of the AJAX engine which governs asynchronous communication with the user-interface and the server to eliminate waits associated with traditional development while the server responds to HTTP request. The lynchpin of AJAX engine is the XMLHttpRequest object which exists in all the browsers now. As far as the server is concerned, it is not even aware that it is dealing with a browser sending asynchronous requests. It is normally the expertise in handling the methods and properties of the XMLHttpRequest technical component which sets AJAX developers apart from the traditional developers who are versed in DHTML. The steps in AJAX operation are occurrence of a client event, creation of XMLHttpRequest object, its configuration, an asynchronous request by it, server response, processing by the callback function of XMLHttpRequest object of the server response and, finally, updating of the HTML DOM.