Question

这是我第一次体验xml，所以显而易见的事情并非如此。我有一个xml文件，我需要用javascript从它检索数据。该文件的内容如下：

<?xml version="1.0" encoding="utf-8"?>
<data>
    <Texts>
        <Price><![CDATA[50 $]]></Price>
        <CTA_text><![CDATA[MORE INFORMATION]]></CTA_text>
    </Texts>
</data>

我必须在加载时将数据从它检索到我的html页面。所以问题是：如何从xml获得50美元和更多信息文本？

Answer 1

尝试使用javascript XML解析器。这很容易。这是一个考试： http://www.w3schools.com/xml/dom_intro.asp

<script>
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            myFunction(xhttp);
        }
    };
    xhttp.open("GET", "books.xml", true);
    xhttp.send();

    function myFunction(xml) {
        var xmlDoc = xml.responseXML;
        document.getElementById("demo").innerHTML =
        xmlDoc.getElementsByTagName("title")[0].childNodes[0].nodeValue;
    }
</script>

Answer 2

您可以使用XMLHttpRequest()，DOMParser()，for循环，递归来迭代xml document中的所有节点，检查.nodeType是否为4节点为.textContent，使用CDATASection的{{1}}属性来检索节点的文本内容

<!DOCTYPE html>
<html>    
  <head>
    <script>
      function iterateNodes(nodes) {
        for (var i = 0; i < nodes.length; i++) {
          if (nodes[i].nodeType === 4) {
            document.body.innerHTML += nodes[i].textContent + "<br>"
          };
            if (nodes[i].childNodes.length) {
              iterateNodes(nodes[i].childNodes)
            }
          }
      }
      window.addEventListener("load", function() {           
        var request = new XMLHttpRequest();
        request.addEventListener("load", function() {
          var parser = new DOMParser(); 
          var xml = parser.parseFromString( this.response, "text/xml" )
          var nodes = xml.documentElement.childNodes;
          iterateNodes(nodes)              
        });
        request.open("GET", "data.xml");
        request.send();
      })
    </script>
  </head>    
  <body>      
  </body>    
</html>

plnkr http://plnkr.co/edit/gEZCWeHTwzk7o1GSAqzJ?p=preview

在页面加载

2 个答案: