Better UIs with XMLHttpRequest

Mark Gibbs' Web site tips, plus network applications news headlines

On Apple's Web site, there's a demo (see editorial links below) of using an object that you might not have encountered before. The object is XMLHttpRequest and what you see in the demo ("Reading XML Data from iTunes RSS Feeds") is a list being retrieved from a server in the background by a JavaScript-created HTTP request. The data returned by the object is then used to update the Web page without rewriting the entire page.

The only service like this object is the proposed W3C DOM Level 3 Load and Save specification, which is some way from completion. The XMLHttpRequest will still be used even when the W3C spec is finalized, as it has become a de facto standard.

Because there is no standard for XMLHttpRequest there are two methods for instantiating the object. Internet Explorer uses an ActiveX object:

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.

On Apple's Web site, there's a demo (see editorial links below) of using an object that you might not have encountered before. The object is XMLHttpRequest and what you see in the demo ("Reading XML Data from iTunes RSS Feeds") is a list being retrieved from a server in the background by a JavaScript-created HTTP request. The data returned by the object is then used to update the Web page without rewriting the entire page.

The only service like this object is the proposed W3C DOM Level 3 Load and Save specification, which is some way from completion. The XMLHttpRequest will still be used even when the W3C spec is finalized, as it has become a de facto standard.

Because there is no standard for XMLHttpRequest there are two methods for instantiating the object. Internet Explorer uses an ActiveX object:

var request = new ActiveXObject("Microsoft.XMLHTTP");

While for Mozilla and Safari, there is a native object:

var request = new XMLHttpRequest();

This means, of course, that your Web page will need to support both objects with code something like this:

var request;

function loadXMLDoc(url)
{
    // use native XMLHttpRequest object
    if (window.XMLHttpRequest) {
        request = new XMLHttpRequest();
        request.onreadystatechange = processReqChange;
        request.open("GET", url, true);
        request.send(null);
    // use IE/Windows ActiveX version
    } else if (window.ActiveXObject) {
        request = new ActiveXObject("Microsoft.XMLHTTP");
        if (request) {
            request.onreadystatechange = processReqChange;
            request.open("GET", url, true);
            request.send();
        }
    }
}

See the Apple Developer Connection and XML.com articles for details of the methods and properties of the XMLHttpRequest object.

There are some subtleties to using this object that we don't have the space to go into but overall the techniques involved aren't that difficult and the improvement in the user interface look and feel is tremendous.

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

Mark Gibbs is a consultant, author, journalist, columnist and blogger.