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()
.
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; }
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>&&<</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.
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);
Specifications
Specification | Status | Comment |
---|---|---|
XMLHttpRequest | Living Standard | Initial definition |
Browser compatibility
XMLHttpRequest
interface
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
XMLHttpRequest | 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 |
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
| 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
| 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
| 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 |
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
| 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 |
overrideMimeType | Chrome Full support 1 | Edge Full support 12 | Firefox Full support Yes | IE
Full support
11
| 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
| 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 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
| 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
| 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 | Chrome
No support
No
| Edge
No support
No
| Firefox No support 2 — 31 | IE No support No | Opera No support No | Safari No support No | WebView Android
No support
No
| Chrome Android
No support
No
| Firefox Android No support 4 — 31 | Opera Android No support No | Safari iOS No support No | Samsung Internet Android
No support
No
|
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
| 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
| 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
| 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
| 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
| IE
Full support
10
| Opera Full support 12 | Safari Full support 4 | WebView Android Full support ≤37 | Chrome Android Full support 18 | Firefox Android
Full support
4
| 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.