How an AJAX application works

The key to AJAX is the XMLHttp Request (XHR) object, which can be invoked to send and receive XML and plain text data synchronously and asynchronously via HTTP. Whether implemented natively, in the case of standards-oriented browsers, such as Firefox, Safari, Opera and Internet Explorer 7, or as an ActiveX control in older versions of Internet Explorer, support is consistent enough so you can — with a little work — write cross-browser AJAX applications.

In April, the de facto use of the XHR object gained official support from the World Wide Web Consortium, a condition that likely will ensure the future of the technology for some time.

The general flow of any AJAX application is fairly consistent. First, you create an XHR object. Next, you form an HTTP request packet (either GET or POST) to be sent to a server-side program. In this request, you send the appropriate payload in the form of a query string or name-value pairs in a message body in the case of POST request.

To continue reading, register here and become an Insider. You'll get free access to premium content from CIO, Computerworld, CSO, InfoWorld, and Network World. See more Insider content or sign in.

The key to AJAX is the XMLHttp Request (XHR) object, which can be invoked to send and receive XML and plain text data synchronously and asynchronously via HTTP. Whether implemented natively, in the case of standards-oriented browsers, such as Firefox, Safari, Opera and Internet Explorer 7, or as an ActiveX control in older versions of Internet Explorer, support is consistent enough so you can — with a little work — write cross-browser AJAX applications.

In April, the de facto use of the XHR object gained official support from the World Wide Web Consortium, a condition that likely will ensure the future of the technology for some time.

The general flow of any AJAX application is fairly consistent. First, you create an XHR object. Next, you form an HTTP request packet (either GET or POST) to be sent to a server-side program. In this request, you send the appropriate payload in the form of a query string or name-value pairs in a message body in the case of POST request.

You then send your request indicating whether it should block as a synchronous request or be performed asynchronously.

A registered callback function then will be invoked as the state of the request changes. This is important in the case of an asynchronous request so that the browser can “wake up” and deal with incoming data.

On the server side, the request will be read and an appropriate response often, though not required, will be sent back in XML format. Once the browser receives the response packet, the registered callback function will use the data, potentially parsing it out with various Document Object Model methods and making dynamic page updates as need be.

Read more about software in Network World's Software section.