• Choose a category
• All
• Classic-Fiction

COM objects are external components that require explicit permission—safe for scripting—to run inside of a Web browser. The XMLHttpRequest object is certainly a safe component, but to enable it users need to decrease their security settings and accept any other component “ declared” safe for scripting that is hanging around the Web sites they visit. The XMLHttpRequest object has finally become a browser object with Internet Explorer 7.0. All potential security concerns are therefore removed at the root.

Today, the XMLHttpRequest object is part of the browser object model and is exposed out of the window object. As a result, it can be instantiated through the classic new operator:

// The object name requires XML in capital letters

var proxy = new XMLHttpRequest();

When the browser is Internet Explorer (up to version 6.0), the XMLHttpRequest object must be instantiated using the ActiveXObject wrapper, as shown here:

var proxy = new ActiveXObject("Microsoft.XmlHttp");

Generally, Ajax frameworks (and JavaScript libraries with Ajax support, such as jQuery) check the current browser and then decide which route to take.

Using the XMLHttpRequest Object

The XMLHttpRequest object is designed to perform one key operation: send an HTTP request. The request can be sent either synchronously or asynchronously. The following bit of code shows the programming interface of the object as it results from the W3C working draft at the time of this writing:

interface XMLHttpRequest

{

function onreadystatechange;

readonly unsigned short readyState;

void open(string method, string url);

void open(string method, string url, bool async);

void open(string method, string url, bool async, string user);

void open(string method, string url, bool async,

string user, string pswd);

void setRequestHeader(string header, string value);

void send(string data);

void send(Document data);

void abort();

string getAllResponseHeaders();

string getResponseHeader(string header);

string responseText;

Document responseXML;

unsigned short status;

string statusText;

};

Using the component is a two-step operation. First, you open a channel to the URL and specify the method (GET, POST, or other) to use and specify whether you want the request to execute asynchronously. Next, you set any required header and send the request. If the request is a POST, you pass to the send method the body of the request.

The send method returns immediately in the case of an asynchronous operation. You write an onreadystatechange function to check the status of the current operation and, using that function, figure out when it is done. The following code shows how to carry on a POST request using the XMLHttpRequest object:

var xmlRequest, e;

try

{

xmlRequest = new XMLHttpRequest();

}

catch(e)

{

try

{

xmlRequest = new ActiveXObject("Microsoft.XMLHTTP");

}

catch(e)

{

}

}

// Prepare for a synchronous POST request

var body = null; // An empty request body this time...

xmlRequest.open("POST", pageUrl, false);

xmlRequest.setRequestHeader("Content-Type",

"application/x-www-form-urlencoded");

xmlRequest.send(body);

In a synchronous call, the send method returns when the response has been fully downloaded and parsed by the object. You can access it as a plain string using the responseText property. If the response is an XML stream, you can have it exposed as an XML DOM object using the responseXml property.

Important

If you’re going to use any Ajax-enabled framework for building Web applications, you’ll hardly hear anything about the XMLHttpRequest object, much less use it directly in your own code. An Ajax framework completely encapsulates this object and shields page authors and application designers from it. You don’t need to know about XMLHttpRequest to write great Ajax applications, no matter how complex and sophisticated they are. However, knowing the fundamentals of XMLHttpRequest can lead you to a better and more thorough