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
使用
XMLHttpRequest
.
To get an overview of how to use
XMLHttpRequest
in general, see
使用 XMLHttpRequest
.
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).
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"
到
responseType
特性为
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();
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.
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);
}
}
自变量
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.
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.
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
正则表达式
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);
注意：
This solution is very expensive for the interpreter.
Use it only when it is really necessary
.
| 规范 | 状态 | 注释 |
|---|---|---|
| XMLHttpRequest | 实时标准 | 初始定义 |
XMLHttpRequest
interface
| 桌面 | 移动 | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
XMLHttpRequest
|
Chrome 1 |
Edge
12
|
Firefox 1 |
IE
7
|
Opera 8 | Safari 1.2 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
abort
|
Chrome 18 | Edge 12 | Firefox Yes | IE 5 | Opera Yes | Safari 1.2 | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
abort
event
|
Chrome Yes | Edge ≤79 | Firefox Yes | IE 10 | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS ? | Samsung Internet Android Yes |
error
event
|
Chrome Yes | Edge ≤79 | Firefox Yes | IE 10 | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS ? | Samsung Internet Android Yes |
getAllResponseHeaders
|
Chrome 1 | Edge 12 |
Firefox
4
|
IE 5 | Opera Yes | Safari 1.2 | WebView Android Yes | Chrome Android Yes |
Firefox Android
4
|
Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
getResponseHeader
|
Chrome 1 | Edge 12 |
Firefox
1
|
IE 5 | Opera 8 | Safari 1.2 | WebView Android 1 | Chrome Android 18 |
Firefox Android
4
|
Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
load
event
|
Chrome Yes | Edge ≤79 | Firefox Yes | IE 9 | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS ? | Samsung Internet Android Yes |
loadend
event
|
Chrome Yes | Edge ≤79 | Firefox Yes | IE 10 | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS ? | Samsung Internet Android Yes |
loadstart
event
|
Chrome Yes | Edge ≤79 | Firefox Yes | IE 10 | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS ? | Samsung Internet Android Yes |
onreadystatechange
|
Chrome 1 | Edge 12 | Firefox 1 | IE 5 | Opera 9 | Safari 1.2 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
open
|
Chrome 1 | Edge 12 |
Firefox
1
|
IE 5 | Opera 8 | Safari 1.2 | WebView Android 1 | Chrome Android 18 |
Firefox Android
4
|
Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
overrideMimeType
|
Chrome 1 | Edge 12 | Firefox Yes |
IE
11
|
Opera Yes | Safari 1.2 | WebView Android Yes | Chrome Android 18 | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android 1.0 |
progress
event
|
Chrome Yes | Edge ≤79 | Firefox Yes | IE 10 | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS ? | Samsung Internet Android Yes |
readyState
|
Chrome 1 | Edge 12 | Firefox 1 | IE 7 | Opera 8 | Safari 1.2 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
response
|
Chrome 9 | Edge 12 | Firefox 6 | IE 10 | Opera 11.6 | Safari 5.1 | WebView Android ≤37 | Chrome Android 18 | Firefox Android 6 | Opera Android 12 | Safari iOS 6 | Samsung Internet Android 1.0 |
responseText
|
Chrome 1 | Edge 12 | Firefox 1 |
IE
5
|
Opera 8 | Safari 1.2 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
responseType
|
Chrome 31 | Edge 12 | Firefox 6 | IE 10 | Opera 18 | Safari 7 | WebView Android 55 | Chrome Android 55 | Firefox Android 50 | Opera Android 42 | Safari iOS 7 | Samsung Internet Android 6.0 |
responseURL
|
Chrome 37 | Edge 14 | Firefox 32 | IE No | Opera 24 | Safari 8 | WebView Android 37 | Chrome Android 37 | Firefox Android 32 | Opera Android 24 | Safari iOS Yes | Samsung Internet Android 3.0 |
responseXML
|
Chrome Yes | Edge 12 |
Firefox
Yes
|
IE Yes | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes |
Firefox Android
Yes
|
Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
send
|
Chrome 1 | Edge 12 | Firefox 1 | IE 5 | Opera 8 | Safari 1.2 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
sendAsBinary
弃用
非标
|
Chrome
No
|
Edge
No
|
Firefox 2 — 31 | IE No | Opera No | Safari No |
WebView Android
No
|
Chrome Android
No
|
Firefox Android 4 — 31 | Opera Android No | Safari iOS No |
Samsung Internet Android
No
|
setRequestHeader
|
Chrome 1 | Edge 12 | Firefox 1 | IE 5 | Opera 8 | Safari 1.2 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
status
|
Chrome 1 | Edge 12 | Firefox 1 |
IE
7
|
Opera 8 | Safari 1.2 | WebView Android 1 | Chrome Android 18 | Firefox Android 4 | Opera Android 10.1 | Safari iOS 1 | Samsung Internet Android 1.0 |
statusText
|
Chrome 1 | Edge 12 | Firefox 1 |
IE
7
|
Opera Yes | Safari 1.2 | WebView Android Yes | Chrome Android 18 | Firefox Android 4 | Opera Android Yes | Safari iOS Yes | Samsung Internet Android 1.0 |
timeout
|
Chrome 29 | Edge 12 | Firefox 12 | IE 8 |
Opera
17
|
Safari 6.1 | WebView Android ≤37 | Chrome Android 29 | Firefox Android 14 |
Opera Android
18
|
Safari iOS 7 | Samsung Internet Android 2.0 |
timeout
event
|
Chrome Yes | Edge ≤18 | Firefox Yes | IE 10 | Opera Yes | Safari Yes | WebView Android Yes | Chrome Android Yes | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android Yes |
upload
|
Chrome 1 | Edge 12 | Firefox Yes | IE 10 | Opera Yes | Safari 10 | WebView Android Yes | Chrome Android 18 | Firefox Android Yes | Opera Android Yes | Safari iOS Yes | Samsung Internet Android 1.0 |
withCredentials
|
Chrome 3 | Edge 12 |
Firefox
3.5
|
IE
10
|
Opera 12 | Safari 4 | WebView Android ≤37 | Chrome Android 18 |
Firefox Android
4
|
Opera Android 12 | Safari iOS 3.2 | Samsung Internet Android 1.0 |
完整支持
不支持
兼容性未知
非标。预期跨浏览器支持较差。
弃用。不要用于新网站。
见实现注意事项。
XMLHttpRequest