Question

我想使用javascript从加载到网页中的xml文件中获取信息。

以下给出的是我正在使用的xmlfile（a.xml）。

a.xml

<?xml version="1.0"?>

<Step rID="T6">
  <Obj ><![CDATA[Get Data Table - Passed]]></Obj>
  <Details ><![CDATA[]]></Details>
  <Time><![CDATA[7/5/2018 - 13:16:26]]></Time>
  <TimeTick>1530810986</TimeTick>
  <NodeArgs eType="User" icon="5" nRep="9" >
    <Disp><![CDATA[Get Data Table - Passed]]></Disp>
  </NodeArgs>
</Step>
<Step rID="T7">
  <Obj ><![CDATA[GetDataTable - Successful]]></Obj>
  <Details ><![CDATA[Toral Row get:65534]]></Details>
  <Time><![CDATA[7/5/2018 - 13:16:26]]></Time>
  <TimeTick>1530810986</TimeTick>
  <NodeArgs eType="User" icon="5" nRep="10" status="Passed" >
    <Disp><![CDATA[GetDataTable - Successful]]></Disp>
  </NodeArgs>
</Step>

我想使用Java脚本访问xml中特定节点下的节点吗？那就是我要在访问步骤节点之后访问“时间”节点。而下面给出的是我要将xml数据加载到的index.html页面

index.html

<html>
  <head>
    <title>Report</title>
    <style></style>
  </head>
  <body>
    <p>Results of  <b>Test cases</b> </p>
    <div id="books"></div>
  </body>

  <script>
  var oXHR = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
  var testcase_Number = 0;
  var endOfTest= 0;
  function reportStatus() {
    if (oXHR.readyState == 4)               // REQUEST COMPLETED.
      showTheList(this.responseXML);      // ALL SET. NOW SHOW XML DATA.
  }

  oXHR.onreadystatechange = reportStatus;
  oXHR.open("GET", "a.xml", true);      // true = ASYNCHRONOUS REQUEST 
                                   //(DESIRABLE), false = SYNCHRONOUS REQUEST.
  oXHR.send();

  function showTheList(xml) {
    var divBooks = document.getElementById('books');        // THE PARENT DIV.
    var Book_List = xml.getElementsByTagName('Step');       // THE XML TAG NAME.
    var divLeft = document.createElement('div');
    divLeft.className = 'col1';

    for (var i = 0; i < Book_List.length; i++) {
      divLeft.innerHTML=Book_List[i].getChildElementsByTagName("Time")[0].nodeValue;
      divBooks.appendChild(divLeft);
    }
  };
  </script>
</html>

在上面的代码中，我试图访问step节点下的Time子节点。并且我在上面的示例中使用了数组，因为我使用的xml页面具有很多Step子节点，并且我想为每个子节点访问Step下的Time子节点。

谢谢，感谢您的帮助

Answer 1

您可以选择使用XPath processing APIs之一直接遍历xml节点。基本上可以重写您的showTheList函数。但是，下面是一个完整的独立解决方案：

<html>
    <head>
    <title>Report</title>
    <style>

    </style>
    <script>
        function showTheList() {
            let x_xmlisland = document.getElementById("template_xml");
            let s_xmlsource = x_xmlisland.textContent; 

            // Parse xml. This may beunnecessary depending on the ajax lib used. 
            let parser = new DOMParser();
            let xmlDoc = parser.parseFromString(s_xmlsource, "application/xml");

            // Obtain the xml node set containing the needed info.
            // In this case, these are the textual contents of all 'Time' elements that are children of a 'Step' node.
            let xpr_time  = xmlDoc.evaluate("//Step/Time/text()", xmlDoc, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
            let node_time
              ;

            let divBooks = document.getElementById('books');        // THE PARENT DIV.
// debugger; // uncomment for tracing 
            while ( ( node_time = xpr_time.iterateNext() ) !== null ) { // iterate over xml nodes
                let divLeft = document.createElement('div');
                divLeft.className = 'col1';
                divLeft.innerHTML = node_time.textContent;  // The xpath expression references the 'text()' function which provides a text node. String must still be extracted. 
                divBooks.appendChild(divLeft);
            }
        }
        </script>
    </head>
    <body onLoad="showTheList()">
        <script type="text/xml" id="template_xml"><?xml version="1.0"?>
<Steps>
    <Step rID="T6">
        <Obj ><![CDATA[Get Data Table - Passed]]></Obj>
        <Details ><![CDATA[]]></Details>
        <Time><![CDATA[7/5/2018 - 13:16:26]]></Time>
        <TimeTick>1530810986</TimeTick>
        <NodeArgs eType="User" icon="5" nRep="9" >
            <Disp><![CDATA[Get Data Table - Passed]]></Disp>
        </NodeArgs>
    </Step>
    <Step rID="T7">
        <Obj ><![CDATA[GetDataTable - Successful]]></Obj>
        <Details ><![CDATA[Toral Row get:65534]]></Details>
        <Time><![CDATA[7/5/2018 - 13:16:27]]></Time>
        <TimeTick>1530810986</TimeTick>
        <NodeArgs eType="User" icon="5" nRep="10" status="Passed" >
            <Disp><![CDATA[GetDataTable - Successful]]></Disp>
        </NodeArgs>
    </Step>
</Steps>
        </script>
        <p>Results of  <b>Test cases</b> </p>
        <div id="books"></div>
    </body>
</html>

代码已通过测试。

注意

问题中提供的示例xml格式不正确，因为它缺少唯一的根元素。该解决方案仍然有效，但仅考虑第一个Step元素。

更新

要允许来自外部源的xml，需要重新引入ajax代码：

function getData() {
    let oXHR = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');
    oXHR.onreadystatechange = function() {
        if (oXHR.readyState == 4 && oXHR.status == 200) {
            showTheList(oXHR);
        }
    };
    oXHR.open("GET", "state_data.xml", true); // ...or whatever else
    oXHR.send();
} // getData

由于缺少本地数据，因此不再需要将showTheList注册为onLoad处理程序。

<body onLoad="getData()">

如何使用javascript访问XML子节点

1 个答案: