Ajax 响应作为 DOM 对象

Question

有没有办法从典型的ajax函数中获取响应，以便可以用getElements对其进行剖析？我已经尝试过

query.responseText.getElementById

，但它的效果和看起来一样糟糕。不过，您应该能够通过看到该片段来了解我想要实现的目标。我只需要从 ajax 响应中获取元素，就像获取普通 DOM 对象一样。

另外，请不建议使用 jQuery。当我有很多脚本并且可以使用它的很多功能时，我会使用它，但在这种情况下，我只有一个简短的脚本和一个 70 倍大小的库，这似乎是一种浪费。

Answer 1

解析 SVG 或 HTML 文档

parser = new DOMParser();
doc = parser.parseFromString(stringContainingHTMLSource, "text/html");

doc 将是一个有效的 html 文档。

Answer 2

您可以在页面上隐藏一个

div

并将其 innerHTML 设置为您收到的 Ajax 响应。然后你可以调用

div.getElementById()

，因为它只是另一个 DOM 对象。

Answer 3

参考这篇文章：Ajax中解析XML响应

在本例中我使用

responseXML

。您可以使用 getElementsByTagName 和其他 getElement*() 方法来获取数据。

Answer 4

如果您的回复是文本，我见过有人使用 ...xhr.responseText.spit('html>...body>...div id="yourTargetsParent">')[1].split(' /div>.../body>.../html>')[0]; //只是将字符串分开！

另一种方法是使用 iframe.contentWindow.document.body...（或某些浏览器的 contentDocument）...只需隐藏 iframe 你知道。

显然，如果你可以控制完全改变事物的目标（这篇文章可能不会在这里），但我也看到了一些通过目标使用脚本编写其主机 dom、localStorage、splits/ 的方法连接、webSQLDatabases...用于字符串操作。

老实说，我曾经使用隐藏的div（谢谢sleepysamurai！），但我想我遇到了更多getElementById / jQuery.load类型的方式。 ..如果找到的话我会发回来的...

Answer 5

对于javaScript“追加”，您需要解析的html

let parsedHtmlElement = new DOMParser().parseFromString(ajaxResultStringHtml, 'text/html').body.firstElementChild;
document.getElementById('js-my-terget-element').append(parsedHtmlElement);