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 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()
.
const xhr = new XMLHttpRequest();
xhr.onload = () => {
console.log(xhr.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;
}
const 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:
If the file is named detect.html
, the following function can be used for detecting HTML parsing support:
function detectHtmlInXhr(callback) {
if (!window.XMLHttpRequest) {
setTimeout(function () {
callback(false);
}, 0);
return;
}
let done = false;
const xhr = new window.XMLHttpRequest();
xhr.onreadystatechange = () => {
if (xhr.readyState === 4 && !done) {
done = true;
callback(
!!(
xhr.responseXML &&
xhr.responseXML.title &&
xhr.responseXML.title === "&&<"
),
);
}
};
xhr.onabort = xhr.onerror = () => {
if (!done) {
done = true;
callback(false);
}
};
try {
xhr.open("GET", "detect.html");
xhr.responseType = "document";
xhr.send();
} catch (e) {
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.
Specifications
Browser compatibility
|
Desktop |
Mobile |
|
Chrome |
Edge |
Firefox |
Internet Explorer |
Opera |
Safari |
WebView Android |
Chrome Android |
Firefox for Android |
Opera Android |
Safari on IOS |
Samsung Internet |
XMLHttpRequest |
1 |
12 |
1 |
7 |
≤12.1 |
3 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
HTML_in_XMLHttpRequest |
1 |
12 |
1 |
75Implemented via ActiveXObject('Microsoft.XMLHTTP')
|
8 |
1.2 |
≤37 |
18 |
4 |
10.1 |
1 |
1.0 |
abort |
1 |
12 |
1 |
5 |
≤12.1 |
1.2 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
abort_event |
1 |
12 |
3.5 |
10 |
≤12.1 |
1.3 |
≤37 |
18 |
4 |
≤12.1 |
1 |
1.0 |
authorization_removed_cross_origin |
No |
No |
111 |
No |
No |
16.1 |
No |
No |
111 |
No |
16.1 |
No |
error_event |
1 |
12 |
1 |
10 |
≤12.1 |
1.3 |
≤37 |
18 |
4 |
≤12.1 |
1 |
1.0 |
getAllResponseHeaders |
1 |
12 |
1Starting 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 . |
5 |
≤12.1 |
1.2 |
4.4 |
18 |
4Starting 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 . |
≤12.1 |
1 |
1.0 |
getResponseHeader |
1 |
12 |
1Starting 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 . |
5 |
8 |
1.2 |
4.4 |
18 |
4Starting 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 . |
10.1 |
1 |
1.0 |
load_event |
1 |
12 |
1 |
9 |
≤12.1 |
1.3 |
≤37 |
18 |
4 |
≤12.1 |
1 |
1.0 |
loadend_event |
18 |
12 |
5 |
10 |
≤12.1 |
4 |
4.4 |
18 |
5 |
≤12.1 |
3 |
1.0 |
loadstart_event |
1 |
12 |
3.5 |
10 |
≤12.1 |
1.3 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
open |
1 |
12 |
1Starting 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 . |
5 |
8 |
1.2 |
4.4 |
18 |
4Starting 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 . |
10.1 |
1 |
1.0 |
overrideMimeType |
1 |
12 |
1 |
115Implemented via ActiveXObject
|
≤12.1 |
1.2 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
progress_event |
1 |
12 |
1 |
10 |
≤12.1 |
3 |
≤37 |
18 |
4 |
≤12.1 |
1 |
1.0 |
readyState |
1 |
12 |
1 |
7 |
8 |
1.2 |
4.4 |
18 |
4 |
10.1 |
1 |
1.0 |
readystatechange_event |
1 |
12 |
1 |
5 |
9 |
1.2 |
4.4 |
18 |
4 |
10.1 |
1 |
1.0 |
response |
9 |
12 |
6 |
10 |
11.6 |
5.1 |
3 |
18 |
6 |
12 |
5 |
1.0 |
responseText |
1 |
12 |
1 |
5Before Internet Explorer 10, the value of XMLHttpRequest.responseText could be read only once the request was complete. |
8 |
1.2 |
4.4 |
18 |
4 |
10.1 |
1 |
1.0 |
responseType |
31 |
12 |
6 |
10 |
1812–15 |
5.1 |
4.4.3 |
31 |
50 |
1812–14 |
5 |
2.0 |
responseURL |
37 |
14 |
32 |
No |
24 |
8 |
37 |
37 |
32 |
24 |
8 |
3.0 |
responseXML |
1 |
12 |
1Before 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. |
7 |
≤12.1 |
3 |
≤37 |
18 |
4Before 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. |
≤12.1 |
1 |
1.0 |
send |
1 |
12 |
1 |
5 |
8 |
1.2 |
4.4 |
18 |
4 |
10.1 |
1 |
1.0 |
setAttributionReporting |
117 |
117 |
No |
No |
103 |
No |
117 |
117 |
No |
No |
No |
No |
setPrivateToken |
117 |
117 |
No |
No |
103 |
No |
117 |
117 |
No |
No |
No |
No |
setRequestHeader |
1 |
12 |
1 |
5 |
8 |
1.2 |
4.4 |
18 |
4 |
10.1 |
1 |
1.0 |
status |
1 |
12 |
1 |
7Internet Explorer version 5 and 6 supported ajax calls using ActiveXObject() |
8 |
1.2 |
4.4 |
18 |
4 |
10.1 |
1 |
1.0 |
statusText |
1 |
12 |
1 |
7Internet Explorer version 5 and 6 supported ajax calls using ActiveXObject() |
≤12.1 |
1.2 |
4.4 |
18 |
4 |
≤12.1 |
1 |
1.0 |
timeout |
29 |
12 |
12 |
8 |
1712–16 |
7 |
4.4 |
29 |
14 |
1812–16 |
7 |
2.0 |
timeout_event |
29 |
12 |
12 |
8 |
16 |
7 |
4.4 |
29 |
14 |
16 |
7 |
1.0 |
upload |
2 |
12 |
3.5 |
10 |
≤12.1 |
4 |
4.4 |
18 |
4 |
≤12.1 |
3 |
1.0 |
withCredentials |
3 |
12 |
3.5Starting 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. |
10Internet Explorer versions 8 and 9 supported cross-domain requests (CORS) using XDomainRequest . |
12 |
4 |
≤37 |
18 |
4Starting 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. |
12 |
3.2 |
1.0 |
worker_support |
4 |
12 |
3.5 |
10 |
10.6 |
4 |
4 |
18 |
4 |
11 |
5 |
1.0 |
See also