Clean Up Your Applications Using AJAX

AJAX, which stands for Asynchronous JavaScript And XML, is a programming technique that combines different technologies. It includes a standard user interface using (X)HTML and CSS, dynamic elements and interaction via the DOM (Document Object Model) and asynchronous data exchange using the XMLHttpRequest object. JavaScript is used to tie these elements together, adding logic and dynamically updating the user interface as needed.

While AJAX has "XML" in its name, it is not necessary to use XML for data exchange. Other common formats for data exchange include plain text, preformatted HTML (which is added to the current page using the innerHTML property) and JSON (a JavaScript notation that can be run through the eval function to turn it into native JavaScript types). You can also use any other data format that is compatible with JavaScript and PHP.

A simplified definition of AJAX is to use JavaScript to communicate with the server outside of the normal GET or POST flow. The important thing is not the specific set of technologies, but the richer user experience created by this development model.

AJAX is generally built on top of the XMLHttpRequest object, which is a standard in modern browsers. If you use a library to add AJAX support to your application, you do not need to learn much about XMLHttpRequest because the library will take care of the details. In Internet Explorer, XMLHttpRequest is a built-in ActiveX object, while in Firefox, Safari and most other browsers, it is a native JavaScript object.

XMLHttpRequest offers a simple API that enables you to make HTTP requests to your server. Those requests can use GET or POST. To the server they look like any other request from the user's browser, even including all cookies for that domain and HTTP auth (if it is turned on).

On the JavaScript side, XMLHttpRequest gives you access to the content and headers when sending or receiving a request. This allows you to set HTTP headers, which are commonly used to tell the server that the request was made by XMLHttpRequest and not by normal user interaction. Once content has been received, it can be treated as plain text, or if its content-type is "text/xml", as an XML DOM object. This DOM support has made XML a popular choice for moving data between client and server, but the plain text support permits you to use any format you can parse in JavaScript.

Why AJAX?

The main reason to use AJAX is to enhance the interactivity of a web application. With AJAX, users receive feedback from programs much faster. The normal cycle of "click-and-wait" is broken, and the interface acts and feels more like a native, client-side application.

In a workflow of a typical web application, a user fills out a form and submits it back to the server. The web server processes the form and then sends the response back to the user, who then has to wait. The page is reloaded with all its contents and structure. Lots of bandwidth is wasted, since the new page contains much of the HTML from the original page.

An AJAX application, on the other hand, can send requests to the web server to retrieve only the data that is needed, and uses JavaScript in the browser to process the web server response. Using this extra layer of JavaScript, the application does not slow down the user interface. It makes the application more responsive, because the amount of data exchanged between browser and server is vastly reduced. Furthermore, there is less processing to be done on the server side, because a lot of the tasks of the application are performed by the client.

Unlike with other tools used to make highly interactive applications (such as Flash), AJAX fits into everyday development processes. You can continue using your favorite editor or integrated development environment (IDE) without needing to learn any special tools.

Finally, there are many free, Open Source toolkits that aid the AJAX development process and reduce the amount of JavaScript code you have to write. In this article, we will show you how to include AJAX in your application using two of the best-known libraries.

AJAX disadvantages

As you do not know which browser the client uses, your application might not run on incompatible browsers or if JavaScript is switched off. Consequently, you should provide a fallback method. One way to accomplish this is to build a normal application first, and then extend it using optional AJAX actions.

You should also be aware that AJAX applications will not run on Internet Explorer when ActiveX is disabled, which is often the case in public settings such as internet cafes. You also have to deal with the quirks of different browsers and platforms when testing your new code, but you are probably used to this scenario from working with CSS.

AJAX offers a lot of added interactivity, but there are some tasks that it cannot do, such as drawing or animations. In that case, using Flash would be better, and though a mixed AJAX / Flash solution can be powerful, the increased development complexity may lead you to choose only one of them at a time.

Using libraries

There are many libraries or toolkits that provide easy integration (or at least try to) between JavaScript and PHP. All of them take care of sending the data in some way, but most toolkits offer something extra, from direct mapping of a PHP class's methods to a JavaScript proxy, to a framework for building widgets. Let us take a look at two popular packages, JPSpan and HTML_AJAX.