在 Chrome 中使用 JavaScript 读取 XML 文档

Question

下面的代码可以完美地在 IE 中使用 JavaScript 从 XML 动态创建表格，但在 Chrome 中不行...我已经尝试了我能想到的一切，这在 Chrome 中得到了最好的结果，但仍然没有显示所有信息。这实际上在每个单元格中显示“未定义”，并且 Chrome 尝试获取不存在的 childNode 并停止。 Chrome 调试抛出的错误是：

“未捕获类型错误：无法读取未定义的属性‘childNodes’”...

是否有人有一个从跨浏览器兼容的 xml 文档构建 html 表的好例子？或者有谁知道需要更改什么才能使其在 Chrome 中工作？我已经阅读了 Stack Overflow 上有关此主题的大量问答，但没有一个专门解决此问题。

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

该节点是一个 具有单个子元素 href="http://www.w3.org/TR/DOM-Level-3-Core/core.html#ID-1950641247" rel="nofollow">节点 是 TextNode，所以你需要使用这个node.firstChild.nodeValue 模式。

我使用 for (var n = 0 ... 循环而不是 for (n in ... )，因为有时 JS 框架可以更改 Array 对象，这有令人讨厌的副作用。

这个 jsfiddle 链接 中有一个示例。