Web/API/XMLHTTPRequest/HTML in XMLHttpRequest

The W3C XMLHttpRequest specification adds HTML parsing support to XMLHttpRequest, which originally supported only XML parsing. This feature allows Web apps to obtain an HTML resource as a parsed [[../../../../Glossary/DOM|DOM]] using XMLHttpRequest.

To get an overview of how to use XMLHttpRequest in general, see Using XMLHttpRequest.

Limitations

To discourage the synchronous use of XMLHttpRequest, HTML support is not available in the synchronous mode. Also, HTML support is only available if the responseType property has been set to "document". This limitation avoids wasting time parsing HTML uselessly when legacy code uses XMLHttpRequest in the default mode to retrieve responseText for text/html resources. Also, this limitation avoids problems with legacy code that assumes that responseXML is null for HTTP error pages (which often have a text/html response body).

Usage

Retrieving an HTML resource as a DOM using XMLHttpRequest works just like retrieving an XML resource as a DOM using XMLHttpRequest, except you can't use the synchronous mode and you have to explicitly request a document by assigning the string "document" to the responseType property of the XMLHttpRequest object after calling open() but before calling send().

var xhr = new XMLHttpRequest();
xhr.onload = function() {
  console.log(this.responseXML.title);
}
xhr.open("GET", "file.html");
xhr.responseType = "document";
xhr.send();

Feature detection

Method 1

This method relies on the "force async" nature of the feature. When you try to set responseType of an XMLHttpRequest object after it is opened as "sync". This throws an error in the browsers that implement the feature and works on others.

function HTMLinXHR() {
  if (!window.XMLHttpRequest)
    return false;
  var req = new window.XMLHttpRequest();
  req.open('GET', window.location.href, false);
  try {
    req.responseType = 'document';
  } catch(e) {
    return true;
  }
  return false;
}

View on JSFiddle

This method is synchronous, does not rely on external assets though it may not be as reliable as method 2 described below since it does not check the actual feature but an indication of that feature.

Method 2

There are two challenges to detecting exactly if a browser supports HTML parsing in XMLHttpRequest. First, the detection result is obtained asynchronously, because HTML support is only available in the asynchronous mode. Second, you have to actually fetch a test document over HTTP, because testing with a data: URL would end up testing data: URL support at the same time.

Thus, to detect HTML support, a test HTML file is needed on the server. This test file is small and is not well-formed XML:

<title>&amp;&<</title>

If the file is named detect.html, the following function can be used for detecting HTML parsing support:

function detectHtmlInXhr(callback) {
  if (!window.XMLHttpRequest) {
    window.setTimeout(function() { callback(false); }, 0);
    return;
  }
  var done = false;
  var xhr = new window.XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && !done) {
      done = true;
      callback(!!(this.responseXML && this.responseXML.title && this.responseXML.title == "&&<"));
    }
  }
  xhr.onabort = xhr.onerror = function() {
    if (!done) {
      done = true;
      callback(false);
    }
  }
  try {
    xhr.open("GET", "detect.html");
    xhr.responseType = "document";
    xhr.send();
  } catch (e) {
    window.setTimeout(function() {
      if (!done) {
        done = true;
        callback(false);
      } 
    }, 0);
  }
}

The argument callback is a function that will be called asynchronously with true as the only argument if HTML parsing is supported and false as the only argument if HTML parsing is not supported.

View on JSFiddle

Character encoding

If the character encoding is declared in the HTTP Content-Type header, that character encoding is used. Failing that, if there is a byte order mark, the encoding indicated by the byte order mark is used. Failing that, if there is a <meta> element that declares the encoding within the first 1024 bytes of the file, that encoding is used. Otherwise, the file is decoded as UTF-8.

Handling HTML on older browsers

XMLHttpRequest originally supported only XML parsing. HTML parsing support is a recent addition. For older browsers, you can even use the XMLHttpRequest.responseText property in association with regular expressions in order to get, for example, the source code of an HTML element given its ID:

function getHTML (oXHR, sTargetId) {
  var  rOpen = new RegExp("<(?!\!)\\s*([^\\s>]+)[^>]*\\s+id\\=[\"\']" + sTargetId + "[\"\'][^>]*>" ,"i"),
       sSrc = oXHR.responseText, aExec = rOpen.exec(sSrc);

  return aExec ? (new RegExp("(?:(?:.(?!<\\s*" + aExec[1] + "[^>]*[>]))*.?<\\s*" + aExec[1] + "[^>]*[>](?:.(?!<\\s*\/\\s*" + aExec[1] + "\\s*>))*.?<\\s*\/\\s*" + aExec[1] + "\\s*>)*(?:.(?!<\\s*\/\\s*" + aExec[1] + "\\s*>))*.?", "i")).exec(sSrc.slice(sSrc.indexOf(aExec[0]) + aExec[0].length)) || "" : "";
}

var oReq = new XMLHttpRequest();
oReq.open("GET", "yourPage.html", true);
oReq.onload = function () { console.log(getHTML(this, "intro")); };
oReq.send(null);

Note: This solution is very expensive for the interpreter. Use it only when it is really necessary.

Specifications

Specification	Status	Comment
XMLHttpRequest	Living Standard	Initial definition

Browser compatibility

XMLHttpRequest interface

The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.

Update compatibility data on GitHub

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
XMLHttpRequest	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 7 Full support 7 Full support 5 Notes' Notes' Implemented via ActiveXObject('Microsoft.XMLHTTP')	Opera Full support 8	Safari Full support 1.2	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
abort	Chrome Full support 18	Edge Full support 12	Firefox Full support Yes	IE Full support 5	Opera Full support Yes	Safari Full support 1.2	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
abort event	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE Full support 10	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support Yes
error event	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE Full support 10	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support Yes
getAllResponseHeaders	Chrome Full support 1	Edge Full support 12	Firefox Full support 4 Notes' Full support 4 Notes' Notes' Starting from Firefox 49, empty headers are returned as empty strings in case the preference network.http.keep_empty_response_headers_as_empty_string is set to true, defaulting to false. Before Firefox 49 empty headers had been ignored. Since Firefox 50 the preference defaults to true.	IE Full support 5	Opera Full support Yes	Safari Full support 1.2	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support 4 Notes' Full support 4 Notes' Notes' Starting from Firefox 49, empty headers are returned as empty strings in case the preference network.http.keep_empty_response_headers_as_empty_string is set to true, defaulting to false. Before Firefox 49 empty headers had been ignored. Since Firefox 50 the preference defaults to true.	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
getResponseHeader	Chrome Full support 1	Edge Full support 12	Firefox Full support 1 Notes' Full support 1 Notes' Notes' Starting from Firefox 49, empty headers are returned as empty strings in case the preference network.http.keep_empty_response_headers_as_empty_string is set to true, defaulting to false. Before Firefox 49 empty headers had been ignored. Since Firefox 50 the preference defaults to true.	IE Full support 5	Opera Full support 8	Safari Full support 1.2	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4 Notes' Full support 4 Notes' Notes' Starting from Firefox 49, empty headers are returned as empty strings in case the preference network.http.keep_empty_response_headers_as_empty_string is set to true, defaulting to false. Before Firefox 49 empty headers had been ignored. Since Firefox 50 the preference defaults to true.	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
load event	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE Full support 9	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support Yes
loadend event	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE Full support 10	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support Yes
loadstart event	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE Full support 10	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support Yes
onreadystatechange	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 5	Opera Full support 9	Safari Full support 1.2	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
open	Chrome Full support 1	Edge Full support 12	Firefox Full support 1 Notes' Full support 1 Notes' Notes' Starting in Firefox 30, synchronous requests on the main thread have been deprecated due to their negative impact on performance and the user experience. Therefore, the async parameter may not be false except in a Worker.	IE Full support 5	Opera Full support 8	Safari Full support 1.2	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4 Notes' Full support 4 Notes' Notes' Starting in Firefox 30, synchronous requests on the main thread have been deprecated due to their negative impact on performance and the user experience. Therefore, the async parameter may not be false except in a Worker.	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
overrideMimeType	Chrome Full support 1	Edge Full support 12	Firefox Full support Yes	IE Full support 11 Full support 11 Full support 5 Notes' Notes' Implemented via ActiveXObject	Opera Full support Yes	Safari Full support 1.2	WebView Android Full support Yes	Chrome Android Full support 18	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 1.0
progress event	Chrome Full support Yes	Edge Full support ≤79	Firefox Full support Yes	IE Full support 10	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS ?	Samsung Internet Android Full support Yes
readyState	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 7	Opera Full support 8	Safari Full support 1.2	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
response	Chrome Full support 9	Edge Full support 12	Firefox Full support 6	IE Full support 10	Opera Full support 11.6	Safari Full support 5.1	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 6	Opera Android Full support 12	Safari iOS Full support 6	Samsung Internet Android Full support 1.0
responseText	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 5 Notes' Full support 5 Notes' Notes' Before Internet Explorer 10, the value of XMLHttpRequest.responseText could be read only once the request was complete.	Opera Full support 8	Safari Full support 1.2	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
responseType	Chrome Full support 31	Edge Full support 12	Firefox Full support 6	IE Full support 10	Opera No support 12 — 15 No support 12 — 15 Full support 18	Safari Full support 7	WebView Android Full support 55	Chrome Android Full support 55	Firefox Android Full support 50	Opera Android Full support 42	Safari iOS Full support 7	Samsung Internet Android Full support 6.0
responseURL	Chrome Full support 37	Edge Full support 14	Firefox Full support 32	IE No support No	Opera Full support 24	Safari Full support 8	WebView Android Full support 37	Chrome Android Full support 37	Firefox Android Full support 32	Opera Android Full support 24	Safari iOS Full support Yes	Samsung Internet Android Full support 3.0
responseXML	Chrome Full support Yes	Edge Full support 12	Firefox Full support Yes Notes' Full support Yes Notes' Notes' Prior to Firefox 51, an error parsing the received data added a <parsererror> node to the top of the Document and then returned the Document in whatever state it happens to be in. This was inconsistent with the specification. Starting with Firefox 51, this scenario now correctly returns null as per the spec.	IE Full support Yes	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes Notes' Full support Yes Notes' Notes' Prior to Firefox 51, an error parsing the received data added a <parsererror> node to the top of the Document and then returned the Document in whatever state it happens to be in. This was inconsistent with the specification. Starting with Firefox 51, this scenario now correctly returns null as per the spec.	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
send	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 5	Opera Full support 8	Safari Full support 1.2	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
sendAsBinary Deprecated'Non-standard'	Chrome No support No Notes' No support No Notes' Notes' There is a polyfill available to support sendAsBinary().	Edge No support No Notes' No support No Notes' Notes' There is a polyfill available to support sendAsBinary().	Firefox No support 2 — 31	IE No support No	Opera No support No	Safari No support No	WebView Android No support No Notes' No support No Notes' Notes' There is a polyfill available to support sendAsBinary().	Chrome Android No support No Notes' No support No Notes' Notes' There is a polyfill available to support sendAsBinary().	Firefox Android No support 4 — 31	Opera Android No support No	Safari iOS No support No	Samsung Internet Android No support No Notes' No support No Notes' Notes' There is a polyfill available to support sendAsBinary().
setRequestHeader	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 5	Opera Full support 8	Safari Full support 1.2	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
status	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 7 Notes' Full support 7 Notes' Notes' Internet Explorer version 5 and 6 supported ajax calls using ActiveXObject()	Opera Full support 8	Safari Full support 1.2	WebView Android Full support 1	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android Full support 1.0
statusText	Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 7 Notes' Full support 7 Notes' Notes' Internet Explorer version 5 and 6 supported ajax calls using ActiveXObject()	Opera Full support Yes	Safari Full support 1.2	WebView Android Full support Yes	Chrome Android Full support 18	Firefox Android Full support 4	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 1.0
timeout	Chrome Full support 29	Edge Full support 12	Firefox Full support 12	IE Full support 8	Opera Full support 17 Full support 17 No support 12 — 16	Safari Full support 6.1	WebView Android Full support ≤37	Chrome Android Full support 29	Firefox Android Full support 14	Opera Android Full support 18 Full support 18 No support 12 — 16	Safari iOS Full support 7	Samsung Internet Android Full support 2.0
timeout event	Chrome Full support Yes	Edge Full support ≤18	Firefox Full support Yes	IE Full support 10	Opera Full support Yes	Safari Full support Yes	WebView Android Full support Yes	Chrome Android Full support Yes	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support Yes
upload	Chrome Full support 1	Edge Full support 12	Firefox Full support Yes	IE Full support 10	Opera Full support Yes	Safari Full support 10	WebView Android Full support Yes	Chrome Android Full support 18	Firefox Android Full support Yes	Opera Android Full support Yes	Safari iOS Full support Yes	Samsung Internet Android Full support 1.0
withCredentials	Chrome Full support 3	Edge Full support 12	Firefox Full support 3.5 Notes' Full support 3.5 Notes' Notes' Starting with Firefox 11, it's no longer supported to use the withCredentials attribute when performing synchronous requests. Attempting to do so throws an NS_ERROR_DOM_INVALID_ACCESS_ERR exception.	IE Full support 10 Notes' Full support 10 Notes' Notes' Internet Explorer versions 8 and 9 supported cross-domain requests (CORS) using XDomainRequest.	Opera Full support 12	Safari Full support 4	WebView Android Full support ≤37	Chrome Android Full support 18	Firefox Android Full support 4 Notes' Full support 4 Notes' Notes' Starting with Firefox 11, it's no longer supported to use the withCredentials attribute when performing synchronous requests. Attempting to do so throws an NS_ERROR_DOM_INVALID_ACCESS_ERR exception.	Opera Android Full support 12	Safari iOS Full support 3.2	Samsung Internet Android Full support 1.0

Legend

Full support  

Full support

No support  

No support

Compatibility unknown  

Compatibility unknown

Non-standard. Expect poor cross-browser support.'

Non-standard. Expect poor cross-browser support.

Deprecated. Not for use in new websites.'

Deprecated. Not for use in new websites.

See implementation notes.'

See implementation notes.

See also

• XMLHttpRequest
• Using XMLHttpRequest

HTML in XMLHttpRequest by Mozilla Contributors is licensed under CC-BY-SA 2.5.