In the recent years, AJAX-based applications have changed the face of the web. From static and boring web sites, we have come to Web 2.0, with the fancy user interfaces, eye-candy effects and animations. From user's point of view, this has revolutionized the way web was perceived. In order to follow this, developer tools had to be adapted for this new challenge. A lot of new tools and frameworks have appeared that make developer's life easier, such as jQuery, GWT, Dojo and the others.
Using this variety of available platforms, novice developer can quickly get up to speed and start building modern web applications. On the other hand, all these tools hide the complexity and basics of AJAX, so new developer can hardly get the notion of what is really happening “under the hood”. In this series of tutorials, we will cover basic workings of AJAX.
AJAX stands for Asynchronous JavaScript and XML. From this, you can infer that basic building blocks of AJAX are JavaScript and XML, and the fact that it's asynchronous. What does this really mean? In order to explain this, let us first see what is the sequence of events in plain old web application (or any web site).
- Client sends HTTP request to server and waits for response
- Server processes the request and sends the response back to client
- Client receives the response and renders the web page
This sequence of events is synchronous, which means they happen in exactly this order. When client sends the request, it can't do anything else until the response from server is received, or a timeout expires. After the response is received, client has to render the entire page in order to display the response properly. Even if only a single word is changed, we still need to render entire page. Since web pages usually contain lots of graphics, images, Flash animations etc., it can take a long time to display a page.
AJAX takes another approach to this, and that is introducing asynchronicity. In AJAX application, the sequence of events is as follows:
- Client sends HTTP request to server, but does not wait for response
- Server processes the request and sends the response
- Client receives the response asynchronously
- Special function handler processes the response and updates only a single part of the page, instead of rendering entire page
This approach significantly improves application responsiveness and user experience. In classic web application, after the request is sent, client is essentially blocked until response arrives, but in AJAX, client can resume functioning immediately. Application registers special callback handler, which processes response at the time it arrives from server.
**XmlHttpRequest**
You may be wondering, how can a client distinguish between plain, synchronous HTTP request, and asynchronous one? The trick is that AJAX calls use special type of HTTP request called XmlHttpRequest. It provides support for handling asynchronous calls, as well as adding support for some other AJAX-related stuff. These include:
- Setting up and making AJAX requests
- Dealing with changes in request status
- Handling response content from server
We will deal with all these items in upcoming parts of the tutorial.
**HTML and DOM**
The other question that might arise is how AJAX can change page, without rendering it entirely. The answer is DOM (Document Object Model). HTML documents are arranged in tree-like structure called DOM. This allows for easy traversal and manipulation of tree nodes. JavaScript has built-in support for DOM manipulation, so it's quite easy to change HTML document structure. You can insert or delete nodes, change their content and appearance etc. All this can be done on client side, without having to reload the page.
**Tutorial requirements**
In order to work with AJAX, we need the following tools:
- Text editor – for writing code
- Client (browser) for testing
- Server for processing requests
All the examples shown in this tutorial work with Mozilla Firefox 13 and later browser. Due to browser incompatibilities, it is possible that they won't work correctly in other browsers. Therefore, for this tutorial, the following tools are required:
- Mozilla Firefox 13 (or later)
- Apache Tomcat
- Apache Maven
- Any text editor
We will use Tomcat for running server side code. Maven is used as a build tool, and we will not interact much with it. Server side code is written in Java, so familiarity with Java servlet specification is an advantage, but not required.
In the following tutorial installment, we will write simple “Hello, world!” style application.
Here are some useful links:
- [https://developer.mozilla.org/en/AJAX][1] – Mozilla AJAX documentation
- [http://ajaxian.com/by/topic/ajax][2] – lots of articles on AJAX
- [http://developers.sun.com/scripting/ajax/index.jsp][3] – Sun (Oracle) AJAX docs
[1]: https://developer.mozilla.org/en/AJAX
[2]: http://ajaxian.com/by/topic/ajax
[3]: http://developers.sun.com/scripting/ajax/index.jsp