|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
@; g4 q. }/ m0 m. }5 U
2 v1 ~+ |' y. {9 _: `. R/ T: f1 S
( V! M, s$ [) z# {% o+ x[mw_shl_code=html,true] Q: Y/ g. S! \0 [. O# W
. J. t* r. J4 k& `( Q( n
<!DOCTYPE html>
P& C* m0 ]0 @! r<html>
4 {! R+ ^9 w2 O" p<header>7 V. W6 J0 z d+ l) o$ h* I' Q, Y
<style>7 J: d7 G! r6 u2 b6 a: {$ P
table,
- v# X8 r2 r- q% @ tr,/ U ~ ]. m1 o) t
th,* J$ R( x+ A2 T$ ^) \' R7 _
td {
) y8 _0 S( z9 I border: 2px solid rgb(20, 59, 230);- e( b# a9 Z+ Y8 L
border-collapse: collapse;
( C6 X3 p3 P" p text-align: center;; t. B, h7 F6 G6 w
}
8 s, X( Q: L* E! }
: V/ ^$ j. }7 }6 j, t/ f7 d" N th,
7 D0 l* [+ _; {! k0 U" Y0 d td {
- z5 b$ j' ~2 P$ ~" S padding: 5px;+ l3 @8 R$ b$ H5 ~" D5 F" e$ N* g
}
$ @; e- ?0 s. l6 U d </style>
; a8 Q, v1 ~2 _1 A% d</header>! R5 K: P- n6 r" P* d; O: _
* r. k* F b4 |, P& Q: ?- t<body>
2 X0 E2 w( s! I <h1>xml http request object</h1>
3 T$ U% d% X% T, H& U* h <button type="button">Display Music</button>
' ^& \5 A7 k, z" m# Y% [ <button type="button">Previous</button>; e" v% C6 a3 y/ a, I% P" ^- }) c9 q. j
<button type="button">Next</button>9 }) I( u5 N4 q4 ~0 k5 v+ @
<button type="button">get my music list</button>) }# z- w: ~; Y% G+ f
<table id="showMUSIC"></table>
. S: ?0 J" e' S5 @ <table id="demo"></table>- `: n* r: `7 u. z
<script>
' ^" V! I* I F4 k0 q( J5 R1 @9 Z2 q9 L$ m
var x, xmlhttp, xmlDoc;# Y, f% D' n; i# Z" g5 |
4 }- j# U1 n5 X6 C$ k
xmlhttp = new XMLHttpRequest();. ^! v9 C" S3 D5 X' w$ R. \6 n; Y
xmlhttp.open("GET", "/files/music_list.xml", false);
2 x8 \2 T) U9 s3 S xmlhttp.send();
6 p" H6 z. r+ C3 {4 _5 J9 X
7 r5 U9 n5 |( P( c xmlDoc = xmlhttp.responseXML; 7 |! c& o2 `9 h( i' H
var table = "<tr> <th>Owner</th> <th>User</th></tr>"
: ~. i% k x4 t6 g2 L% J0 N var content = document.getElementById('demo');4 | r4 N2 w! m) R6 Z$ y
var x = xmlDoc.getElementsByTagName('TRACK');
! @4 j7 W0 y1 J+ y' B R u for (i = 0; i <x.length; i++) { 5 E9 o+ M( e( D( t
table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
0 m! @4 u% W: A) W table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;3 M! J t4 ^; [' j t5 @" W/ w
table += "</td><td>";7 c4 S; M q& t# M* i/ d* z
table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
) k' a# ?* E7 f8 o0 d table += "</td></tr>";, i3 J( g$ h. \1 }- U
}0 L' u4 W8 k3 e1 W: d& r9 ^" V, ?+ z
2 G6 h( e y4 f2 M: a. q8 [document.getElementById("demo").innerHTML = table;
3 ^4 _; b% _" l0 J( ?# |0 ]+ ~var i = 0;
' Z! @$ z3 c: K" n0 q$ E# C8 I function next() {0 `/ ~& |/ S! o1 {$ i
// 显示下一首歌曲,除非已到达最后一首
0 u9 d1 _: T9 K if (i < x.length - 1) {! c4 O3 I0 _) y/ |4 [2 D4 }4 C% N
i++;
# L2 l8 Z& t% {8 B; _ displayMUSIC(i);& q4 f; }1 G) e& R
}$ | O- \+ R/ A
}
( a* q/ W J& t! V, D3 P# D1 M8 V( n: }" P6 v
function previous() {
% j( k, o( I* u. B; T) T // 显示上一首歌曲,除非已到达第一首- r) c5 Q$ v7 `+ I# h
if (i > 0) {, i: q2 L( u. P( G; [3 b
i--;
9 w$ }8 W5 F5 c8 B4 H% Z displayMUSIC(i);
k% a# _1 A! Z' n5 Y& O }
: h! f/ b7 z6 s C }9 j2 b5 G/ G- b, m- a
1 J/ L# \$ X$ [/ k function displayMUSIC(i) {1 g* p0 n- t/ R3 U5 v% P
document.getElementById("showMUSIC").innerHTML =
2 e' P$ n4 S: t& ^ "<ul>" +
3 Q0 @( Y7 L% \3 O7 e: q1 u "<li>曲目:" +; v3 L; K5 ~" w r8 ?
x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
& X' `& f2 S1 W "<li>艺术家:" +
, c) R, B# C+ l- J x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
/ S; }5 P; ]3 b& f$ N6 F, C+ I "<li>专辑:" +
# B. K/ T( E; X2 X0 ^) Y+ U9 ? x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
- b) q# L( U5 K- G9 t) h "<li>国家:" +
4 c. e; G* b: Z9 [7 h+ O! Z _6 } x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +! ~/ _9 X1 r; r) q- \
"<li>公司:" +" r- b) C( l/ _3 Q
x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +1 I1 P8 q0 @! O) h
"<li>年份:" +2 H w$ }, z5 Z) b1 L
x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
( c# \4 a: V6 W2 P9 e "</ul>";
! N& y$ @. u/ \ K- |; Z4 Z- u }' c! r! p$ v/ c( R, E% T
; b ? M9 m0 J) o3 O
function loadDoc() {
4 d4 H' W. d; l+ A. i/ O% _6 c: `+ X4 A. ?- m
document.getElementById("demo").innerHTML = table;) d) }+ L: x- c# s
}" j6 t' c: D6 l# [1 q/ p
% {0 H: \) O2 _( S P </script>& H9 c: f8 C2 n M0 o
; }( y+ A3 s4 L* i
( K! g8 ]0 S& y4 \3 O</body> [! g( g: I. v, @( [
9 n, H) v6 q0 I5 W
</html>
) x! y( m# o! k. b# n1 A. z$ S+ O# n' P+ \/ s
; P( _3 @& Y& c6 f* {: Q0 J
[/mw_shl_code]9 u8 M$ s% i! F* G9 K
) y8 r/ z6 A+ w; ?" p9 k
2 u! B% e( K* p; W) a3 @9 G. ^- ~# S+ ^7 c9 A
XML文件0 h* ?! |( @3 ^6 q
$ e! r# _) `9 a+ Y8 H[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>4 o6 _0 K- Q. O& j" @* x
<CATALOG>
$ {$ G" M4 ]5 @! R0 d! c<TRACK>
6 ?, o1 p5 _: c$ w. c<TITLE>再见</TITLE>
( K3 g# N" [8 e) H3 J<ARTIST>邓紫棋</ARTIST>
8 d z7 Q+ }0 l* j<ALBUM>新的心跳</ALBUM>5 Q8 T6 W! r# ]- @" Y9 c* D
<COUNTRY>中国</COUNTRY>" Y7 E9 n+ T, a) Q) Y
<COMPANY>邓紫棋工作室</COMPANY>2 E/ l* ~# }0 {/ R
<YEAR>2016</YEAR>
' y" k- P# v! x' H" O' l</TRACK>% H$ b1 G3 g' c4 Y! i" U3 r* ~
9 x$ b* N% S' k) n<TRACK>; A x7 @) H& b$ E, m
<TITLE>All I Ask</TITLE>4 p3 W- T( G. f5 e1 e6 K' c
<ARTIST>Adele</ARTIST>3 e R) V4 b- Q6 n9 b9 d
<ALBUM>25</ALBUM>: `4 X& G# {* U/ _0 N
<COUNTRY>英国</COUNTRY>9 M4 K" [+ l6 P# o: u4 @; k1 s
<COMPANY>XL Recordings</COMPANY>
1 W" X3 U0 H. x( r9 z: C- N+ w7 L<YEAR>2015</YEAR>& w5 M3 c- [+ T3 u6 p
</TRACK>- i- Z4 ~/ T' V! d I( i
! H7 n3 g3 O1 L, N1 V* K; Q<TRACK>
% H7 M+ o1 ]1 V! u. l* t. y: i. o<TITLE>之乎者也</TITLE>0 k7 b. [! f7 h9 e& e3 D( @( S
<ARTIST>罗大佑</ARTIST>
3 l' ?3 |# i( E* K( {: T( r<ALBUM>青春舞曲</ALBUM>: _$ r( o9 a. n* N3 u/ X0 y0 Z
<COUNTRY>中国</COUNTRY>
" c. \; p) Q; Q# i# P<COMPANY>滚石唱片</COMPANY>
: g2 }7 ^5 Y9 R<YEAR>1982</YEAR>8 _6 E# [* E r. O
</TRACK>
8 R! H4 g1 ^# O$ W) ~7 ^
1 @/ R, ^5 l& G. @9 h9 o<TRACK>0 K0 m0 a0 C( J7 D! K) l
<TITLE>Never Be Alone</TITLE>; U4 ?, o/ n) t8 ~" [; t `
<ARTIST>Shawn Mendes</ARTIST>: }/ b8 J0 M: s4 c
<ALBUM>Handwritten</ALBUM>) ~+ m, r& }1 t5 A( ^' R; B
<COUNTRY>加拿大</COUNTRY>3 R+ }4 o' H- O: G: g" [+ `3 O
<COMPANY>环球唱片</COMPANY>/ _ Z7 s, A0 @( Y0 S
<YEAR>2015</YEAR>
0 `' D. l# N, _2 h& q' ?5 D) s</TRACK>( m8 L0 P9 \: M
/ H, w I! V. J6 a8 `" ] s; z* b
<TRACK>1 W J6 ], \+ C: c( a
<TITLE>慢慢</TITLE>
. O+ V- Z* Z5 T; n<ARTIST>张学友</ARTIST>- i7 ~) r/ [' X" l
<ALBUM>忘记你我做不到</ALBUM>
; d- J7 o, Q: p, S u<COUNTRY>中国</COUNTRY>' z9 | Q+ }9 y+ t: a8 @
<COMPANY>环球唱片</COMPANY>& T" W) W6 ~- |- P
<YEAR>1996</YEAR>
( ~+ v$ `" \/ s& s7 V</TRACK> B0 [$ V) o9 u( [* U+ }
2 K- _) l( j# u/ R! N! W9 m
<TRACK>
* x$ t5 @( T% f( F- Q/ A<TITLE>Complicated</TITLE>6 r: Y5 M! S+ y! N
<ARTIST>Avril Lavigne</ARTIST>
/ {0 ]5 m3 Z! i) B4 ?<ALBUM>Let Go</ALBUM># I% [/ [+ T" e* O) _0 y
<COUNTRY>加拿大</COUNTRY>
4 D" I% g* h2 ~* q! M! r; W4 ~<COMPANY>索尼音乐</COMPANY>4 z6 \9 @; j/ R9 S% D' m/ w
<YEAR>2002</YEAR>
8 |1 y9 Z. d( D6 O, H6 ]</TRACK>+ k: D! X8 N! J: |% O" M1 N
8 s x6 C: o- i/ f% U1 T2 U3 {. _
<TRACK>
5 u" u3 a5 D; [: m" D1 [3 e' B<TITLE>三生三世</TITLE>
T4 |4 {5 h- n' W<ARTIST>张杰</ARTIST>
* a9 a; T8 v3 Q" A) p7 w# E<ALBUM>三生三世十里桃花</ALBUM>
" I1 ^& u' K. P* o# I<COUNTRY>中国</COUNTRY>
! @5 \- L; P8 x* ?<COMPANY>仁溪音乐</COMPANY>
$ {7 ~7 e# }: {- H% g9 w<YEAR>2018</YEAR>
& M, [* Z9 ~) z2 ^</TRACK>
' s$ |6 `. i1 D
& u! Z' A2 L6 _2 F- v2 g<TRACK>" e( \' y5 ]/ k, p" ~6 H
<TITLE>Five Hundred Miles</TITLE>9 D- V5 j1 ~5 r0 t6 \6 X7 ~
<ARTIST>Justin Timberlake</ARTIST>
3 G$ }% [! T6 R; N9 n<ALBUM>Inside Llewyn Davis</ALBUM>
9 s8 c2 o2 H9 |" t; \; Y6 H0 x$ A<COUNTRY>美国</COUNTRY>- [ g2 h, M* V/ V' x
<COMPANY>华纳唱片</COMPANY>
6 y o5 K. |/ T% n: s( ]<YEAR>2013</YEAR>1 M1 ]6 w) ]% [/ ^: _
</TRACK> f1 J- H3 H9 y( ^
; `1 e( `4 k7 S' I8 \7 U# h# A
<TRACK>4 x, q: L& s- E
<TITLE>演员</TITLE>
- k3 v$ Q4 I4 i1 G0 h. |<ARTIST>薛之谦</ARTIST>2 _2 Z' ]2 l; |" Y ?
<ALBUM>绅士</ALBUM>% ] ^$ J, p: _( h" Y
<COUNTRY>中国</COUNTRY>
& o; t4 W% C. M* b4 p8 g2 m o' l9 s<COMPANY>海蝶音乐</COMPANY>) i' ^7 L/ I3 Q* R/ D# C1 i
<YEAR>2016</YEAR>
0 f' B% S0 b2 c! y2 [- @: Q- y, O</TRACK>( s( ]9 S2 E+ q! h
8 g! J+ o# g* e. O. @& p1 ]<TRACK>
* E% {- u! _% c" G8 u* x0 W<TITLE>Numb</TITLE>
0 t- K6 B( {- N6 n O<ARTIST>Linkin Park</ARTIST>
+ z4 _) @. L4 w<ALBUM>Meteora</ALBUM>! |" y! Z$ g- y0 G. ^
<COUNTRY>美国</COUNTRY>
( K9 F% k+ b1 ~& t<COMPANY>华纳唱片</COMPANY>
- A, X0 V" {, m B' O$ q% h<YEAR>2003</YEAR>% k# F' k5 j7 `9 M' q
</TRACK>! n, j: u+ r2 |$ i: w$ s- c' @
, G+ J3 l) _( D: N w, e
<TRACK>1 C4 @1 t& X1 f/ m' m4 X
<TITLE>给未来的自己</TITLE>* o! N. P2 K- d# f
<ARTIST>梁静茹</ARTIST>7 v3 P# S1 o5 _% ~7 F0 E3 T5 X
<ALBUM>崇拜</ALBUM># C% [; j7 W; e% }2 W' X5 K
<COUNTRY>马来西亚</COUNTRY>0 s1 e1 J$ M4 H6 L b8 m1 n, Q
<COMPANY>相信音乐</COMPANY>
6 W1 S0 Z# \. U% b3 B( Q b<YEAR>2007</YEAR>: a% {& h' I1 W/ o6 v+ O& |( o* z5 F
</TRACK>
! U7 @/ z8 o% ?! d0 N" F* ]! j( I8 } W
<TRACK>5 L( i' g) L$ M. e% c/ A
<TITLE>The Monster</TITLE>" B) ?3 h$ r2 |2 t
<ARTIST>Rihanna</ARTIST>3 `$ ^* r8 T% a& @+ _6 A/ \
<ALBUM>The Marshall Mathers LP2</ALBUM>
6 y, Z. f* {3 `& J; _5 l<COUNTRY>巴巴多斯</COUNTRY>5 s1 T6 q6 e& F& A7 c
<COMPANY>环球唱片</COMPANY>
0 g2 U2 [, u( U& N<YEAR>2013</YEAR> T8 z7 F( z3 Y* F9 N3 `4 k# A
</TRACK>
8 K( ~9 u, u" n& v7 B
9 l2 D( K8 f9 _<TRACK>3 p, i( ~( W4 z' B. p9 ~
<TITLE>我终于失去了你</TITLE># ^0 T4 {0 D; Q9 S% D, v2 l A3 R* M
<ARTIST>赵传</ARTIST>
( I$ W! @1 u. C3 Q5 w, g3 N, z* B<ALBUM>我终于失去了你</ALBUM>1 T3 M3 j1 H" y8 h) s
<COUNTRY>中国</COUNTRY>
* D+ A0 ^2 V, u& _4 r$ p* a7 A/ f<COMPANY>滚石唱片</COMPANY>+ |# K* N. i E3 \- Q8 _+ w6 R& B, L
<YEAR>1989</YEAR>
. c6 k) T' I2 W- b</TRACK>8 w6 M5 |# _/ a( J& d4 E( t2 r
! s5 `6 Y6 ?; N( R8 d! N
<TRACK>8 _9 `. N9 Q) H6 I! y1 W/ e1 S
<TITLE>Main Titles</TITLE>0 e* t) x$ ^+ ]2 Y- |1 f5 }4 Y
<ARTIST>Ramin Djawadi</ARTIST>
2 a' m# w4 I+ K<ALBUM>Game of Thrones</ALBUM>8 Z0 U$ ~% W% N7 {: J
<COUNTRY>德国</COUNTRY>
0 [8 Z4 {; d/ C3 @' {9 A<COMPANY>索尼音乐</COMPANY>
2 X: v9 b+ [& L @" n6 V<YEAR>2011</YEAR>
* ]$ D1 \& ?# H9 R) Z</TRACK>" H0 o8 A" S5 k" [' S: K i* M# x
! [$ U( C9 F1 c8 t5 M ]<TRACK>9 i( k: F$ C, P+ R
<TITLE>传奇</TITLE>
$ N+ {- m. a, Y4 x1 F y$ V<ARTIST>李健</ARTIST>8 Z6 l" N) Y; r; r) Z+ w; f" n+ s
<ALBUM>似水流年</ALBUM>
5 P- ?2 ?- ^3 i( N& a# q0 n( X<COUNTRY>中国</COUNTRY>
- b3 }: c, b/ z1 M; k: I2 u<COMPANY>北京完美坚持文化艺术工作室</COMPANY>! Y2 N* ]0 g: w& _
<YEAR>2003</YEAR>8 R+ L, p& Z0 u1 k4 ^2 a E
</TRACK>
! F5 b9 {/ Q, h2 g% M$ Q3 Y6 r5 u, Y; K3 T, v; T) F
<TRACK>. ^) {2 I. |& q
<TITLE>完美生活</TITLE>8 V5 ~. U" f. V% h2 X
<ARTIST>许巍</ARTIST>/ P" x, E* k+ d2 Z
<ALBUM>时光漫步</ALBUM>
; J, i4 r& \4 h5 \% y/ O<COUNTRY>中国</COUNTRY>
* d8 {* T1 d: z+ b<COMPANY>金牌大风</COMPANY>
3 W; \3 L- L p$ \/ Q0 y/ @<YEAR>2002</YEAR>' D, b) A8 J; j
</TRACK>
7 o4 G' a) f& [1 `7 v</CATALOG>[/mw_shl_code]
% d' `0 ^0 c# a/ [* U9 z: g/ M |
|