2016-06-30 11 views
0

私の最初の経験はxmlなので、明らかなことはそうではありません。私はXMLでファイルを持っており、JavaScriptからデータを取得する必要があります。ファイルの内容は次のとおりです:ページのXMLファイルからデータを取得するロード

<?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 $およびその他の情報テキストを取得するにはどうすればよいですか?

答えて

1

あなたはXMLHttpRequest()DOMParser()forループを使用することができ、再帰、xmldocument内のすべてのノードを反復処理ノードの.nodeType4であるかどうかを確認、テキストの内容を取得するためにCDATASection.textContentプロパティを使用しますノードの

<!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

+0

ああ、ここで何が起こっているのか説明できますか?コメントで? – NeedHate

+1

@NeedHate 'XMLHttpRequest'' response'から 'xml'' document'を作成します。 'xml'' document'内のノードを再帰的に反復します。現在の反復ノード '.nodeType'が' 4'の場合、ノードの '.textContent'プロパティを取得します – guest271314

1

javascript XMLパーサーを使用してください。それはかなり簡単です。ここexamleは次のとおりです。 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> 
関連する問題