The XMLHttpRequest Object

What is the XMLHttpRequest Object?

The XMLHttpRequest object is the developers 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.

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.

XML DOM

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 element:

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

* xmlDoc - the XML document created by the parser.
* getElementsByTagName("to")[0] - the first element
* childNodes[0] - the first child of the 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

XML Parser

Parsing XML

All modern browsers have a build-in XML parser that can be used to read and manipulate XML.

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

You will learn more about the XML DOM in the next chapter of this tutorial.

There are some differences between Microsoft's XML parser and the parsers used in other browsers. The Microsoft parser supports loading of both XML files and XML strings (text), while other browsers use separate parsers. However, all parsers contain functions to traverse XML trees, access, insert, and delete nodes (elements) and their attributes.

In this tutorial we will show you how to create scripts that will work in both Internet Explorer and other browsers.

Note: When we talk about parsing XML, we often use the term "Nodes" about XML elements.
Loading XML with Microsoft's XML Parser

Microsoft's XML parser is built into Internet Explorer 5 and higher.

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

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.load("note.xml");

Example explained:

* The first line of the script above creates an empty Microsoft XML document object.
* The second line turns off asynchronized loading, to make sure that the parser will not continue execution of the script before the document is fully loaded.
* The third line tells the parser to load an XML document called "note.xml".

The following JavaScript fragment loads a string called txt into the parser:

var xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
xmlDoc.async="false";
xmlDoc.loadXML(txt);

Note: The loadXML() method is used for loading strings (text), load() is used for loading files.
XML Parser in Firefox and Other Browsers

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

var xmlDoc=document.implementation.createDocument("","",null);
xmlDoc.async="false";
xmlDoc.load("note.xml");

Example explained:

* The first line of the script above creates an empty XML document object.
* The second line turns off asynchronized loading, to make sure that the parser will not continue execution of the script before the document is fully loaded.
* The third line tells the parser to load an XML document called "note.xml".

The following JavaScript fragment loads a string called txt into the parser:

var parser=new DOMParser();
var doc=parser.parseFromString(txt,"text/xml");

Example explained:

* The first line of the script above creates an empty XML document object.
* The second line tells the parser to load a string called txt.

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