Better UIs with XMLHttpRequest

* The XMLHttpRequest de facto standard

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.

Learn more about this topic

XMLHttpRequest object demo

W3C DOM Level 3 Load and Save specification

Dynamic HTML and XML: The XMLHttpRequest object

Very Dynamic Web Interfaces (XMLHttpRequest discussion) 

Cisco puts focus on Web services, starting with AON

Network World, 06/27/05

JBoss upgrade eases application development

Network World, 06/27/05
Join the Network World communities on Facebook and LinkedIn to comment on topics that are top of mind.
Now read: Getting grounded in IoT