XML数据在Javascript,HTML中使用

XML 前端之家
前端之家收集整理的这篇文章主要介绍了XML数据在Javascript,HTML中使用，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

cd_catalog.xml

<?xml version="1.0" encoding="UTF-8"?>
<CATALOG>
<CD>
<TITLE>帝国暴风雪</TITLE>
<ARTIST> Bob Dylan </ARTIST>
<COUNTRY> USA </COUNTRY>
<COMPANY>哥伦比亚</COMPANY>
<PRICE> 10.90 </PRICE>
<YEAR> 1985 </YEAR>
</CD>
<CD>
<TITLE>隐藏你的心脏</TITLE>
<ARTIST> Bonnie Tyler </ARTIST>
<COUNTRY> UK </COUNTRY>
<COMPANY> CBS记录</COMPANY>
<PRICE> 9.90 </PRICE>
<YEAR> 1988 </YEAR>
</CD>
<CD>
<TITLE> Greatest Hits </TITLE>
<ARTIST> Dolly Parton </ARTIST>
<COUNTRY> USA </COUNTRY>
<COMPANY> RCA </COMPANY>
<PRICE> 9.90 </PRICE>
<YEAR> 1982 </YEAR>
</CD>
<CD>
<TITLE>还有蓝调</TITLE>
<ARTIST> Gary Moore </ARTIST>
<COUNTRY> UK </COUNTRY>
<COMPANY>维珍记录</COMPANY>
<PRICE> 10.20 </PRICE>
<YEAR> 1990 </YEAR>
</CD>
<CD>
<TITLE>爱神</TITLE>
<ARTIST> Eros Ramazzotti </ARTIST>
<COUNTRY> EU </COUNTRY>
<COMPANY> BMG </COMPANY>
<PRICE> 9.90 </PRICE>
<YEAR> 1997 </YEAR>
</CD>
<CD>
<TITLE>仅限一天</TITLE>
<ARTIST>Bee Gees </ARTIST>
<COUNTRY> UK </COUNTRY>
<COMPANY>宝丽</COMPANY>
<PRICE> 10.90 </PRICE>
<YEAR> 1998 </YEAR>
</CD>
<CD>
<TITLE> Sylvias Mother </TITLE>
<ARTIST> Dr.Hook </ARTIST>
<COUNTRY> UK </COUNTRY>
<COMPANY> CBS </COMPANY>
<PRICE> 8.10 </PRICE>
<YEAR> 1973 </YEAR>
</CD>
<CD>
<TITLE> Maggie May </TITLE>
<ARTIST> Rod Stewart </ARTIST>
<COUNTRY> UK </COUNTRY>
<COMPANY>皮克威克</COMPANY>
<PRICE> 8.50 </PRICE>
<YEAR> 1990 </YEAR>
</CD>
<CD>
<TITLE>罗曼扎</TITLE>
<ARTIST> Andrea Bocelli </ARTIST>
<COUNTRY> EU </COUNTRY>
<COMPANY>宝丽</COMPANY>
<PRICE> 10.80 </PRICE>
<YEAR> 1996 </YEAR>
</CD>
<CD>
<TITLE>当一个男人爱女人</TITLE>
<ARTIST> Percy Sledge </ARTIST>
<COUNTRY> USA </COUNTRY>
<COMPANY>大西洋</COMPANY>
<PRICE> 8.70 </PRICE>
<YEAR> 1987 </YEAR>
</CD>
<CD>
<TITLE>黑天使</TITLE>
<ARTIST>野蛮玫瑰</ARTIST>
<COUNTRY> EU </COUNTRY>
<COMPANY>兆</COMPANY>
<PRICE> 10.90 </PRICE>
<YEAR> 1995 </YEAR>
</CD>
<CD>
<TITLE>1999年格莱美奖提名人</TITLE>
<ARTIST>许多</ARTIST>
<COUNTRY> USA </COUNTRY>
<COMPANY>格莱美</COMPANY>
<PRICE> 10.20 </PRICE>
<YEAR> 1999 </YEAR>
</CD>
<CD>
<TITLE>为了好时光</TITLE>
<ARTIST>肯尼·罗杰斯</ARTIST>
<COUNTRY> UK </COUNTRY>
<COMPANY> Mucik Master </COMPANY>
<PRICE> 8.70 </PRICE>
<YEAR> 1995 </YEAR>
</CD>
<CD>
<TITLE>大威利风格</TITLE>
<ARTIST>威尔·史密斯</ARTIST>
<COUNTRY> USA </COUNTRY>
<COMPANY>哥伦比亚</COMPANY>
<PRICE> 9.90 </PRICE>
<YEAR> 1997 </YEAR>
</CD>
<CD>
<TITLE>Tupelo蜂蜜</TITLE>
<ARTIST> Van Morrison </ARTIST>
<COUNTRY> UK </COUNTRY>
<COMPANY>宝丽</COMPANY>
<PRICE> 8.20 </PRICE>
<YEAR> 1971 </YEAR>
</CD>
<CD>
<TITLE> Soulsville </TITLE>
<ARTIST> Jorn Hoel </ARTIST>
<COUNTRY>挪威</COUNTRY>
<COMPANY> WEA </COMPANY>
<PRICE> 7.90 </PRICE>
<YEAR> 1996 </YEAR>
</CD>
<CD>
<TITLE>最好的</TITLE>
<ARTIST> Cat Stevens </ARTIST>
<COUNTRY> UK </COUNTRY>
<COMPANY>岛</COMPANY>
<PRICE> 8.90 </PRICE>
<YEAR> 1990 </YEAR>
</CD>
<CD>
<TITLE>停止</TITLE>
<ARTIST> Sam Brown </ARTIST>
<COUNTRY> UK </COUNTRY>
<COMPANY> A和M </COMPANY>
<PRICE> 8.90 </PRICE>
<YEAR> 1988 </YEAR>
</CD>
<CD>
<TITLE>间谍桥梁</TITLE>
<ARTIST>帕乌</ARTIST>
<COUNTRY> UK </COUNTRY>
<COMPANY>警报器</COMPANY>
<PRICE> 7.90 </PRICE>
<YEAR> 1987 </YEAR>
</CD>
<CD>
<TITLE>私人舞者</TITLE>
<ARTIST> Tina Turner </ARTIST>
<COUNTRY> UK </COUNTRY>
<COMPANY>国会大厦</COMPANY>
<PRICE> 8.90 </PRICE>
<YEAR> 1983 </YEAR>
</CD>
<CD>
<TITLE> Midt om natten </TITLE>
<ARTIST> Kim Larsen </ARTIST>
<COUNTRY> EU </COUNTRY>
<COMPANY>组曲</COMPANY>
<PRICE> 7.80 </PRICE>
<YEAR> 1983 </YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala音乐会</TITLE>
<ARTIST> Luciano Pavarotti </ARTIST>
<COUNTRY> UK </COUNTRY>
<COMPANY> DECCA </COMPANY>
<PRICE> 9.90 </PRICE>
<YEAR> 1991 </YEAR>
</CD>
<CD>
<TITLE>托架的托架</TITLE>
<ARTIST> Otis Redding </ARTIST>
<COUNTRY> USA </COUNTRY>
<COMPANY>大西洋</COMPANY>
<PRICE> 7.90 </PRICE>
<YEAR> 1987 </YEAR>
</CD>
<CD>
<TITLE>图画书</TITLE>
<ARTIST>简约红色</ARTIST>
<COUNTRY> EU </COUNTRY>
<COMPANY>艾丽卡</COMPANY>
<PRICE> 7.20 </PRICE>
<YEAR> 1985 </YEAR>
</CD>
<CD>
<TITLE>红色</TITLE>
<ARTIST> The Communities </ARTIST>
<COUNTRY> UK </COUNTRY>
<COMPANY>伦敦</COMPANY>
<PRICE> 7.80 </PRICE>
<YEAR> 1987 </YEAR>
</CD>
<CD>
<TITLE>解开我的心脏</TITLE>
<ARTIST>Joe Cocker </ARTIST>
<COUNTRY> USA </COUNTRY>
<COMPANY> EMI </COMPANY>
<PRICE> 8.20 </PRICE>
<YEAR> 1987 </YEAR>
</CD>
</CATALOG>

index.html

<!DOCTYPE html>
<html>
    <body>

        <script> 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","cd_catalog.xml",false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; document.write("<table border='1'>"); var x = xmlDoc.getElementsByTagName("CD"); for ( i = 0; i < x.length; i++) { document.write("<tr><td>"); document.write(x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue); document.write("</td><td>"); document.write(x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue); document.write("</td></tr>"); } document.write("</table>"); </script>

    </body>
</html>

first.html

<!DOCTYPE html>
<html>

    <head>
        <script>if (window.XMLHttpRequest) { // code for IE7+,Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6,false); xmlhttp.send(); xmlDoc = xmlhttp.responseXML; x = xmlDoc.getElementsByTagName("CD"); i = 0; function displayCD() { artist = (x[i].getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue); title = (x[i].getElementsByTagName("TITLE")[0].childNodes[0].nodeValue); year = (x[i].getElementsByTagName("YEAR")[0].childNodes[0].nodeValue); txt = "Artist: " + artist + "<br>Title: " + title + "<br>Year: " + year; document.getElementById("showCD").innerHTML = txt; } function next() { if (i < x.length - 1) { i++; displayCD(); } } function prevIoUs() { if (i > 0) { i--; displayCD(); } }</script>
    </head>

    <body onload="displayCD()">
        <div id='showCD'></div>
        <br>
        <input type="button" onclick="prevIoUs()" value="<<" />
        <input type="button" onclick="next()" value=">>" /></body>

</html>

运行结果如图:

Default.html

<!DOCTYPE html>
<html lang="en">

<head>
    <title>XML Parser</title>    
    <Meta charset="utf-8"/>
    <script type="text/javascript"> var xmlDoc; function validate() { // 以确定是否输入了URL var n=url.value; if (n.length < 1||n==" "||n==" "||n==" ") { alert("URL required !"); return false; } else { // 如果输入了有效的URL，则会加载XML文件以进行解析 xmlDoc=loadXML(n); parse(xmlDoc); } } function loadXML(url) { if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest(); //IE7+,Safari else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); // IE6,IE5 xmlhttp.open("GET",url,false);//open,send,responseXML false-synchronous try { xmlhttp.send(); //XMLHTTPRequest的属性 } catch(err) { alert("文件不存在!"); return false; } xmlDoc=xmlhttp.responseXML; return xmlDoc; } function parse(xmlDoc) { if (xmlDoc.getElementsByTagName("parsererror").length > 0) { alert("XML文件中的错误!"); return false; } papers=xmlDoc.getElementsByTagName("Row"); if(papers.item(0)==null) { alert("没有新闻呈现!"); return false; } else //否则如果FF,一旦XML对象加载，就执行脚本 { xmlDoc.onload=generateHTML(xmlDoc); Table_Window = window.open("","Default","scrollbars=1,height=600,width=950"); Table_Window.document.open(); Table_Window.document.write(html_text); Table_Window.document.close(); } } function generateHTML(xmlDoc) { ELEMENT_NODE = 1; //MS解析器不定义Node.ELEMENT_NODE root=xmlDoc.DocumentElement; html_text="<html><head><title>XML解析结果</title></head><body>"; html_text+="<table border='2'>"; html_text+="<tbody>"; html_text+="<tr>"; //获取带有指定标签名称的所有元素 H=xmlDoc.getElementsByTagName("Header")[0]; dataTag=H.getElementsByTagName("Data"); //输出标题 for(i=0;i<dataTag.length;i++) { if(dataTag[i].nodeType==ELEMENT_NODE) { header=dataTag[i].firstChild.nodeValue; //x.nodeValue - x 的值 html_text+="<th>"+header+"</th>"; } } html_text+="</tr>"; //表头数据完成 papers=xmlDoc.getElementsByTagName("Row"); for(i=0;i<papers.length;i++) //遍历所有新闻 { html_text+="<tr>"; if(papers[i].getElementsByTagName("Slot")[0] == null || papers[i].getElementsByTagName("Slot")[0].childNodes[0] == null) slot=""; else slot=papers[i].getElementsByTagName("Slot")[0].childNodes[0].nodeValue; html_text+="<td>"+slot+"</td>"; if(papers[i].getElementsByTagName("Newspaper")[0] == null || papers[i].getElementsByTagName("Newspaper")[0].childNodes[0] == null) newspaper=""; else newspaper=papers[i].getElementsByTagName("Newspaper")[0].childNodes[0].nodeValue; html_text+="<td>"+newspaper+"</td>"; Location = papers[i].getElementsByTagName("Location"); if(Location[0].getElementsByTagName("City")[0] == null || Location[0].getElementsByTagName("City")[0].childNodes[0] == null) city = "N.A"; else city = Location[0].getElementsByTagName("City")[0].childNodes[0].nodeValue; if(Location[0].getElementsByTagName("State")[0] == null || Location[0].getElementsByTagName("State")[0].childNodes[0] == null ) state = "N.A"; else state = Location[0].getElementsByTagName("State")[0].childNodes[0].nodeValue; if(city=="N.A"&&state=="N.A") html_text+="<td></td>"; else if(city=="N.A"&&state!="N.A") html_text+="<td><ul><li>"+state+"</li></ul></td>"; else if(city!="N.A"&&state=="N.A") html_text+="<td><ul><li>"+city+"</li></ul></td>"; else html_text+="<td><ul><li>"+city+"</li><li>"+state+"</li></ul></td>"; if(papers[i].getElementsByTagName("HomePage")[0] == null || papers[i].getElementsByTagName("HomePage")[0].childNodes[0] == null) homepage=""; else homepage=papers[i].getElementsByTagName("HomePage")[0].childNodes[0].nodeValue; html_text+="<td><a href=\""+homepage+"\"/a>"+homepage+"</td>"; if(papers[i].getElementsByTagName("logo")[0] == null || papers[i].getElementsByTagName("logo")[0].childNodes[0] == null) { logo=""; html_text+="<td><img src=\" \" width=300 height=175 /></td>"; } else { logo=papers[i].getElementsByTagName("logo")[0].childNodes[0].nodeValue; html_text+="<td><img src=\""+logo+"\" width=100 height=75 /></td>"; } html_text+="</tr>"; } html_text+="</tbody>"; html_text+="</table>"; html_text+="<noscript></noscript>"; html_text+="</body></html>"; } </script>
</head>    

    <!--body part of the HTML code-->
    <body>
        <center>
            <div style="width:500px; margin:200px auto;"> 
                <form action=" " > 
                    <h2>输入Newspaper List的XML文件的URL</h2>    
                    <input type="text" maxlength="100" size="40" id="url" value="newslist.xml" /><br/><br/>
                    <input type="button" value="提交查询" onclick="validate()" />
                </form>
            </div> 
        </center>  

    <noscript></noscript>    
    </body>   
</html>
@H_332_2301@运行结果:
原文链接：https://www.f2er.com/xml/293980.html

猜你在找的XML相关文章

10分钟掌握XML、JSON及其解析
引言 NOKIA 有句著名的广告语：“科技以人为本”。任何技术都是为了满足人的生产生活需要而...
[CXF REST标准实战系列] 一、JAXB xml与javaBean的转换
Writer：BYSocket（泥沙砖瓦浆木匠） 微博：BYSocket 豆瓣：BYSocket Reprint it anywhere...
[CXF REST标准实战系列] 一、JAXB xml与javaBean的转换
Writer：BYSocket（泥沙砖瓦浆木匠） 微博：BYSocket 豆瓣：BYSocket Reprint it anywhere...
10分钟掌握XML、JSON及其解析
http://blog.jobbole.com/79252/ 引言 NOKIA 有句著名的广告语：“科技以人为本”。任何技...
自定义圆形控件RoundImageView并认识一下attr.xml
(点击上方公众号，可快速关注) 公众号：smart_android 作者：耿广龙｜loonggg 点击“阅读原...
10分钟掌握XML、JSON及其解析
引言 NOKIA 有句著名的广告语：“科技以人为本”。任何技术都是为了满足人的生产生活需要而...
10分钟掌握XML、JSON及其解析(上)
 (点击上方公众号，可快速关注) 来源： Long Luo 的博客 链接：http://longluo.github.i...
10分钟掌握XML、JSON及其解析(中)
接上文 二、JSON XML很好很强大，但是最近有另外一个时代弄潮儿，这就是JSON。现在JSON的光...
10分钟掌握XML、JSON及其解析(下)
接上文 2.4 如何解析JSON？ Android JSON所有相关类，都在org.json包下。 包括JSONObject、...
10分钟掌握XML、JSON及其解析
原文出处：  Long Luo 的博客（@Long_Luo）   引言 NOKIA 有句著名的广告语：“科技以人...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作