XMLHttpRequest

To create a new XMLHttpRequest object is the same like creating any other object:

[js]var httpReq = new XMLHttpRequest();[/js]

above code works with Mozilla and Safari. For Internet Explorer, use the following code:

[js]var httpReq = new ActiveXObject(”Microsoft.XMLHTTP”);[/js]

The following methods work with all three browsers above:

• abort() –> stop request
• getAllResponseHeader() –> return headers set in string format
• getResponseHeader(”headerLabel”) –> return header value for specified header label
• open(”method”,”URL”[,asyncFlag[, "userName"[, "password"]]]) –> prepare data request, with destination address, request method (POST or GET), and additional request attributes. asyncFlag parameter is used to control whether the request is processed asynchronously (true) or synchronously (false).
• send(content) –> do the request.
• setRequestHeader(”label”,”value”) –> set value to speficied header label

Just remember the open and send method, and ignore the others for now. Those are what we’re going to use, and also what you’ll use all the time

Here’s a sample implementation:

[js]var req;

function loadDoc(url) {
// Mozilla/Safari
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = processReqChange;
req.open(”GET”, url, true);
req.send(null);
// IE
} else if (window.ActiveXObject) {
req = new ActiveXObject(”Microsoft.XMLHTTP”);
if (req) {
req.onreadystatechange = processReqChange;
req.open(”GET”, url, true);
req.send();
}
}
}[/js]

Look on the new term, onreadystatechange attribute. This attribute is used to control what event handler should be call when there’s a new status change on the request process. The status itself is saved on the readyState attribute.

Check the piece of code below:

[js]function processReqChange() {
if (req.readyState == 4) {
//do processing here
}
}[/js]

There are 5 possible values for readyState attribute, from 0 to 4, which mean (in ascending order): uninitialized, loading, loaded, interactive, and complete. Usually, we only need to handle the Loading status and Complete status. Other attributes for XMLHttpRequest object:

• responseText –> request result in string format
• responseXML –> request result in DOM/XML format
• status –> returned code from the server (404 – file not found, 500 – server error, etc)
• statusText –> returned status from the server

Ok, enough with the theory ) In the next part of this tutorial, we are going to make a simple web application using Ajax approach. Later

Pages: 1 2