The XMLHttpRequest object provides a way to communicate with a server after a web page has loaded. What is the XMLHttpRequest Object? The ...
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
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", your can avoid the extra onreadystatechange code. Use this if it's not important to execute the rest of the code if the request fails.
