使用Ajax读取xml文件
<!DOCTYPE html>
<html>
<header>
<style>
table,
tr,
th,
td {
border: 2px solid rgb(20, 59, 230);
border-collapse: collapse;
text-align: center;
}
th,
td {
padding: 5px;
}
</style>
</header>
<body>
<h1>xml http request object</h1>
<button type="button">Display Music</button>
<button type="button">Previous</button>
<button type="button">Next</button>
<button type="button">get my music list</button>
<table id="showMUSIC"></table>
<table id="demo"></table>
<script>
var x, xmlhttp, xmlDoc;
xmlhttp = new XMLHttpRequest();
xmlhttp.open("GET", "/files/music_list.xml", false);
xmlhttp.send();
xmlDoc = xmlhttp.responseXML;
var table = "<tr> <th>Owner</th> <th>User</th></tr>"
var content = document.getElementById('demo');
var x = xmlDoc.getElementsByTagName('TRACK');
for (i = 0; i <x.length; i++) {
table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
table += x.getElementsByTagName("ARTIST").childNodes.nodeValue;
table += "</td><td>";
table +=x.getElementsByTagName("TITLE").childNodes.nodeValue;
table += "</td></tr>";
}
document.getElementById("demo").innerHTML = table;
var i = 0;
function next() {
// 显示下一首歌曲，除非已到达最后一首
if (i < x.length - 1) {
i++;
displayMUSIC(i);
}
}
function previous() {
// 显示上一首歌曲，除非已到达第一首
if (i > 0) {
i--;
displayMUSIC(i);
}
}
function displayMUSIC(i) {
document.getElementById("showMUSIC").innerHTML =
"<ul>" +
"<li>曲目：" +
x.getElementsByTagName("TITLE").childNodes.nodeValue + "</li>" +
"<li>艺术家：" +
x.getElementsByTagName("ARTIST").childNodes.nodeValue + "</li>" +
"<li>专辑：" +
x.getElementsByTagName("ALBUM").childNodes.nodeValue + "</li>" +
"<li>国家：" +
x.getElementsByTagName("COUNTRY").childNodes.nodeValue + "</li>" +
"<li>公司：" +
x.getElementsByTagName("COMPANY").childNodes.nodeValue + "</li>" +
"<li>年份：" +
x.getElementsByTagName("YEAR").childNodes.nodeValue + "</li>" +
"</ul>";
}
function loadDoc() {
document.getElementById("demo").innerHTML = table;
}
</script>
</body>
</html>
XML文件
<?xml version="1.0" encoding="utf-8"?>
<CATALOG>
<TRACK>
<TITLE>再见</TITLE>
<ARTIST>邓紫棋</ARTIST>
<ALBUM>新的心跳</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>邓紫棋工作室</COMPANY>
<YEAR>2016</YEAR>
</TRACK>
<TRACK>
<TITLE>All I Ask</TITLE>
<ARTIST>Adele</ARTIST>
<ALBUM>25</ALBUM>
<COUNTRY>英国</COUNTRY>
<COMPANY>XL Recordings</COMPANY>
<YEAR>2015</YEAR>
</TRACK>
<TRACK>
<TITLE>之乎者也</TITLE>
<ARTIST>罗大佑</ARTIST>
<ALBUM>青春舞曲</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>滚石唱片</COMPANY>
<YEAR>1982</YEAR>
</TRACK>
<TRACK>
<TITLE>Never Be Alone</TITLE>
<ARTIST>Shawn Mendes</ARTIST>
<ALBUM>Handwritten</ALBUM>
<COUNTRY>加拿大</COUNTRY>
<COMPANY>环球唱片</COMPANY>
<YEAR>2015</YEAR>
</TRACK>
<TRACK>
<TITLE>慢慢</TITLE>
<ARTIST>张学友</ARTIST>
<ALBUM>忘记你我做不到</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>环球唱片</COMPANY>
<YEAR>1996</YEAR>
</TRACK>
<TRACK>
<TITLE>Complicated</TITLE>
<ARTIST>Avril Lavigne</ARTIST>
<ALBUM>Let Go</ALBUM>
<COUNTRY>加拿大</COUNTRY>
<COMPANY>索尼音乐</COMPANY>
<YEAR>2002</YEAR>
</TRACK>
<TRACK>
<TITLE>三生三世</TITLE>
<ARTIST>张杰</ARTIST>
<ALBUM>三生三世十里桃花</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>仁溪音乐</COMPANY>
<YEAR>2018</YEAR>
</TRACK>
<TRACK>
<TITLE>Five Hundred Miles</TITLE>
<ARTIST>Justin Timberlake</ARTIST>
<ALBUM>Inside Llewyn Davis</ALBUM>
<COUNTRY>美国</COUNTRY>
<COMPANY>华纳唱片</COMPANY>
<YEAR>2013</YEAR>
</TRACK>
<TRACK>
<TITLE>演员</TITLE>
<ARTIST>薛之谦</ARTIST>
<ALBUM>绅士</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>海蝶音乐</COMPANY>
<YEAR>2016</YEAR>
</TRACK>
<TRACK>
<TITLE>Numb</TITLE>
<ARTIST>Linkin Park</ARTIST>
<ALBUM>Meteora</ALBUM>
<COUNTRY>美国</COUNTRY>
<COMPANY>华纳唱片</COMPANY>
<YEAR>2003</YEAR>
</TRACK>
<TRACK>
<TITLE>给未来的自己</TITLE>
<ARTIST>梁静茹</ARTIST>
<ALBUM>崇拜</ALBUM>
<COUNTRY>马来西亚</COUNTRY>
<COMPANY>相信音乐</COMPANY>
<YEAR>2007</YEAR>
</TRACK>
<TRACK>
<TITLE>The Monster</TITLE>
<ARTIST>Rihanna</ARTIST>
<ALBUM>The Marshall Mathers LP2</ALBUM>
<COUNTRY>巴巴多斯</COUNTRY>
<COMPANY>环球唱片</COMPANY>
<YEAR>2013</YEAR>
</TRACK>
<TRACK>
<TITLE>我终于失去了你</TITLE>
<ARTIST>赵传</ARTIST>
<ALBUM>我终于失去了你</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>滚石唱片</COMPANY>
<YEAR>1989</YEAR>
</TRACK>
<TRACK>
<TITLE>Main Titles</TITLE>
<ARTIST>Ramin Djawadi</ARTIST>
<ALBUM>Game of Thrones</ALBUM>
<COUNTRY>德国</COUNTRY>
<COMPANY>索尼音乐</COMPANY>
<YEAR>2011</YEAR>
</TRACK>
<TRACK>
<TITLE>传奇</TITLE>
<ARTIST>李健</ARTIST>
<ALBUM>似水流年</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
<YEAR>2003</YEAR>
</TRACK>
<TRACK>
<TITLE>完美生活</TITLE>
<ARTIST>许巍</ARTIST>
<ALBUM>时光漫步</ALBUM>
<COUNTRY>中国</COUNTRY>
<COMPANY>金牌大风</COMPANY>
<YEAR>2002</YEAR>
</TRACK>
</CATALOG>
页:
[1]