<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="jquery.js">
</script>
<script>
$(document).ready(function() {
$("button").click(function() {
$.get("music_list.xml",
function(xhr) {
console.log($(xhr).find("TRACK").length);
$(xhr).find("TRACK").each(function(index, ele) {
var titles = $(ele).find("TITLE").text();
var artist = $(ele).find("ARTIST").text();
$('ul').append('<li>' + artist + '-' + titles + '</li>');
});
});
});
});
</script>
</head>
<body>
<button>向頁面發送 HTTP get 請求，並獲得返回xml的結果</button>
<ul>
</ul>
</body>
</html>
console.log($(xhr).find("TRACK").length);這句對返回的xhr對象使用find()方法find的參數採用選擇器的方式，此處選擇TRACK標籤作爲list的節點，console.log($(xhr).find("TRACK")就是list集
<?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>
