使用javascript将xml标记加载到html文件中_Javascript_Html_Xml

使用javascript将xml标记加载到html文件中

javascript html xml

使用javascript将xml标记加载到html文件中,javascript,html,xml,Javascript,Html,Xml,我有一个xml文件，需要加载到html文件中，以便在html页面上显示xml数据 <script> function displaySYMBOL() { if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXO

我有一个xml文件，需要加载到html文件中，以便在html页面上显示xml数据

<script>

function displaySYMBOL()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","stock.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

x=xmlDoc.getElementsByTagName("finance");
i=0;

symbol=(x[i].getElementsByTagName("symbol")[0].childNodes[0].nodeValue);
document.getElementById("showSYMBOL").innerHTML=symbol;
}
</script>
</head>
<body onload="displaySYMBOL()">

<div id="mainpage">
    <div id="logo"></div>
    <div id="showSYMBOL">test</div>
    <div id="stock2">Location Test</div>
    <div id="stock3"></div>
</div>

</body>
</html>

这是HTML，使用javascript加载文件。

<script>

function displaySYMBOL()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","stock.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

x=xmlDoc.getElementsByTagName("finance");
i=0;

symbol=(x[i].getElementsByTagName("symbol")[0].childNodes[0].nodeValue);
document.getElementById("showSYMBOL").innerHTML=symbol;
}
</script>
</head>
<body onload="displaySYMBOL()">

<div id="mainpage">
    <div id="logo"></div>
    <div id="showSYMBOL">test</div>
    <div id="stock2">Location Test</div>
    <div id="stock3"></div>
</div>

</body>
</html>

这是xml

<script>

function displaySYMBOL()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","stock.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

x=xmlDoc.getElementsByTagName("finance");
i=0;

symbol=(x[i].getElementsByTagName("symbol")[0].childNodes[0].nodeValue);
document.getElementById("showSYMBOL").innerHTML=symbol;
}
</script>
</head>
<body onload="displaySYMBOL()">

<div id="mainpage">
    <div id="logo"></div>
    <div id="showSYMBOL">test</div>
    <div id="stock2">Location Test</div>
    <div id="stock3"></div>
</div>

</body>
</html>

<xml_api_reply version="1">
<script id="tinyhippos-injected"/>
<finance module_id="0" tab_id="0" mobile_row="0" mobile_zipped="1" row="0" section="0">
<symbol data="XLNX"/>
<pretty_symbol data="XLNX"/>
<company data="Xilinx, Inc."/>
<exchange data="Nasdaq"/>
<exchange_closing data="52.89"/>
<last data="52.55"/>
<high data="53"/>
<low data="51.99"/>
<volume data="6158738"/>
<open data="52.51"/>
<y_close data="52.89"/>
<change data="-0.34"/>
<perc_change data="-0.64"/>
</finance>
</xml_api_reply>

最终，符号数据应与showSYMBOL div标记一起显示在HTML中。目前这种情况还没有发生。我遗漏了什么？

看起来这不是您要寻找的节点价值：

<script>

function displaySYMBOL()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","stock.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

x=xmlDoc.getElementsByTagName("finance");
i=0;

symbol=(x[i].getElementsByTagName("symbol")[0].childNodes[0].nodeValue);
document.getElementById("showSYMBOL").innerHTML=symbol;
}
</script>
</head>
<body onload="displaySYMBOL()">

<div id="mainpage">
    <div id="logo"></div>
    <div id="showSYMBOL">test</div>
    <div id="stock2">Location Test</div>
    <div id="stock3"></div>
</div>

</body>
</html>

if (window.DOMParser) {
  parser=new DOMParser();
  xmlDoc=parser.parseFromString(xml,"text/xml");
} else {
  xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
  xmlDoc.async=false;
  xmlDoc.loadXML(xml); 
}

console.log(xmlDoc.getElementsByTagName("symbol")[0].getAttribute('data'));

您需要属性值替换这个

<script>

function displaySYMBOL()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","stock.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

x=xmlDoc.getElementsByTagName("finance");
i=0;

symbol=(x[i].getElementsByTagName("symbol")[0].childNodes[0].nodeValue);
document.getElementById("showSYMBOL").innerHTML=symbol;
}
</script>
</head>
<body onload="displaySYMBOL()">

<div id="mainpage">
    <div id="logo"></div>
    <div id="showSYMBOL">test</div>
    <div id="stock2">Location Test</div>
    <div id="stock3"></div>
</div>

</body>
</html>

symbol=(x[i].getElementsByTagName("symbol")[0].childNodes[0].nodeValue);

用这个

<script>

function displaySYMBOL()
{
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.open("GET","stock.xml",false);
xmlhttp.send();
xmlDoc=xmlhttp.responseXML;

x=xmlDoc.getElementsByTagName("finance");
i=0;

symbol=(x[i].getElementsByTagName("symbol")[0].childNodes[0].nodeValue);
document.getElementById("showSYMBOL").innerHTML=symbol;
}
</script>
</head>
<body onload="displaySYMBOL()">

<div id="mainpage">
    <div id="logo"></div>
    <div id="showSYMBOL">test</div>
    <div id="stock2">Location Test</div>
    <div id="stock3"></div>
</div>

</body>
</html>

symbol=(x[i].getElementsByTagName("symbol")[0].getAttribute("data"));

因此，是否使用您期望的x[i].GetElementsByTagnameSymble[0].childNodes[0].nodeValue中的值设置了符号？我希望符号设置的值是xml工作表中的XLNX。请参阅下面的答案，检查JSFIDLE。我想这就是你要找的？就是这样。谢谢你。