如何使用javascript访问XML子节点 [英] how to access XML subnodes using javascript
问题描述
我想使用javascript从加载到网页的xml文件中获取信息。
I want to use javascript to get information from a xml file loaded into a webpage.
下面给出的是我正在使用的xmlfile(a.xml)。
The below given is the xmlfile(a.xml) i am using.
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页面
I want to access nodes under a specific node in xml using java script? That is i want to access Time node after i access step node. And the below given is the index.html page to which i want to load the xml data
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>
在上面的代码中,我试图访问步骤节点下的Time子节点。
我在上面的例子中使用了数组,因为我使用的xml页面有很多Step子节点,我想在Step下为每一个访问Time子节点。
In the above code I am trying to access the Time subnode under the step node. and I have used arrays in the above example as the xml page i am using have lots of Step subnodes , and i want to access the Time subnodes under Step for each one of them.
谢谢,
任何帮助表示赞赏
thanks, Any help is appreciated
推荐答案
您可以选择迭代直接使用xml节点,使用 XPath处理API 。它基本上足以重写你的 showTheList
函数。以下是一个完整的独立解决方案:
You have the option of iterating over the xml nodes directly, employing one of the XPath processing APIs. It basically suffices to rewrite your showTheList
function. What follows is a complete standalone solution, however:
<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
元素。
The sample xml provided in the question is not well-formed since it lacksa unique root element. The solution would still work but only consider the first Step
element.
更新
要允许来自外部源的xml,ajax代码需要重新引入:
To allow for xml from an external source, the ajax code needs to be reintroduced:
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
缺乏本地数据,注册<$不再有意义c $ c> showTheList 作为onLoad处理程序。
Lacking local data, it makes no longer sense to register showTheList
as an onLoad handler.
<body onLoad="getData()">
这篇关于如何使用javascript访问XML子节点的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!