Skip Links

Network World

  • Social Web 
  • Email 
  • Close

(Comma separation for multiple addresses)
Your Message:

Better UIs with XMLHttpRequest

The XMLHttpRequest de facto standard
Web Applications Alert By Mark Gibbs , Network World , 06/27/2005
Gibbs
Sign up for this newsletter now!

Mark Gibbs shares Web site tips and provides advice on getting the most out of your apps.

  • Share/Email
  • Tweet This
  • Comment
  • Print

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.

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

  • Share/Email
  • Tweet This
  • Comment
  • Print
Comment
Login
Forgot your account info?
Add comment
Anonymous comments subject to approval. Register here for member benefits.
Have a NetworkWorld account? Log in here. Register now for a free account.

Videos

rssRss Feed