將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

回答

相關問題