Skip to content
Search

JavaScript:XMLHttpRequest

lastmod 2019-08-14created 2019-08-143 edits

The XMLHttpRequest (XHR) object is used to interact with servers. It lets you retrieve data from a URL without a full page refresh. This allows a web page to update just part of the page without disrupting what the user is doing. XMLHttpRequest is mainly used in AJAX programming.

Example

Browsers (and Dashcode) provide an XMLHttpRequest object which can be used to make HTTP requests from JavaScript:

function httpGet(theUrl)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.open( "GET", theUrl, false ); // false for synchronous request
    xmlHttp.send( null );
    return xmlHttp.responseText;
}

However, synchronous requests are discouraged and will generate a warning along the lines of:

Note: Starting with Gecko 30.0 (Firefox 30.0 / Thunderbird 30.0 / SeaMonkey 2.27), synchronous requests on the main thread have been deprecated due to the negative effects to the user experience.

You should make an asynchronous request and handle the response inside an event handler.

function httpGetAsync(theUrl, callback)
{
    var xmlHttp = new XMLHttpRequest();
    xmlHttp.onreadystatechange = function() { 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200)
            callback(xmlHttp.responseText);
    }
    xmlHttp.open("GET", theUrl, true); // true for asynchronous 
    xmlHttp.send(null);
}

See also

Favorite site

author Zer0 sitemap