The WebPlatform project has been discontinued when the Stewards partnership agreement ended in September 2015. This site has been frozen, and the assets we have created will remain.


< apis‎ | xhr
Jump to: navigation, search


This article is Ready to Use.

W3C Working Draft


XMLHttpRequest allows JavaScript to make HTTP requests, and is the most basic part of AJAX. It allows a website to dynamically request more content, without reloading the entire page.


The XMLHttpRequest property is available on the window object.

var xhr = new XMLHttpRequest();

With the XMLHttpRequest object, clients can make HTTP requests to a URL without reloading the entire page. Despite the term "XML" in the name, this object can be used to retrieve any type of data.


API Name Summary
response Returns the response entity body, which is the fragment of the entity body of the response received so far (if LOADING) or the complete entity body of the response (if DONE).


API Name Summary
open Initializes an XMLHttpRequest.
send Initiates the request defined by the XMLHttpRequest.


API Name Summary
abort When the request has been aborted. For instance, by invoking the abort() method.
progress While sending and loading data.
readystatechange Fires whenever the readyState of the request changes. Mostly used to determine whether the body of the response is available for handling.
timeout When the author specified timeout has passed before the request could complete.


The following script demonstrates how to create and use the XMLHttpRequest object. For best client-side performance, the request is asynchronous and uses an onreadystatechange event handler to process the data returned by the call.


function handler() {
  if (xhr.readyState === 4 /* complete */) {
    if (xhr.status === 200) {
var xhr = new XMLHttpRequest();"GET", "http://localhost/test.xml", true);
xhr.onreadystatechange = handler;

This script demonstrates how to access resources that sits on a different domain. Example: gets resource from


// Create the XHR object.
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari., url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE 9 and earlier.
    xhr = new XDomainRequest();, url);
  } else {
    // CORS not supported.
    xhr = null;
  return xhr;

// Helper method to parse the title tag from the response.
function getTitle(text) {
  return text.match('<title>(.*)?</title>')[1];

// Make the actual CORS request.
function makeCorsRequest() {
  // All HTML5 Rocks properties support CORS.
  var url = '';

  var xhr = createCORSRequest('GET', url);
  if (!xhr) {
    alert('CORS not supported');

  // Response handlers.
  xhr.onload = function() {
    var text = xhr.responseText;
    var title = getTitle(text);
    alert('Response from CORS request to ' + url + ': ' + title);

  xhr.onerror = function() {
    alert('Woops, there was an error making the request.');



 The XMLHttpRequest object can be used to make either same-origin or cross-origin requests.

Same-origin requests are subject to the browser's same-origin policy: This basically says that an XMLHttpRequest instance can make a request to a resource that lives on the same origin as the calling page.

Requests that go across origins (for example, a request from to can also be made. But in order for them to work, the destination server must support Cross-Origin Resource Sharing (CORS, These are a set of headers included in the response that indicate how a resource can be accessed across domains.

Related specifications

Specification Status Related Changes
W3C XMLHttpRequest Specification W3C Working Draft
Cross-Origin Resource Sharing W3C Candidate Recommendation 29 January 2013

See also

Related articles


  • XMLHttpRequest


This article contains content originally from external sources.

Portions of this content come from the Microsoft Developer Network: Windows Internet Explorer API reference Article

Portions of this content come from HTML5Rocks! article