将Ajax ResponseXML转换为HTML

| 我正在执行Ajax请求，服务器将返回格式正确的HTML，特别是表行（\“ tr \”）元素。我曾希望使用DOM通过从请求对象（XMLHttpRequest）的\“ responseXML \”成员中读取将这些行插入表中。基本上，我有

var myTable = document.getElementById(\"myTable\");
var tableRows = responseXML.getElementsByTagName(\"tr\");
for (var i = 0; i < tableRows.length; i++) {
  myTable.appendChild(tableRows[i]);
}

很多事情就在这里。 \“ responseXML \”包含正确的数据，并且对\“ getElementsByTagName \”的调用也可以正常工作。可悲的是，当我尝试通过调用appendChild添加行时，它崩溃了（我得到了模糊的javascript错误）。我认为这是因为尽管\“ tableRows \”数组中的每个项目都是正确的XML元素，但浏览器无法自动将其解释为HTML元素。我已经注意到，如果我使用document.createElement（\“ tr \”）制作一个新文件，并在运行时对其进行检查，则它在内存中的外观与\“ tableRows \”数组中的各项不同。另外，我可以将新的（用\“ createElement \”制成的）插入表中而不会出现错误。有什么好办法可以做我在这里要做的事情吗？我希望我可以使浏览器通过将内容返回为XML并使用responseXML / getElementsByTagName来正确解释元素。这样，我可以避免将responseText用于真正的HTML，也可以避免使用\“ innerHTML \”，因为它不是标准。但是，大多数在线示例都使用innerHTML。那真的是最好的方法吗？

已邀请:

2 个回复

死簇

如果HTML格式正确，则可以尝试使用document.importNode()，如下所示：

//myXHTML is your HTML/XHTML (if it is well-formed, you should be ok).
//myObject is the parent node. This is the node you want to insert your HTML into
function insertXHTML(myXHTML, myObject) {
   var parser = new DOMParser();

   //Doing this to make sure that there is just one root node.
   //You can change the namespace, or not use it at all.
   var xmlToParse = \"<div xmlns = \\\"http://www.w3.org/1999/xhtml\\\">\" + myXHTML + \"</div>\";
   var XMLdoc = parser.parseFromString(xmlToParse, \"application/xhtml+xml\");

   var root = XMLdoc.documentElement;

   for(i = 0; i < root.childNodes.length; i++) {
       myObject.appendChild(document.importNode(root.childNodes[i], true));
   }
}

这是我前一段时间写的代码（避免使用innerHTML）；它仍然应该工作。我唯一担心的是DOMParser()；不知道它是如何跨浏览器的。编辑您的方法的问题（仅使用纯JS做事）是您将遇到跨浏览器问题:(。对于importNode，请看一下此跨浏览器的实现。您的另一选择是使用类似jQuery的方法它规范了很多跨浏览器的差异。

程琶

如果XMLHTTPResponse中唯一的内容是页面上表元素的内容，那么请使用document.getElementById（\'myTable \'）。innerHTML = responseXML;。我会说这是异步更新HTML的标准。

要回复问题请先登录或注册

将Ajax ResponseXML转换为HTML

2 个回复

发起人

dom

xmlhttprequest

getelementsbytagname

xml

ajax

问题状态

将Ajax ResponseXML转换为HTML

与内容相关的链接

2 个回复

发起人

dom

xmlhttprequest

getelementsbytagname

xml

ajax

问题状态