The XMLHttpRequest Object
The XMLHttpRequest object provides a way to communicate with a server after a web page has loaded.
What is the XMLHttpRequest Object?
The XMLHttpRequest object is the developer’s dream, because you can:
- Update a web page with new data without reloading the page
- Request data from a server after the page has loaded
- Receive data from a server after the page has loaded
- Send data to a server in the background
The XMLHttpRequest object is supported in all modern browsers.
Example: XML
HTTP communication with a server while typing input
Creating an XMLHttpRequest Object
Creating an XMLHttpRequest object is done with one single line of JavaScript.
In all modern browsers (including IE7):
| var xmlhttp=new XMLHttpRequest() |
In Internet Explorer 5 and 6:
| var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP") |
Example
<script type="text/javascript">
var xmlhttp;
function loadXMLDoc(url)
{
xmlhttp=null;
if (window.XMLHttpRequest)
{// code for all new browsers
xmlhttp=new XMLHttpRequest();
}
else if (window.ActiveXObject)
{// code for IE5 and IE6
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
if (xmlhttp!=null)
{
xmlhttp.onreadystatechange=state_Change;
xmlhttp.open("GET",url,true);
xmlhttp.send(null);
}
else
{
alert("Your browser does not support XMLHTTP.");
}
}
function state_Change()
{
if (xmlhttp.readyState==4)
{// 4 = "loaded"
if (xmlhttp.status==200)
{// 200 = OK
// ...our code here...
}
else
{
alert("Problem retrieving XML data");
}
}
}
</script>
|
|
Note: onreadystatechange is an event handler. The value (state_Change) is the name of a function which is
triggered when the state of the XMLHttpRequest object changes. States run from 0 (uninitialized) to 4 (complete). Only when the state = 4, we can execute our code.
Why Use Async=true?
Our examples use "true" in the third parameter of open().
This parameter specifies whether the request should be handled asynchronously.
True means that the script continues to run after the send() method, without waiting for a response from the server.
The onreadystatechange event complicates the code. But it is the safest way if you want to prevent the code from stopping if you don't get a response from the server.
By setting the parameter to "false", you can avoid the extra onreadystatechange code. Use this if it's not important to execute the rest of the code if the request fails.
Try it yourself using JavaScript
More Examples
Load a textfile into a div element with XML HTTP
Make a HEAD request with XML HTTP
Make a specified HEAD request with XML HTTP
Display an XML file as an HTML table
Is the XMLHttpRequest Object a W3C Standard?
The XMLHttpRequest object is not specified in any W3C recommendation.
However, the W3C DOM Level 3 "Load and Save" specification contains some similar functionality, but these are not implemented in any browsers yet.
 |
W3Schools' Online Certification Program
The perfect solution for professionals who need to balance work, family, and career building.
More than 3500 certificates already issued!
|
The HTML Certificate documents your knowledge of HTML, XHTML, and CSS.
The JavaScript Certificate documents your knowledge of JavaScript and HTML DOM.
The XML Certificate documents your knowledge of XML, XML DOM and XSLT.
The ASP Certificate documents your knowledge of ASP, SQL, and ADO.
The PHP Certificate documents your knowledge of PHP and SQL (MySQL).
| 
