The XMLHttpRequest Object

With an XMLHttpRequest you can communicate with your server from inside a web page.

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 and receive new data from a server after the page has loaded
 Communicate with a server in the background

XMLHttpRequest Example
When you type in the input box below, an HTTP request is sent to the server and name
suggestions are returned from a name list:

Type a letter in the input box:

First Name

Suggestions:

Creating an XMLHttpRequest Object

Creating an XMLHttpRequest object is done with one single line of JavaScript.

In all modern browsers:

var xmlhttp=new XMLHttpRequest()

In older Microsoft browsers (IE 5 and 6):

var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP")

In the next chapter, we will use the XMLHttpRequest object to retrieve XML information from a server.

The XMLHttpRequest object is supported in all modern browsers

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.

XML Parser
Most browsers have a built-in XML parser to read and manipulate XML.

The parser converts XML into a JavaScript accessible object (the XML DOM).

XML Parser
The XML DOM contains methods (functions) to traverse XML trees, access, insert, and delete
nodes.

However, before an XML document can be accessed and manipulated, it must be loaded into an
XML DOM object.

An XML parser reads XML, and converts it into an XML DOM object that can be accessed with
JavaScript.

Most browsers have a built-in XML parser.

Load an XML Document

The following JavaScript fragment loads an XML document ("books.xml"):

Example
if (window.XMLHttpRequest)
 {
  xhttp=new XMLHttpRequest();
 }
else // Internet Explorer 5/6
 {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xhttp.open("GET","books.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

Try it yourself »

Code explained:

 Create an XMLHTTP object

 Open the XMLHTTP object
 Send an XML HTTP request to the server
 Set the response as an XML DOM object

Load an XML String

The following code loads and parses an XML string:

Example

if (window.DOMParser)
 {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(text,"text/xml");
 }
else // Internet Explorer
 {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(text);
 }

Try it yourself »
Note: Internet Explorer uses the loadXML() method to parse an XML string, while other
browsers use the DOMParser object.

Access Across Domains

For security reasons, modern browsers do not allow access across domains.

This means, that both the web page and the XML file it tries to load, must be located on the same
server.

The examples on W3Schools all open XML files located on the W3Schools domain.

If you want to use the example above on one of your web pages, the XML files you load must be
located on your own server.

The XML DOM

In the next chapter of this tutorial, you will learn how to access and retrieve data from the XML
document object (the XML DOM).

XML DOM
The DOM (Document Object Model) defines a standard way for accessing and manipulating
documents.

The XML DOM

The XML DOM (XML Document Object Model) defines a standard way for accessing and
manipulating XML documents.

The DOM views XML documents as a tree-structure. All elements can be accessed through the
DOM tree. Their content (text and attributes) can be modified or deleted, and new elements can
be created. The elements, their text, and their attributes are all known as nodes.
In the examples below we use the following DOM reference to get the text from the <to>
element:

xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue

 xmlDoc - the XML document created by the parser.

 getElementsByTagName("to")[0] - the first <to> element
 childNodes[0] - the first child of the <to> element (the text node)
 nodeValue - the value of the node (the text itself)

You can learn more about the XML DOM in our XML DOM tutorial.

The HTML DOM

The HTML DOM (HTML Document Object Model) defines a standard way for accessing and
manipulating HTML documents.

All HTML elements can be accessed through the HTML DOM.

In the examples below we use the following DOM reference to change the text of the HTML
element where id="to":

document.getElementById("to").innerHTML=

 document - the HTML document

 getElementById("to") - the HTML element where id="to"
 innerHTML - the inner text of the HTML element

You can learn more about the HTML DOM in our HTML DOM tutorial.

Load an XML File - A Cross browser Example

The following code loads an XML document ("note.xml") into the XML parser:

Example

<html>
<body>
<h1>W3Schools Internal Note</h1>
<p><b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span>

<script type="text/javascript">
if (window.XMLHttpRequest)
 {
  xhttp=new XMLHttpRequest()
 }
else
 {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP")
 }
xhttp.open("GET","note.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>

</body>
</html>

Try it yourself »

Important Note
To extract the text "Jani" from the XML, the syntax is:

getElementsByTagName("from")[0].childNodes[0].nodeValue

In the XML example there is only one <from> tag, but you still have to specify the array index
[0], because the XML parser method getElementsByTagName() returns an array of all <from>
nodes.

Load an XML String - A Cross browser Example

The following code loads and parses an XML string:

Example

<html>
<body>
<h1>W3Schools Internal Note</h1>
<p><b>To:</b> <span id="to"></span><br />
<b>From:</b> <span id="from"></span><br />
<b>Message:</b> <span id="message"></span></p>

<script>
text="<note>";
text=text+"<to>Tove</to>";
text=text+"<from>Jani</from>";
text=text+"<heading>Reminder</heading>";
text=text+"<body>Don't forget me this weekend!</body>";
text=text+"</note>";

if (window.DOMParser)
 {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(text,"text/xml");
 }
else // Internet Explorer
 {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async="false";
  xmlDoc.loadXML(text);
 }

document.getElementById("to").innerHTML=
xmlDoc.getElementsByTagName("to")[0].childNodes[0].nodeValue;
document.getElementById("from").innerHTML=
xmlDoc.getElementsByTagName("from")[0].childNodes[0].nodeValue;
document.getElementById("message").innerHTML=
xmlDoc.getElementsByTagName("body")[0].childNodes[0].nodeValue;
</script>
</body>
</html>

Try it yourself »

Note: Internet Explorer uses the loadXML() method to parse an XML string, while other
browsers use the DOMParser object.
XML to HTML
This chapter explains how to display XML data as HTML.

Display XML Data in HTML

In the example below, we loop through an XML file (cd_catalog.xml), and display each CD
element as an HTML table row:

Example

<html>
<body>

<script type="text/javascript">
if (window.XMLHttpRequest)
 {
  xhttp=new XMLHttpRequest();
 }
else // Internet Explorer 5/6
 {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xhttp.open("GET","cd_catalog.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
 {
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
 }
document.write("</table>");
</script>

</body>
</html>
Try it yourself »

Example explained
 We check the browser, and load the XML using the correct parser (explained in the
previous chapter)
 We create an HTML table with <table border="1">
 We use getElementsByTagName() to get all XML CD nodes
 For each CD node, we display data from ARTIST and TITLE as table data.
 We end the table with </table>

For more information about using JavaScript and the XML DOM, visit our XML DOM tutorial.

XML Application

This chapter demonstrates a small XML application built with HTML and JavaScript.

The XML Example Document

Look at the following XML document ("cd_catalog.xml"), that represents a CD catalog:

<?xml version="1.0" encoding="ISO-8859-1"?>

<CATALOG>
  <CD>
    <TITLE>Empire Burlesque</TITLE>
    <ARTIST>Bob Dylan</ARTIST>
    <COUNTRY>USA</COUNTRY>
    <COMPANY>Columbia</COMPANY>
    <PRICE>10.90</PRICE>
    <YEAR>1985</YEAR>
  </CD>
.
.
.
View the full "cd_catalog.xml" file.

Load the XML Document

To load the XML document (cd_catalog.xml), we use the same code as we used in the XML
Parser chapter:

if (window.XMLHttpRequest)
 {
  xhttp=new XMLHttpRequest();
 }
else // Internet Explorer 5/6
 {
  xhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xhttp.open("GET","cd_catalog.xml",false);
xhttp.send("");
xmlDoc=xhttp.responseXML;

After the execution of this code, xmlDoc is an XML DOM object, accessible by JavaScript.

Display XML Data as an HTML Table

The following code displays an HTML table filled with data from the XML DOM object:

Example

document.write("<table border='1'>");
var x=xmlDoc.getElementsByTagName("CD");
for (i=0;i<x.length;i++)
 {
  document.write("<tr><td>");
  document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
  document.write("</td><td>");
  document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
  document.write("</td></tr>");
 }
document.write("</table>");

Try it yourself »
For each CD element in the XML document, a table row is created. Each table row contains two
table data with ARTIST and TITLE from the current CD element.

Display XML Data in any HTML Element

XML data can be copied into any HTML element that can display text.

The code below is part of the <head> section of the HTML file. It gets the XML data from the first <CD>
element and displays it in the HTML element with the id="show":

Example

var x=xmlDoc.getElementsByTagName("CD");
i=0;

function display()
{
artist=(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue);
title=(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue);
year=(x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue);
txt="Artist: " + artist + "<br />Title: " + title + "<br />Year: "+ year;
document.getElementById("show").innerHTML=txt;
}

The body of the HTML document contains an onload event attribute that calls the display()
function when the page is loaded. It also contains a <div id='show'> element to receive the
XML data.

<body onload="display()">

<div id='show'></div>

</body>

Try it yourself »

In the example above, you will only see data from the first CD element in the XML document.
To navigate to the next CD element, you have to add some more code. 

Add a Navigation Script

To add navigation to the example above, create two functions called  next() and previous():
Example

function next()
{
if (i<x.length-1)
  {
  i++;
  display();
  }
}

function previous()
{
if (i>0)
  {
  i--;
  display();
  }
}

The next() function displays the next CD, unless you are on the last CD element.
The previous() function displays the previous CD, unless you are at the first CD element.

The next() and previous() functions are called by clicking next/previous buttons:

<input type="button" onclick="previous()" value="previous" />

<input type="button" onclick="next()" value="next" />

Try it yourself »

All Together Now

With a little creativity you can create a full application.

If you use what you have learned on this page, and a little imagination, you can easily develop
this into a full application.

Try it yourself: See how you can add a little fancy to this application.

For more information about using JavaScript and the XML DOM, visit our XML DOM tutorial.