将Ajax ResponseXML转换为HTML

我正在做一个Ajax请求，其中服务器返回格式良好的HTML，特别是表格行（“tr”）元素。我希望通过从请求对象（XMLHttpRequest）上的“responseXML”成员读取，使用DOM将这些行插入到表中。基本上，我有将Ajax ResponseXML转换为HTML

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。这真的是最好的方法吗？

来源

2011-04-15 nttaylor

你可能会告诉我们你的“模糊的javascript错误”所说 - 某种形式的WRONG_DOCUMENT_ERR？这可能是因为@Vivin暗示，你不能将'tableRows [i]'追加到你的页面，因为appendChild要求它的参数和父元素在同一个文档中，而responseXML是一个单独的文档。见http://www.w3.org/DOM/faq.html#ownerdoc – LarsH 2011-04-15 21:51:26

JavaScript错误是“htmlfile：没有这样的接口支持”。你认为这是你所描述的情况吗？在responseXML上成功运行“getElementsByTagName”，得到一个正确的TR元素列表，但仍然不能像我刚刚创建的document.createElement（“TR”）那样追加那些TR元素。。 – nttaylor 2011-04-18 15:20:04

顺便说一句，我也试过通过创建一个微软的DOMParser（xmlDoc = new ActiveXObject（“Microsoft.XMLDOM”））的实例，但是产生了一个不同的模糊的运行时错误，即：“Microsoft JScript运行时错误：类型不匹配” 。如果直接在XML字符串上运行“getElementsByTagName”，并在执行“xmlDoc.loadXML（responseXML）”行后在“XMLDoc”对象上运行它，？在这两种情况下，“getElementsByTagName”成功产生一个TR元素列表，但在任何情况下，我都可以用这些元素中的一个“appendChild”作为参数。 – nttaylor 2011-04-18 15:25:07

如果是结构良好的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，看看this cross-browser implementation。您的另一种选择它使用类似jQuery的东西，它规范了很多跨浏览器的差异

来源

2011-04-15 21:47:05

感谢您的建议。不幸的是，IE似乎不支持“importNode” – nttaylor 2011-04-15 21:56:24

@Nel Taylor - 更新了我的答案。 – 2011-04-15 22:00:02

谢谢Vivin Paliath！感谢您链接的论文，我在解决这个问题方面取得了很多进展。 – nttaylor 2011-04-18 17:03:54

如果XMLHTTPResponse中的唯一内容是页面上表元素的内容，那么是的，使用document.getElementById（'myTable '）.innerHTML = responseXML;

我会说这是异步更新HTML的标准。

来源

2011-04-15 21:54:53 jonsinfinity

将Ajax ResponseXML转换为HTML

回答

相关问题