作为 DOM 对象的 Ajax 响应

Question

有没有办法从典型的 ajax 函数获取响应，以便可以用 getElements 对其进行剖析？我已经尝试过 query.responseText.getElementById 但它的效果和看起来一样糟糕。不过，您应该能够通过看到该片段来了解我想要实现的目标。我只需要从 ajax 响应中获取元素，就像获取普通 DOM 对象一样。

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

Answer 1

解析 SVG 或 HTML 文档

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

doc< /strong> 将是一个有效的 html 文档。

Answer 2

好吧，您可以在页面上隐藏一个 div 并将其 innerHTML 设置为您收到的 Ajax 响应。然后您可以调用 div.getElementById()，因为它只是另一个 DOM 对象。

Answer 3

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

在本例中，我使用 responseXML。您可以使用 getElementsByTagName 和其他 getElement*() 方法来获取数据。

Answer 4

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

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

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

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

Answer 5

例如javaScript“append”需要解析html（.body.firstElementChild仅获取元素而没有主体）

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