Tutorials References Menu

XML Tutorial

XML HOME XML Introduction XML How to use XML Tree XML Syntax XML Elements XML Attributes XML Namespaces XML Display XML HttpRequest XML Parser XML DOM XML XPath XML XSLT XML XQuery XML XLink XML Validator XML DTD XML Schema XML Server XML Examples

XML AJAX

AJAX Introduction AJAX XMLHttp AJAX Request AJAX Response AJAX XML File AJAX PHP AJAX ASP AJAX Database AJAX Applications AJAX Examples

XML DOM

DOM Introduction DOM Nodes DOM Accessing DOM Node Info DOM Node List DOM Traversing DOM Navigating DOM Get Values DOM Change Nodes DOM Remove Nodes DOM Replace Nodes DOM Create Nodes DOM Add Nodes DOM Clone Nodes DOM Examples

XPath Tutorial

XPath Introduction XPath Nodes XPath Syntax XPath Axes XPath Operators XPath Examples

XSLT Tutorial

XSLT Introduction XSL Languages XSLT Transform XSLT <template> XSLT <value-of> XSLT <for-each> XSLT <sort> XSLT <if> XSLT <choose> XSLT Apply XSLT on the Client XSLT on the Server XSLT Edit XML XSLT Examples

XQuery Tutorial

XQuery Introduction XQuery Example XQuery FLWOR XQuery HTML XQuery Terms XQuery Syntax XQuery Add XQuery Select XQuery Functions

XML DTD

DTD Introduction DTD Building Blocks DTD Elements DTD Attributes DTD Elements vs Attr DTD Entities DTD Examples

XSD Schema

XSD Introduction XSD How To XSD <schema> XSD Elements XSD Attributes XSD Restrictions

XSD Complex

XSD Elements XSD Empty XSD Elements Only XSD Text Only XSD Mixed XSD Indicators XSD <any> XSD <anyAttribute> XSD Substitution XSD Example

XSD Data

XSD String XSD Date XSD Numeric XSD Misc XSD Reference

Web Services

XML Services XML WSDL XML SOAP XML RDF XML RSS

References

DOM Node Types DOM Node DOM NodeList DOM NamedNodeMap DOM Document DOM Element DOM Attribute DOM Text DOM CDATA DOM Comment DOM XMLHttpRequest DOM Parser XSLT Elements XSLT/XPath Functions

XML HttpRequest


All modern browsers have a built-in XMLHttpRequest object to request data from a server.


The XMLHttpRequest Object

The XMLHttpRequest object can be used to request data from a web server.

The XMLHttpRequest object is a developers dream, because you can:

  • Update a web page 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

XMLHttpRequest Example

When you type a character in the input field below, an XMLHttpRequest is sent to the server, and some name suggestions are returned (from the server):

Example

Start typing a name in the input field below:

Name:   Suggestions:

The example above is explained in the AJAX chapters of this tutorial.


Sending an XMLHttpRequest

A common JavaScript syntax for using the XMLHttpRequest object looks much like this:

Example

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
       // Typical action to be performed when the document is ready:
       document.getElementById("demo").innerHTML = xhttp.responseText;
    }
};
xhttp.open("GET", "filename", true);
xhttp.send();
Try it Yourself »


Example Explained

The first line in the example above creates an XMLHttpRequest object:

var xhttp = new XMLHttpRequest();

The onreadystatechange property specifies a function to be executed every time the status of the XMLHttpRequest object changes:

xhttp.onreadystatechange = function()

When readyState property is 4 and the status property is 200, the response is ready:

if (this.readyState == 4 && this.status == 200)

The responseText property returns the server response as a text string.

The text string can be used to update a web page:

document.getElementById("demo").innerHTML = xhttp.responseText;

You will learn a lot more about the XMLHttpRequest object in the AJAX chapters of this tutorial.


Old Versions of Internet Explorer (IE5 and IE6)

Old versions of Internet Explorer (IE5 and IE6) do not support the XMLHttpRequest object.

To handle IE5 and IE6, check if the browser supports the XMLHttpRequest object, or else create an ActiveXObject:

Example

if (window.XMLHttpRequest) {
    // code for modern browsers
    xmlhttp = new XMLHttpRequest();
 } else {
    // code for old IE browsers
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
Try it Yourself »