处理通过 AJAX 返回的 HTML 内容出乎意料地复杂。由于 XMLHttpRequest 被设计为处理格式良好的 XML,因此尝试通过 responseXML 属性解析 HTML 页面几乎总会导致 XML 解析错误。而虽然 responseText 属性包含 HTML 源代码,可以通过字符串函数或正则表达式进行解析,但 XMLHttpRequest 对象并未提供使用 DOM 操作解析返回 HTML 的简单方法。

使用浏览器的 HTML 解析器

操作步骤

一种解析通过 AJAX 返回的 HTML 的方法是,将整个页面作为当前文档的子节点添加到浏览器中。可以通过创建一个新节点并将返回的 HTML 文本赋值给该节点的 innerHTML 属性来实现,代码示例如下:

var htmlDoc = document.createElement('div');  // 创建一个新的空的 DIV 节点
htmlDoc.innerHTML = ajaxResult.responseText;  // 将返回的 HTML 页面放置到新节点中

优势

  1. 自动解析:浏览器会自动解析 HTML 文档。
  2. 可操作性:解析后的文档可以通过 DOM 操作进行搜索、导航和修改。

注意事项

  • 此方法依赖于浏览器内置的 HTML 解析器。
  • 应验证此方法在目标浏览器上的兼容性,以确保一致性。

通过这种方式,可以轻松地利用 DOM 操作来处理通过 AJAX 返回的 HTML 内容,而无需依赖复杂的字符串解析或正则表达式匹配。

Last modified: Monday, 13 January 2025, 3:14 PM