|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
/ v9 @7 v1 I q; i) q! Y
! x; Y( A" v! C* W, e5 l% r3 b
$ s: J/ ]2 }, K! X% } L; I[mw_shl_code=html,true]* R' S' z/ u6 _5 U4 S7 s8 x
3 t0 `% V2 u# P! g% \
<!DOCTYPE html>% v, S/ I G; u l# x: c
<html>7 Z. Q( V+ y/ }* z
<header>
$ _: L& |; l4 x <style>
8 v3 G# M% P' O" N. t7 D% | table,
6 E* j P" V4 }4 ^, [! g tr,2 M U) j: F) o/ k) W, \4 [5 b8 X
th,9 V( I! h9 F- _) t% F/ q
td {$ }# ~/ V. _4 q/ q' w
border: 2px solid rgb(20, 59, 230);
& n m- K1 y4 o5 O0 ~ h border-collapse: collapse;( M& a8 [+ D) a9 G7 t7 n
text-align: center;
2 n8 z/ F6 e6 D: b' l/ z# a- f' Q }
+ n" F4 w( ~$ m- \) [0 |) V5 j$ m' I; i
1 O( \1 c8 k$ A2 n, \3 G$ A6 b th,
& ~% T4 M# |% a0 ~0 D2 b3 n td {" o& x4 f4 N' r7 D8 E+ ^
padding: 5px;
) _% i2 N8 C5 e6 T" M }
6 n) A1 o6 ^- ?9 C: P </style>
1 B6 U& q3 w2 G. ^( E; @2 H4 S: n</header>
+ n: D i6 R8 G! n
$ {6 F' L: u, {4 p<body>
; }& e& G$ ?) J8 ^4 D <h1>xml http request object</h1>
N7 A) a' _# w! R <button type="button">Display Music</button>
; X) ?4 q& \2 m" [2 Y. g6 h( P$ L <button type="button">Previous</button>
\- B5 W+ ~0 ]9 j0 A) z y <button type="button">Next</button>
' h" ]5 L' f8 l. T7 j <button type="button">get my music list</button>. L% M8 ?5 ^3 _
<table id="showMUSIC"></table>8 e1 K/ J$ Y" a& W
<table id="demo"></table>
- O5 W- v- X& j n' n <script>
+ I+ D8 m! c* j8 k" z- J+ K! a* A$ G9 m0 R+ ?2 Y5 J
var x, xmlhttp, xmlDoc;
' Y- D! i5 _0 W0 I% Q 6 a- t0 n& v4 k1 B
xmlhttp = new XMLHttpRequest();; {( R4 y( Y$ ]; J! I
xmlhttp.open("GET", "/files/music_list.xml", false);& b% c. v2 l4 ^
xmlhttp.send();2 k* |4 p9 I7 g
. N& |4 {5 ~0 k' {2 ^% ~0 _4 o xmlDoc = xmlhttp.responseXML;
# @ A% p; P3 e/ @$ |5 |9 n2 u; ^ var table = "<tr> <th>Owner</th> <th>User</th></tr>"8 m9 ?3 C) d3 Y1 m2 c
var content = document.getElementById('demo');) \& C5 Z3 t3 H% D, J& l
var x = xmlDoc.getElementsByTagName('TRACK');$ v9 W4 r6 g+ n' J5 C4 J1 u
for (i = 0; i <x.length; i++) {
/ M. O2 L2 S4 {6 B2 k6 I( o table += "<tr onclick='displayMUSIC(" + i + ")'><td>";5 w- V5 `) \; e/ }# W3 c
table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;! b$ e3 a) U! \9 f! v. g/ o
table += "</td><td>";6 h; G; _. v2 {' F, b9 A1 h" H
table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
: X8 \/ M5 i1 P: @" w table += "</td></tr>";
9 Q0 f) c+ r: s5 H}
( I0 \; ^# h# T% O* @% K& I' n+ o- [! Y3 ?9 ]0 _5 Z" i
document.getElementById("demo").innerHTML = table;
' ?" S2 @4 B- c) i# w0 P5 Uvar i = 0;' O1 ?" S" Z' M5 @+ w( f+ `" i. o9 ^
function next() {+ `0 [3 @/ ?8 C& x2 q/ n
// 显示下一首歌曲,除非已到达最后一首8 d" G5 k+ d0 v# O y: Y# ^
if (i < x.length - 1) {
3 ^6 z+ g% F9 B# d6 N i++;
. s9 c7 p6 D8 ^9 ~ displayMUSIC(i);6 a+ J6 ~! M; d2 @( q
}# v1 }" p* H6 n; w9 H1 [
}' W0 J" `. T; a/ x# g9 r* f
- k1 x/ ^1 f2 c& w function previous() {- v! O- H s8 r5 x
// 显示上一首歌曲,除非已到达第一首9 r1 H4 p2 v& d- q6 }
if (i > 0) {
' v( _) l" G6 J1 u: ? i--;
) | B9 B: {* G5 ?; z" P displayMUSIC(i);( Z8 j4 m! W7 l0 k
}
# r6 T" @7 v$ x N1 {4 g3 E }7 R) c+ y; F% Q: h
f) \$ F) {. E$ Q# Y function displayMUSIC(i) {
: P+ u6 h: U- g3 Y5 g; Z, P0 e document.getElementById("showMUSIC").innerHTML =
\! v3 R9 t8 a "<ul>" +7 l$ w# B7 E: S4 w" l6 k
"<li>曲目:" +6 B g' ?9 K$ F& z' v6 ^
x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +- ~. [6 K+ g3 i* x1 a9 x
"<li>艺术家:" +# }) a2 `4 s& K6 s8 _0 q" P7 `# m
x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
$ s c# T& j M9 j( v9 c "<li>专辑:" +
- R" K5 u7 b4 S5 D2 B% s x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
$ U7 V% `+ O9 a+ v5 q* c9 B "<li>国家:" +
/ K! T4 T4 e* C' R6 y5 a1 m x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
' }9 [3 e! ~0 e: P, f4 Z& h "<li>公司:" +
" H; E( }3 |3 @( u x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +3 F: N' V5 `: A( _3 p! ~/ }1 w
"<li>年份:" +
5 n+ N: p) x9 o: G: d x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
; o/ N* V: h$ d( l W "</ul>";- L! K M1 }6 p' R$ n) s6 s
}
2 M" u$ p6 l) J7 H$ g
# u. ?3 t) L" | X0 @' P function loadDoc() {
9 I! g+ a! i3 {: O4 m: q
& f/ o3 y4 W# C: r5 | document.getElementById("demo").innerHTML = table;
2 ~4 w1 |0 Z1 E& j }' u3 S3 a0 P" R+ u* Y1 I
) c' Y% D1 z3 J </script>: i1 j* h( w1 W" a1 W' T4 ^
7 k; }/ J2 y- a" c% E: a
" @, {0 V: I# u
</body>
5 V) t7 v. i$ g" w! `" t2 h5 b% C8 E4 Y; u6 L' N0 {' z
</html>6 h0 D, X! [' D( H
& [' ?2 m2 R* c( I$ H& d+ e9 @5 v4 d! J
[/mw_shl_code]" `1 u; v4 x3 i( B
# Z$ W* K' j/ Z
( \! ~4 o; W: Z& w1 d: K/ k$ {9 ~6 Z, n# {' k& @! h
XML文件
: I' I p, Z% \+ z) D' O5 D( I0 J+ e3 X# s n2 A n7 L" |
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
2 A P) H9 T9 R, H3 ?<CATALOG>
5 |# X. N! V9 j+ ?4 u/ ]4 b* a# y<TRACK>
. q/ f3 ]% k( f$ O/ v' X; L<TITLE>再见</TITLE>6 X) J3 p B" E0 k5 A7 Y
<ARTIST>邓紫棋</ARTIST>
8 D# `& b- _0 Z; c; B<ALBUM>新的心跳</ALBUM>
6 G7 o5 h( b6 E _5 b/ g<COUNTRY>中国</COUNTRY>
, b& a# h# x2 H4 w<COMPANY>邓紫棋工作室</COMPANY>+ Q/ y( b( V+ f( ?" D
<YEAR>2016</YEAR>* U' s i1 w j* m9 }% ?( q
</TRACK>& `; K9 ]- n7 c
% a& r3 G) U9 S# Y
<TRACK>
0 [8 K8 U# S0 c6 I7 y- j- G<TITLE>All I Ask</TITLE>) T7 I; y, N& M& ~3 k
<ARTIST>Adele</ARTIST>6 P q$ R4 o/ e
<ALBUM>25</ALBUM>
) d, k+ x; Q$ }. E6 `" F: I<COUNTRY>英国</COUNTRY>2 I3 s$ h3 n' U4 {% ~' i( Z9 K
<COMPANY>XL Recordings</COMPANY>
0 L9 o) E* B0 [0 ^( J7 a<YEAR>2015</YEAR>$ r) ~- ~7 b+ U6 b7 {9 U
</TRACK>
+ k& P+ X/ N7 ^( B6 p* B: ~. q* y [! a
<TRACK>
: [9 p0 R; m8 R: b7 \" u% ]- U<TITLE>之乎者也</TITLE>
n: r6 ?& k' k6 C. z<ARTIST>罗大佑</ARTIST>) J; w/ U9 ` P+ A2 T x0 \* H
<ALBUM>青春舞曲</ALBUM>5 z$ S7 {- v& y( }
<COUNTRY>中国</COUNTRY>
6 Q5 E/ w3 _2 q<COMPANY>滚石唱片</COMPANY>* B( l$ A$ r6 ?
<YEAR>1982</YEAR>
" ^4 U; ^) {$ I, f9 u! w3 b/ p9 O6 t</TRACK>
0 @7 D9 o b6 @: o& i Q. o1 W4 g3 y6 M+ a _- ?. q
<TRACK>
7 C( s1 n8 B, E- R' m0 Y<TITLE>Never Be Alone</TITLE>
6 r6 o# t! q3 _, P1 [<ARTIST>Shawn Mendes</ARTIST>3 |% E8 k( ] |( L
<ALBUM>Handwritten</ALBUM>
& J. R. T4 m d: Y# Y( }& z% _<COUNTRY>加拿大</COUNTRY>% N) }2 ]% K4 G9 X r& R8 F
<COMPANY>环球唱片</COMPANY>: P5 o1 |5 s0 B* R
<YEAR>2015</YEAR>6 p L: Z1 l* t# F! ?4 G9 l3 R5 O
</TRACK>
8 }! ?, J! v& U4 b9 w5 o" o, C0 w' l Y1 [- ]3 q. H9 H: l. P
<TRACK>
0 b. I5 _9 \" O2 e8 ~<TITLE>慢慢</TITLE>3 i% u/ ^! q' _
<ARTIST>张学友</ARTIST>
1 I; m. Y J, Z3 O( r<ALBUM>忘记你我做不到</ALBUM>- l& }2 [2 M$ ?* ~4 }# Q! u9 z- z
<COUNTRY>中国</COUNTRY>
5 C" E) s0 x! H- J) o<COMPANY>环球唱片</COMPANY>
" B2 x$ S' {* ^- A# z0 H5 Z. ?<YEAR>1996</YEAR>4 J% K0 G( b. P
</TRACK>! N/ @& I) F" p
% Q$ H6 x6 r* m2 ?, d, z( T( d
<TRACK>
& j1 N) p6 I7 E! K# M: r" W<TITLE>Complicated</TITLE>
% l; g- {1 b+ M5 X% ]1 C" W! ?2 M<ARTIST>Avril Lavigne</ARTIST>. q1 H( t; u' r& ~
<ALBUM>Let Go</ALBUM>/ _% K1 {+ s! H: d
<COUNTRY>加拿大</COUNTRY>& G$ h; P& _; `5 ]8 A. {8 ]) n' i- a
<COMPANY>索尼音乐</COMPANY>5 N! O$ \7 `: X f
<YEAR>2002</YEAR>0 ~: J% M8 {' u: r
</TRACK>
, C8 r2 `# ?0 }, x# I' V* z
9 f5 M% l3 q/ I5 o" O- f$ O6 r8 J, Y<TRACK>+ X5 M, }/ P9 U( L4 ^8 g4 z
<TITLE>三生三世</TITLE>. ~1 ~$ X2 _' K8 X _: W1 o7 \' G4 O" ^
<ARTIST>张杰</ARTIST>7 d* }) f2 n7 t: u. n3 p1 M8 b5 ~7 M1 R
<ALBUM>三生三世十里桃花</ALBUM>4 w3 x0 x+ M0 m4 S
<COUNTRY>中国</COUNTRY>8 _! N P% ?# g: E7 N- A
<COMPANY>仁溪音乐</COMPANY>' G/ R5 Q4 c6 U* N6 E
<YEAR>2018</YEAR>" U$ S0 W7 ~+ J9 J1 l
</TRACK>
3 M3 ^( m3 w( Y( w! v: ^
7 i. b2 R" ]+ n<TRACK>
5 ~ n5 {- e" ?/ S3 V<TITLE>Five Hundred Miles</TITLE>
% k9 ~* H& ~5 O5 k' Y<ARTIST>Justin Timberlake</ARTIST>+ I5 V/ y# \# ~# y: Y6 @& E/ s2 c5 U
<ALBUM>Inside Llewyn Davis</ALBUM> K7 |9 t# Q* D$ g; J& r
<COUNTRY>美国</COUNTRY>
( W, V7 p( G7 ]9 T* p<COMPANY>华纳唱片</COMPANY>2 }; r- @1 L' P3 _
<YEAR>2013</YEAR>3 y9 ^) a4 R' a
</TRACK>8 q. J( n% J! i2 q5 O& Z
" q8 e$ V) o3 o, O<TRACK>
# ^7 v' f" {$ G7 q$ x$ R5 M<TITLE>演员</TITLE>
& D& b6 v& N a5 t: z* ^<ARTIST>薛之谦</ARTIST>- N/ {9 q! O+ R, D
<ALBUM>绅士</ALBUM>
9 d$ i2 I# M7 I& l<COUNTRY>中国</COUNTRY> H' [0 k6 C, g& E- J O1 T, [/ J
<COMPANY>海蝶音乐</COMPANY>
( l: r1 u7 o0 D<YEAR>2016</YEAR>
+ l1 E1 L* H5 l6 Z) E</TRACK>' J |3 q g0 M( b4 q1 b8 \
. _# ]+ L) L9 s& Z% B8 X) p( [% b
<TRACK>3 @+ C) h' Y" w$ h9 Q
<TITLE>Numb</TITLE>% A; g& h9 A0 \+ R7 O' N
<ARTIST>Linkin Park</ARTIST>
3 G3 @+ ^! {% @- C; s9 y# B! E<ALBUM>Meteora</ALBUM>" ~! R* q( ^2 \: E# i5 d X
<COUNTRY>美国</COUNTRY>
( [; R4 M, L& z- \! E: S3 Q<COMPANY>华纳唱片</COMPANY>5 _7 y% K. m- f
<YEAR>2003</YEAR>
' a5 r$ V. V5 k a4 t</TRACK>9 X# R g/ i7 M
) g) S1 j) J6 {1 G5 }1 S. u6 s<TRACK>
0 s: x* S. { v$ `1 v<TITLE>给未来的自己</TITLE>
$ {. S% h! ?, A" d<ARTIST>梁静茹</ARTIST>8 @! o, a' a! T. A5 Y& C0 E
<ALBUM>崇拜</ALBUM>" E6 u( f0 b/ Y0 N4 Z% D
<COUNTRY>马来西亚</COUNTRY> q9 [. w# B% I% b& B& T T
<COMPANY>相信音乐</COMPANY>: j* ]7 J0 T9 k/ H! X: m
<YEAR>2007</YEAR>
8 _& p2 [% a5 R/ x* p( @* v1 T2 F</TRACK>
' r4 u' O; \. ]7 `) o5 d
7 u( o3 C3 P$ E$ X<TRACK>
( q8 X; h( ?0 e. n- T$ {/ {<TITLE>The Monster</TITLE>) [: l8 n" n) @, _
<ARTIST>Rihanna</ARTIST>7 M( Z' {" |( E, Y
<ALBUM>The Marshall Mathers LP2</ALBUM>4 R; r) Q$ o4 o6 _. p
<COUNTRY>巴巴多斯</COUNTRY>
% y0 V) u7 ^, s/ o<COMPANY>环球唱片</COMPANY>
7 F& o0 Z- R& C' N. c<YEAR>2013</YEAR>/ x# t* t! @& V2 H
</TRACK>
1 E9 Q' r2 l+ N
8 A4 S# q5 X3 L( l C6 M$ y<TRACK>9 T0 e" u& M" A& T) A
<TITLE>我终于失去了你</TITLE>
; }& u3 X! Z, k z* R4 n<ARTIST>赵传</ARTIST>% _: u5 Z, W/ {/ o) q) C, r
<ALBUM>我终于失去了你</ALBUM>
2 q' H3 B1 r+ ?% q# T<COUNTRY>中国</COUNTRY>: d9 e( B6 }3 A9 S/ o4 V: Z
<COMPANY>滚石唱片</COMPANY>
$ j k4 I( o; `$ x- y<YEAR>1989</YEAR>3 o1 V6 H" r# V; B( Y, V* m' j; w# l
</TRACK>- v% ^1 n/ V+ s
. ^) E# ?# ?# {; l3 B9 i<TRACK>
$ T$ U" [- m/ ~+ k& R% T$ D `4 q<TITLE>Main Titles</TITLE>
0 D5 @8 i$ m2 } z2 j<ARTIST>Ramin Djawadi</ARTIST>
' w4 I! Z5 S% P. O% `. P9 {2 H<ALBUM>Game of Thrones</ALBUM>* R6 d3 k. B6 x& d- `
<COUNTRY>德国</COUNTRY>
/ Q8 w: n5 x; ~0 C" `<COMPANY>索尼音乐</COMPANY>7 C1 k5 z. c# ^: f
<YEAR>2011</YEAR>% X3 s' V S- ]% Q3 @
</TRACK>/ r' w- ?' S$ J' F" I3 X
6 h& `1 n0 g' [2 }+ J
<TRACK>
3 n+ \; @4 ~1 q! u0 t C<TITLE>传奇</TITLE>$ ~5 S# _3 h9 k
<ARTIST>李健</ARTIST>
: ~4 {8 P2 }7 W- z, F9 x! {<ALBUM>似水流年</ALBUM>, y; t8 |$ e% s$ m% a) I! Y
<COUNTRY>中国</COUNTRY>( y! Z+ z8 A% S5 g. A# `
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
# g9 B6 H: E( I0 }! A) G' j% ]<YEAR>2003</YEAR>
T4 z: _! o7 G6 D/ |</TRACK>6 L0 A" V% `9 \$ `, T9 _( }" N0 f
1 x" S5 Y0 b* l<TRACK>: T" L1 a0 U4 _0 X5 l+ V; j. y
<TITLE>完美生活</TITLE>
9 y3 b2 ?- G/ O0 m9 B6 l0 [<ARTIST>许巍</ARTIST>% n' R& F+ g1 y
<ALBUM>时光漫步</ALBUM>5 t) d! C0 Z. p* ]* L- K5 M
<COUNTRY>中国</COUNTRY>3 p- X4 [; i! l l+ _
<COMPANY>金牌大风</COMPANY>
3 D$ W, |4 P( P. \<YEAR>2002</YEAR>
* [# y2 y" E/ ?/ ~! H: a4 s+ X3 O& {</TRACK>
1 R% t2 g. }- m! \1 U: }</CATALOG>[/mw_shl_code]/ i: `+ F/ h% E5 c2 E
|
|