Ajax

Asynchronous JavaScript and XML

Ajax is a family of web technologies capable of creating rich web applications, and the cornerstone of "Web 2.0". Ajax based web applications are capable of sending and receiving data from the server asynchronously in the background, and it is this feature that forms the foundation of it's capabilities and success.

Introduction
Components of Ajax
Communication Method
Asynchronous
Synchronous
Data Interchange Format
Format Comparisons
Client Language
Pulling it All Together
Ajax Libraries
Advantages of Ajax Applications
Disadvantages of Ajax Applications
Alternatives to Ajax
Reverse Ajax

Introduction

Today, Ajax is almost synonymous with "Web 2.0", a phrase used to describe a new generation of of web applications that have rich, interactive user interfaces. It is the technologies encompassed by Ajax that are making these evolutionary changes to the Web possible. While the term Ajax is relatively new, it's components date back much further. In the past, these components have been combined with other tools in a variety of ways to achieve the functionality of Ajax with varying levels of success. With Ajax, web developers have a loose standard with which to implement the two-way communication that is powering today's rich web applications.

Components of Ajax

Ajax represents a group of web development techniques and technologies. It is the combination of these components that give Ajax it's feature set, and allow rich web applications to be built. Ajax stands for "Asynchronous JavaScript and XML", and these are the three of the most common components behind Ajax applications; however, there are alternatives. Components of Ajax can be broken down into: communication method, data interchange format, and client language.

Communication Method

The vast majority of Ajax applications rely on asynchronous communication with a server to send and receive data in the background, hence it's name; however, synchronous communication is also possible. Both techniques have advantages and disadvantages.

Asynchronous

This technique avoids interfering with the browser or behavior of the current page. This gives the web application a very responsive feeling as server requests transpiring in the background do not interfere with the user's ability to interact with the application. Asynchronous communication does add a layer of complexity in that when the client sends a request to the server, execution of code continues. When data comes back from the server, it does not come back in the context, or at the point in code that the request was sent. Using a "callback" is one popular method to deal with this. In this approach, a request is made to the server from the client and a callback is specified to handle the response. After the client sends the request it continues on with other functions. When the response comes back from the server, it is passed to the callback which takes appropriate action based on the data contained in the response (perhaps updating the page, or altering the interface in some way).

Synchronous

The alternative technique is to use synchronous communication with the server. Synchronous requests reduce complexity for the developer by pausing code execution once the request is made and waiting for the response. When the response is received, execution continues with the data received. There is no need for a callback or separate logic to handle server responses in this scenario. The big disadvantage to this approach is that the browser will be "locked" during the request, until a full response is received. While the request is in progress the user will be unable to interact with the web application in any way and may feel the page is unresponsive.

Data Interchange Format

Ajax applications encode data being passed between the server and client in one of several formats. As the name implies, XML (Extensible Markup Language) is a popular choice, but it is not the only choice. Other popular formats include: JSON (Javascript Object Notation), HTML, text, and script. Each format carries with it advantages and disadvantages, and the correct choice is dependent on the application as a whole.

Format Comparisons

XML - A robust and flexible data serialization method for Ajax applications, XML has broad support and is feature rich but can be more complex than alternative serialization methods.
JSON - Capable of representing simple data structures in a human readable text-based format, JSON benefits from fast parsing and simplicity. It also enjoys broad support in modern languages.
HTML - Data encoded as HTML can be presented by the client to the user without any parsing. This can be a good choice for simple applications but offers limited flexibility.
Text - Information, of course, can be passed back and forth as unstructured text, or as simple data structures such as CSV (comma separated values). Utilizing unstructured text, the developer will lose the advantages of available parsing functions and may find themself writing their own parsing routines, but this format would be quite adequate for very simple requests.
Script - One technique used, is to pass script code from the server to the client. In this method, the client executes text it receives from the server as script (often JavaScript) commands. This requires little to no logic on the client end, but requires the server to understand the client's document structure. This method is also subject to security concerns.
Other - There are many other data interchange formats that could be used successfully in an Ajax application. This is an non-comprehensive list of the common choices.

Client Language

Client-side scripting technologies bring all of the Ajax components together. As the name implies, JavaScript is the standard client language in Ajax applications, and although alternatives (such as VBScript) can be used, they lack the widespread browser-native support that JavaScript claims. In Ajax, JavaScript is responsible for making requests to the server, decoding server responses, and managing the presentation layer, which is typically comprised of (X)HTML documents and CSS, though other presentation technologies are possible, such as SVG, XML, and XSLT.

Pulling it All Together

Ajax web applications are loaded in the same manner as a traditional web page. Once loaded, JavaScript takes over and begins responding to events, such as user interactions or server directions. At any time these events can prompt JavaScript to communicate with the server in order to send or receive data.

There are several ways for an Ajax application to communicate with the server. The common choice is the XMLHttpRequest object, which provides a robust interface for communicating with the server both asynchronously and synchronously. The XMLHttpRequest object provides access to state changes, status codes, request aborts, and more, making it an ideal candidate for the job. Some alternatives to the XMLHttpRequest object include: the ActiveX XMLHTTP control, IFrames, and, through clever use of attributes, elements such as image, script, and style tags.

When the server receives a request for data, it will process the request, collect the relevant information, encode it in the chosen data interchange format (XML, JSON, etc), and then send it to the client. When the client needs to send information to the server (from a form or other user data source), it is done in the same way a request is made, typically in a POST operation. The data being sent to the server may or may not be encoded in the data interchange format. JavaScript provides methods for the encoding and/or decoding of data, though the implementation details differ from browser to browser. For example, XML document parsing is implemented in Internet Explorer as an ActiveX object (Microsoft.XMLDOM), while available through the document.implementation.createDocument method in other browsers. JSON on the other hand, being a subset of JavaScript, can be parsed through a simple call to the eval() function in all JavaScript enabled browsers, though this presents security risks. There is a JavaScript library that handles the parsing and encoding of JSON data without the security concerns of eval(), available at http://www.JSON.org/json2.js.

While this communication is on-going, JavaScript remains responsive to user interaction on the client (assuming asynchronousity) and will continue to manipulate the DOM, using the JavaScript HTML DOM objects, based on user events or incoming data from the server.

Ajax Libraries

One issue developers face when creating Ajax web applications, is that different browsers offer varying levels of standards compliance, and functions of the these clients are implemented, at times, in drastically different ways. For example, note the dissimilarities between the XML parsing features of Internet Explorer and other browsers mentioned above.

Ajax libraries can help mask these browser differences and dramatically reduce the effort required to implement Ajax web applications by simplifying many techniques and processes for the developer. These libraries are either server-side libraries written in the server language of choice, or client-side libraries, which are typically written in JavaScript. Both types share common goals, but reach them in different ways.

Server-side libraries will usually generate JavaScript code dynamically which is used by the client to make calls to specific, exposed server functions, while client-side libraries provide a static set of functions and objects to simplify the general method in which server calls are made. There are advantages to both approaches. The server-side technique can significantly reduce the effort required by the developer to implement the client component of the application. Client-side libraries typically offer more flexibility in how server calls are made, offer server language independence, and usually include an abundance of other features the developer can utilize for managing the user interface. Of course, there is nothing preventing the developer from employing both server-side and client-side libraries within the application, obtaining the advantages of each.

There are numerous Ajax libraries available for developers today, written in a wide range of languages for a variety of platforms. A few of these libraries are listed below.

Dojo (site) - A client-side JavaScript library.
DWR (site) - A server-side library for Java.

jQuery (site) - A client-side JavaScript library.
Prototype (site) - A client-side JavaScript library.

xAjax (site) - A server-side PHP library.

Advantages of Ajax Applications

Ajax techniques can dramatically reduce server load and provide for a more responsive user experience. Traditional web sites reload the entire page, or an entirely new page, each time the user requests additional information that is not present on the currently loaded page. Loading a web page most often results in multiple connections being opened to the server, and a full page's worth of text, images, and other content being sent to the client. By contrast, when the web application handles a user's request with Ajax technologies, the current page remains loaded while only a single background connection is opened to the server, over which only the needed data is sent. Fewer connections and less data allow for a much faster response to the user's request, while at the same time lessening the burden on the server.

Another advantage of Ajax relates to the web's stateless nature. When a new page is loaded, the context of the request that lead the browser there, or the state of the previous page are not readily known (though there are techniques to overcome this). Ajax web applications overcome this statelessness by maintaining the loaded page while additional data is sent and received as needed. Until the client is directed to a new page, all state and context changes can be tracked within JavaScript or the DOM.

Disadvantages of Ajax Applications

Many of today's browser features (such as bookmarking and history) rely on content being associated with a URL (uniform resource locator). In an Ajax web application, there is no URL to identify content that is loaded dynamically from the server. Loading the content will not trigger the browser to make a history entry, and if the user were to bookmark the page once the content was loaded, then later returned using that bookmark, the page would load but the dynamic content they might expect to see would not be present. They would need to retrace the steps taken previously to access the content again. There are solutions to these problems, but unlike traditional web sites, the developer needs to explicitely support these browser features. Hidden iFrames can be used to trigger browser history entries, and URL fragment identifiers (the text in a URL that follows the # symbol) can be used to provide a bookmarkable URL for dynamic content.

Ajax web applications require modern, full-featured web browsers to function properly; therefore, the limitations of some clients and devices will prohibit them from being able to access these applications. This includes, among other things, mobile phones and PDAs; although, increasingly these small platforms are gaining the needed features to support Ajax.

Another issue is that for the web application to function properly, JavaScript must be supported and enabled. This poses a problem for limited clients (as stated above), for clients who have disabled JavaScript, and for search engines, which do not execute JavaScript while indexing the Internet.

There are solutions to each of these problems. One solution involves developing the web application so that it can fall back to other methods when Ajax is not supported. For example, a link that, when clicked, uses Ajax to pull information on an item from the server and display it to the user, could also have an HREF attribute that contains a URL that can be navigated to directly to load the item's information. In this example, a client that supports Ajax will see the item loaded dynamically, and will ignore the HREF attribute, while a client with JavaScript disabled, or a search engine, will use the HREF attribute to navigate directly to the page containing the item's information.

Alternatives to Ajax

There are other products that, while they may not fall under the traditional umbrella of Ajax technologies, offer similar feature sets. Some alternatives to the standard Ajax family include:

Flash (site)
JavaFX (site)
Silverlight (site)

Reverse Ajax

A relatively new term in the Ajax vocabular is Reverse Ajax. The term was coined by the DWR project in the first milestone release of DWR 2.0, and is known by several other names, including Comet, Ajax Push, slow loading, and streaming Ajax among others. [1]

A common technique used in traditional Ajax applications when clients are looking for updates from the server is polling. Once the page is loaded, the server is polled on a fixed interval for updates. At each interval, a connection is opened and if updates are available they are sent to the client.

Reverse Ajax supplies an alternative to this that offers real-time updates to clients, with less traffic, by maintaining an open connection between the server and client. This is accomplished by the server not releasing the connection initially established by the client when the page is requested, and the connection can be kept open for an indefinite amount of time. Once the server has an update to supply a connected client, it is sent instantly over the existing open connection. This avoids both the latency in establishing connections, and the delay between polls.