XMLHttpRequest Object

The XMLHttpRequest object provides methods for communicating with the server after the web page has loaded.

What is the XMLHttpRequest object?

The XMLHttpRequest object isThe dream of developersbecause you can:

  • Update the web page without reloading the page
  • Request data from the server after the page has loaded
  • Receive data from the server after the page has loaded
  • Send data to the server in the background

All modern browsers support the XMLHttpRequest object.

Example:Communicate with the server when typing text.

Creating an XMLHttpRequest object

We can create an XMLHttpRequest object with a single line of JavaScript code.

In all modern browsers (including IE 7):

xmlhttp=new XMLHttpRequest()

In Internet Explorer 5 and 6:

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>

Try It Yourself

Note:The onreadystatechange is an event handler. Its value (state_Change) is the name of a function that is triggered when the state of the XMLHttpRequest object changes. The state changes from 0 (uninitialized) to 4 (complete). We only execute the code when the state is 4.

Why use Async=true ?

Our example uses "true" in the third parameter of open().

This parameter specifies whether the request is processed asynchronously.

True means the script will continue to execute after the send() method, without waiting for a response from the server.

The onreadystatechange event complicates the code. However, this is the safest way to prevent the code from stopping without getting a response from the server.

By setting this parameter to "false", you can omit additional onreadystatechange code. If it does not matter whether the rest of the code is executed when the request fails, you can use this parameter.

Try It Yourself

More examples

Load a textfile into a div element using XML HTTP

Perform a HEAD request using XML HTTP

Perform a specified HEAD request using XML HTTP

List data in XML files using XML HTTP

XML / ASP

You can also open the XML document and send it to an ASP page on the server, analyze this request, and then return the result.

<html>
<body>
<script type="text/javascript">
xmlHttp=null;
if (window.XMLHttpRequest)
  //{ code for IE7, Firefox, Opera, etc.
  xmlHttp=new XMLHttpRequest();
  }
else if (window.ActiveXObject)
  //{ code for IE6, IE5
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
if (xmlHttp!=null)
  {
  xmlHttp.open("GET", "note.xml", false);
  xmlHttp.send(null);
  xmlDoc=xmlHttp.responseText;
  xmlHttp.open("POST", "demo_dom_http.asp", false);
  xmlHttp.send(xmlDoc);
  document.write(xmlHttp.responseText);
  }
else
  {
  alert("Your browser does not support XMLHTTP.");
  }
</script>
</body>
</html>

ASP Page, written in VBScript:

<%
set xmldoc = Server.CreateObject("Microsoft.XMLDOM")
xmldoc.async=false
xmldoc.load(request)
for each x in xmldoc.documentElement.childNodes
   if x.NodeName = "to" then name=x.text
next
response.write(name)
%>

Return the result to the client by using the response.write property.

Try It Yourself

Is the XMLHttpRequest Object a W3C standard?

No W3C recommended standard specifies the XMLHttpRequest Object.

However, the 'Load and Save' specification of W3C DOM Level 3 includes some similar functional features, but none of the browsers have implemented them yet.

See Also

XML DOM Reference Manual: XMLHttpRequest Object