加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 （https://www.lidatong.com.cn/）- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置： 首页 > 百科 > 正文

XML数据在Javascript,HTML中使用

发布时间：2020-12-16 08:13:51 所属栏目：百科 来源：网络整理
导读：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 ARTI

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>

运行结果:

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
    相关内容
      推荐文章
        站长推荐
        热点阅读

          【免责声明】本站内容转载自互联网，其发布内容言论不代表本站观点，如果其链接、内容的侵犯您的权益，烦请提交相关链接至邮箱bqsm@foxmail.com我们将及时予以处理。

          建议您使用1920×1080分辨率、谷歌浏览器Google Chrome、Microsoft Edge以获得本站的最佳浏览效果

          Copygight © 2008-2022 https://www.lidatong.com.cn/ All Rights Reserved. 李大同