在Chrome中使用JavaScript讀取XML文檔

Question

以下工作完全可以在IE中動態創建一個使用JavaScript的XML表格，但不是Chrome瀏覽器......我嘗試了所有我能想到的方法，並且在Chrome中獲得最佳效果，但仍然不顯示所有的信息..這實際上顯示「未定義」在每個單元格中，並且Chrome嘗試獲取不存在並停止的childNode。該瀏覽器的調試拋出的錯誤是：

沒有人有從XML文檔是跨瀏覽器兼容的建立HTML表格的一個很好的例子？或者是否有人知道需要更改哪些內容才能在Chrome中完成此項工作？關於此主題，我已閱讀了Stack Overflow上的許多Q & A，但沒有具體解決此問題。

var rSecTable = null; 
function buildSecTable() { 
var DASHBOARD = new DASHBOARDUI(); 
var XMLDoc = DASHBOARD.DASHDataSource("DashboardService.asmx/RecentSecurityChanges?"); 
var element = 'secTbl'; 
var rootNode = 'Security'; 
var objNode = 'results'; 
var tblhdClass = 'DASHTableHead'; 
var innerNodes = new Array("time", "search_text", "name"); // for now, these need to be in reverse order 
rSecTable = DASHBOARD.DASHDataTableXML(element, XMLDoc, rootNode, objNode, innerNodes, tblhdClass); 
} 

function DASHBOARDUI() { 

this.DASHDataSource = function (url) { 
    var xmlDoc; 
    var xmlhttp; 
    if (window.XMLHttpRequest) { 
     xmlhttp = new XMLHttpRequest(); 
    } 
    else { 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    xmlhttp.open("GET", url, false); 
    xmlhttp.send(); 
    xmlDoc = xmlhttp.responseXML; 
    return xmlDoc; 
} 

this.isEvenRow = function (value) { 
    if (value % 2 == 0) 
     return 'DASHTableBodyEven'; 
    else 
     return 'DASHTableBodyOdd'; 
} 

this.DASHTableHeaderFormatter = function (text) { 
    var value = ""; 
    if (text == 'name') { 
     value = 'User Name'; 
    } 
    else if (text == 'search_text') { 
     value = 'Search Syntax'; 
    } 
    else if (text == 'time') { 
     value = 'Date\/Time'; 
    } 
    else if (text == 'rights') { 
     value = 'Current Security Rights'; 
    } 
    else if (text == 'Volume_Name') { 
     value = 'Volume Name'; 
    } 
    else if (text == 'Size_On_Disk') { 
     value = 'Volume Size On Disk (GB)'; 
    } 
    else if (text == 'Total_Disk_Space') { 
     value = 'Total Disk Space Where Volume Resides (GB)'; 
    } 
    else { 
     value = text; 
    } 
    return value; 
} 


this.DASHDataTableXML = function (element, xmlDoc, rootNode, objectNode, innerNodes, tblhdClass) { 
    // assign base object node and child count 
    var root = xmlDoc.getElementsByTagName(rootNode)[0]; 
    var rowcount = root.childNodes.length; 
    var oNodeOne = xmlDoc.getElementsByTagName(objectNode)[0]; 
    var colcount = oNodeOne.childNodes.length; 

    // call table element (must be a 'table' tag for now) 
    var dt = document.getElementById(element); 
    dt.className = 'DASHTable'; 

    var hdRow = dt.insertRow(0); 
    hdRow.className = tblhdClass; 
    var i = 0; 
    for (n in innerNodes) { 
     var nCell = hdRow.insertCell(i); 
     nCell.innerHTML = this.DASHTableHeaderFormatter(innerNodes[n]); 
    } 

    for (var j = 0; j < rowcount; j++) { 
     var newRow = dt.insertRow(j + 1); 
     newRow.className = this.isEvenRow(j); 
     for (var y = 0; y < colcount; y++) { 
      var dataCell = newRow.insertCell(y); 
      var base = xmlDoc.getElementsByTagName(objectNode)[j]; 
      var xNodeName = innerNodes[n]; 
      var node = base.childNodes[y]; 
      if (node.nodeType == 1) { 
       var value = node.text; 
       dataCell.innerHTML = value; 
      } 
     } 
    } 
} 

} 

例XHR返回：

<?xml version="1.0" ?> 
<Security> 
<results> 
<name>Bill</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit ,  Migrate , Get Information , Apply Watermarks</rights> 
<time>8/29/2011 3:58:30 PM</time> 
</results> 
<results> 
<name>Mary</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/19/2011 4:33:45 PM</time> 
</results> 
<results> 
<name>Paul</name> 
<rights>Scan , Export , Print , Delete , Import , Move , Process , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/19/2011 4:33:38 PM</time> 
</results> 
<results> 
<name>Jane</name> 
<rights>Export , Print , Import , Edit , Migrate</rights> 
<time>8/19/2011 4:32:57 PM</time> 
</results> 
<results> 
<name>Walter</name> 
<rights>Scan , Export , Print , Import , Move , Process , Edit</rights> 
<time>8/19/2011 4:31:23 PM</time> 
</results> 
<results> 
<name>Frank</name> 
<rights>Scan , Import , Move , Process , Edit</rights> 
<time>8/19/2011 4:17:44 PM</time> 
</results> 
<results> 
<name>Dan</name> 
<rights>Scan , Import</rights> 
<time>8/19/2011 3:49:18 PM</time> 
</results> 
<results> 
<name>Tom</name> 
<rights>Scan , Export , Print , Search , Import , Move , Process , Edit , Apply Watermarks</rights> 
<time>8/19/2011 3:36:24 PM</time> 
</results> 
<results> 
<name>Russ</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/16/2011 4:31:43 PM</time> 
</results> 
<results> 
<name>ADMIN</name> 
<rights>Scan , Export , Print , Search , Delete , Import , Move , Process , Edit , Migrate , Get Information , Apply Watermarks</rights> 
<time>8/16/2011 2:23:47 PM</time> 
</results> 
</Security> 

Answer 1

我能找到的唯一錯誤是，你使用的

var value = node.text

代替

var value = node.firstChild.nodeValue

節點是一個Element，它有一個子女Node這是一個TextNode，所以你需要使用這個node.firstChild.nodeValue模式。

我使用for (var n = 0 ...循環，而不是for (n in ...，因爲有時JS框架可以改變Array對象，這有令人討厭的副作用。

以this jsfiddle link爲例。