HTML in XMLHttpRequest
W3C XMLHttpRequest
规范为 XMLHttpRequest
添加 HTML 语法解析功能,此前仅支持 XML 语法解析。该功能允许 Web 应用程序使用XMLHttpRequest
作为解析的 DOM。
局限
为了阻止同步使用 XMLHttpRequest,HTML 在同步模式下不支持使用。并且,只有当 responseType 属性设置为 'document' 的情况下,HTML 支持才可用。这种限制避免了浪费时间解析 HTML,而传统代码在默认模式下使用 XMLHttpRequest 来检索 text/html
资源的 responseText. 此外,该限制避免了遗留代码的问题,该代码假定 HTTP 错误页面(通常具有 text/html
响应正文)的 responseXML 为空。
用法
使用 XMLHttpRequest 将 HTML 资源恢复为 DOM 就像使用 XMLHttpRequest 将 XML 资源恢复为 DOM 一样,除了您不能使用同步模式,您必须通过将字符串“document”分配给 responseType 属性来显式请求文档调用 open()
之后调用 send
之前的 XMLHttpRequest 对象。
var xhr = new XMLHttpRequest();
xhr.onload = function() {
console.log(this.responseXML.title);
}
xhr.open("GET", "file.html");
xhr.responseType = "document";
xhr.send();
功能检测
方法 1
该方法依赖于功能的“强制异步”性质。当你尝试设置一个以“sync”方式打开的 XMLHttpRequest 对象后,尝试将设置 responseType 会在实现该功能的浏览器上引发错误,其他浏览器则运行良好。
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.
方法 2
检测浏览器是否支持 XMLHttpRequest 中的 HTML 解析有两个挑战。首先,检测结果是异步获取的,因为 HTML 支持仅在异步模式下可用。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.
因此,为了检测 HTML 支持,服务器上需要一个测试 HTML 文件。这个测试文件很小,格式不是很完整:
<title>&&<</title>
如果文件名为 detect.html,以下功能可用于检测 HTML 解析支持:
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 是一个函数,如果 HTML 解析是支持的,则将以 true 作为唯一参数被异步调用,如果不支持 HTML 解析,则为 false。
字符编码
如果在 HTTP Content-Type 头部中声明了字符编码,则使用该字符编码。否则,如果存在字节顺序标记,则使用由字节顺序标记指示的编码。否则,如果有一个 meta tag 声明文件的前 1024 个字节中的编码,则使用该编码。否则,文件被解码为 UTF-8。
老版本的浏览器中处理 HTML
XMLHttpRequest 最初只支持 XML 解析。HTML 解析支持是最近的一个补充。对于较老的浏览器,您甚至可以使用与正则表达式关联的 responseText 属性,以获取例如已知其 ID 的 HTML 元素的源代码:
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 |
---|
XMLHttpRequest Standard # interface-xmlhttprequest |
Browser compatibility
BCD tables only load in the browser