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>

Try it yourself using JavaScript

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.

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.

Ektron CMS400.NET Version 7.6 delivers all of the flexibility and features you need to deploy the Web site you want, quickly and efficiently. learn more...       6 ways to take your site to the next level with Ektron: Create site stickiness through social networking. Keep it personal, relevant and interactive and they'll come back for more. Keep it open. Your site needs to be ready and able to connect to outside services. Ektron's open API gives you maximum flexibility. Streamline content and document management. Users need to quickly and intuitively find and add information. Empower your content authors. Reduce IT bottlenecks by allowing business users to create and edit Web content and forms. Climb to the top of search rankings. SEO tools, URL aliasing and eCommerce for your digital marketing strategy Add powerful Web 2.0 tools like blogs, wikis, forums, geo-mapping, rating systems and RSS feeds easily. See why there are 20,000+ Ektron integrations worldwide. Request an INSTANT DEMO or download a FREE TRIAL today.