|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
, _3 G1 b C4 V
% u3 I% y6 l7 Q1 s1 O6 ^; z7 J0 S2 y9 q$ K' u4 k
[mw_shl_code=html,true]
# f* Z" t3 T9 j" ^6 |- j3 O3 G1 a5 b' b( p! C4 A. G
<!DOCTYPE html>
% z! o# Y& m, S, G# H! H: s/ q<html>; D; H; f4 j+ Z
<header>
7 z7 d( L6 m3 c <style>9 z$ V ^! C D \# z
table,# |" a M a. w) x0 p; o- m* G; j
tr,5 O; b V! Y. f; e& M2 r Z
th,
2 C+ b) q7 y K& \5 A1 G td {0 _( O) M, ^5 E1 J
border: 2px solid rgb(20, 59, 230);
6 R4 Q/ l8 p, F! ^, e' H, V9 e border-collapse: collapse;
: |! i& `( g; i+ E1 Z! N9 ? text-align: center;$ B8 v2 j- R9 f6 Q& _0 l
}. m, q4 T4 E4 g5 Z
1 n4 B( L, y8 z
th,
2 D8 o7 H2 Y& G. I. V1 y td {
9 f, i+ E O8 r3 M padding: 5px;
. a1 o7 A( J- T1 y }! P) r+ I, p, u% V+ G$ ]
</style>
5 k2 @) V& G. M6 K% @0 S</header># J3 ^* Q- M7 I. u7 Z% H( `) J
0 F: |; }! \8 F+ v- J4 c<body>; k- t+ L8 F1 X5 r8 b: G
<h1>xml http request object</h1>8 U' e2 b1 I/ J( N/ D
<button type="button">Display Music</button>+ _( e9 n1 d4 y. t# e
<button type="button">Previous</button>2 ^5 P4 p( v* \4 A
<button type="button">Next</button>4 {: A- w {0 I! j
<button type="button">get my music list</button>) n7 P- w9 U. d- u# G& G
<table id="showMUSIC"></table>6 S* U% s: U! T1 f
<table id="demo"></table>( [4 m! w3 c1 {& H9 m. W r
<script>; x- G. E3 S( i6 B$ i' t
' x/ n9 m& V. [9 {* V
var x, xmlhttp, xmlDoc;* O' k5 c* V: P3 K' f8 {: l4 L: m8 C
& L. E5 i( D" J% Z' ^ xmlhttp = new XMLHttpRequest();! _- ^4 H# Z: ^! B5 b0 n8 X# N" l
xmlhttp.open("GET", "/files/music_list.xml", false);
. m$ _8 k7 j% F: |- t; ?& V xmlhttp.send();" A' }- J7 j) R3 x5 v# V& M# S
2 V1 }" q; A$ I( {/ \$ P
xmlDoc = xmlhttp.responseXML;
+ W3 w+ Y, t9 b7 r var table = "<tr> <th>Owner</th> <th>User</th></tr>"
- V5 y$ ~( a E* I& { var content = document.getElementById('demo');
$ h+ b. R3 d, N; u9 U- |' _ var x = xmlDoc.getElementsByTagName('TRACK');9 ^8 I, H9 M8 n" D$ ~- c7 f8 [
for (i = 0; i <x.length; i++) { + K+ `, ^+ P) ~: k! y9 |, G: w4 v1 o
table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
% y7 c) N# y- G: ? x3 M! U table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
2 x" e% I, n- z Q1 [ z table += "</td><td>";
% c3 C3 i v& W& ]" M table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;/ g' C1 \% E4 Y s
table += "</td></tr>";+ o n- [1 y5 S! p0 b; s
}
$ h6 p% g, Z7 t# l3 Z) H: a4 M
. {' s% U' w( F$ n: fdocument.getElementById("demo").innerHTML = table;- v/ F/ l! A1 z, v
var i = 0;
4 S# H9 U( T1 o% M, T1 w2 U6 [! g function next() {7 @5 {# U, p' ^2 m6 O
// 显示下一首歌曲,除非已到达最后一首
, n$ u" g8 h; y5 W( o% m! L if (i < x.length - 1) {
( a% x' Z2 l0 N! z9 @8 v i++;
) m6 K5 V, { g+ t" T& j& \" p displayMUSIC(i);; T$ Y0 Z% X; o" E0 Z5 }/ }: H, z
}
- P' x3 H- `$ q' F' R/ e: V& j }
8 A$ K" O; n6 G- Z/ I/ U
' C8 r' s2 Y5 l& { function previous() {
- U2 q) n# U5 b+ ` // 显示上一首歌曲,除非已到达第一首
4 W" [4 l3 Q6 j) i- [ if (i > 0) {
; B6 U- q& z( Y9 [+ [0 C i--;
" Y1 r( H: K+ p# Y+ j) O displayMUSIC(i);/ z! I4 D6 v: N
}- T8 ]0 _; a4 h" S
}, w8 m7 J; ]9 j8 s& g( \, G
0 V6 b+ E1 n5 g6 r8 J5 }/ _
function displayMUSIC(i) {3 d1 M# n4 Z, h( a
document.getElementById("showMUSIC").innerHTML =0 W9 m0 p6 S& Y5 j. A( t
"<ul>" +6 H% _6 [' X- B! X
"<li>曲目:" +
8 E# H0 s: U3 O8 ?& q0 K: r x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
0 r" r. D" N$ O! B- H "<li>艺术家:" +
6 x$ J4 I. ~. v& H7 C x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +) c7 q) n$ Z/ B x: q" {( k5 o
"<li>专辑:" +) X1 F/ Z7 ~" j, o3 ^) G
x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" + c# x& k, i4 k
"<li>国家:" +6 O$ m# a9 g. W% f4 j z5 d: R
x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +0 B" k, I4 U- a: r8 x5 m2 J
"<li>公司:" +! R" A4 b0 L1 o6 Z
x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +( K4 t; C* H: q7 T4 c! }- N6 }
"<li>年份:" +; v! \- O- C8 Q8 ^3 c" H
x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +& z4 ^- w- ]9 H$ I9 m
"</ul>";
% T) J% I% A; m3 v7 G H$ f }
" I8 S( m& [2 V! g4 v6 P6 _2 Z) g8 z
function loadDoc() {& t; |# }; z D
* c7 V% m+ N7 w7 W* J1 i6 J. f. h document.getElementById("demo").innerHTML = table;+ i3 ?5 I8 `1 S/ l0 ^
}
( L/ q2 D3 W8 h% v5 W _7 T7 U0 L' t7 D; f( j) s
</script>
7 o- G# ]% K* i: C1 b) ~- T2 H/ V Q' W
" C/ `: L! O& ~" f& h" `- T
</body>- P" u4 T3 Q8 w4 I; T
0 U8 Y2 m% d6 e, P1 T</html>
6 |: [8 D+ y' q3 A. p, y2 W- N, t! _% [9 S' J
: S( ^! o) c! V: C0 v
[/mw_shl_code]) E2 H# x$ | }
1 z7 V% k, A3 X5 U& x+ H
& H) @6 H5 \8 y, N$ L* w6 c1 o9 |! D$ z
XML文件/ V5 {' J0 I- k# R; |
. @, p( E3 Q0 _1 L: u' v0 `[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>7 T4 t' A5 T! b: m% E5 w
<CATALOG>
9 j' `+ M b' W) g8 V<TRACK>
: R; D. e7 h( I- b$ j3 @/ Y5 T<TITLE>再见</TITLE>
1 J g) O4 ?5 F3 e<ARTIST>邓紫棋</ARTIST>0 t: C# N# ?" t( U
<ALBUM>新的心跳</ALBUM>
4 E9 Z/ o, S4 n# ?3 U<COUNTRY>中国</COUNTRY>, y6 K$ }+ p% c
<COMPANY>邓紫棋工作室</COMPANY>
# h% d7 k+ e/ p1 C4 ~% g, @/ P<YEAR>2016</YEAR>
8 r1 z d+ S' \) q: X</TRACK>
0 @1 b5 Z* @8 p, m6 F
& @& v2 J, g0 `! e; D<TRACK> b( l, z. Y! B. K+ z5 w
<TITLE>All I Ask</TITLE>
; }* J$ S0 E5 [) y) h5 A! z. r6 _<ARTIST>Adele</ARTIST>
& U& k( d6 k! l5 c$ F/ T<ALBUM>25</ALBUM>5 m6 o3 x2 O0 q' J+ Y
<COUNTRY>英国</COUNTRY>* f. O& U7 k1 R' R& s
<COMPANY>XL Recordings</COMPANY>2 Q5 ~. e+ q/ O+ {4 H
<YEAR>2015</YEAR>
- X8 W" f& t. A9 J# X! P0 A" M</TRACK>: a0 _! s$ ?; b
0 N" R) d: ~0 r( J+ R- k B
<TRACK>" l( f9 [! J e2 E* l$ { Z
<TITLE>之乎者也</TITLE>/ v* a% _+ H" B: n5 K' I# J
<ARTIST>罗大佑</ARTIST>
5 h& y8 Y+ A: B: ]6 ]7 j<ALBUM>青春舞曲</ALBUM>/ Y& g9 q6 X2 B; _
<COUNTRY>中国</COUNTRY>
' n" u T8 t) [8 Q: V<COMPANY>滚石唱片</COMPANY>0 k1 b# w0 j; j7 l$ x; |
<YEAR>1982</YEAR>, F+ o5 b0 M3 b7 ?5 S+ D9 v
</TRACK>
# `* t# I( `, Y9 v% G, V' E2 V: j
7 q, S% H/ J, l4 _7 l) d2 C% t# |<TRACK>
0 q6 r$ l& S4 [, ?<TITLE>Never Be Alone</TITLE>8 I7 ~% Z5 v) n- Q, Y% p
<ARTIST>Shawn Mendes</ARTIST>$ ~& b- [0 U* @- v2 p+ U5 V5 A0 r
<ALBUM>Handwritten</ALBUM>+ o$ y& g/ b5 s+ }6 e
<COUNTRY>加拿大</COUNTRY>+ `0 E. c$ e! _6 _. b
<COMPANY>环球唱片</COMPANY>; V2 O' t# n0 i0 T; {# F
<YEAR>2015</YEAR>
/ q% f* t3 C: ~5 |4 ?/ m9 ?+ g$ z</TRACK>3 c& B6 q; F0 J3 a& Z
: y5 H) ?( q0 u! ~) B4 {<TRACK>" n% t* g& R) f: p2 I2 P. X
<TITLE>慢慢</TITLE>
% R; T2 D' Y3 g8 T% x3 ?<ARTIST>张学友</ARTIST>
' ]* M4 X* N6 y0 H3 s& p<ALBUM>忘记你我做不到</ALBUM>
! j# t ]: ~9 o, B9 @" [<COUNTRY>中国</COUNTRY>
4 [1 L$ x: \# C4 O<COMPANY>环球唱片</COMPANY>$ L, ^* R* [7 \8 t* J" @5 l
<YEAR>1996</YEAR>
u# h- W3 h2 L. l# d</TRACK>; o" [7 c8 V3 Z- f+ C/ O2 B: w% F
\. V$ h* R2 H( R2 O
<TRACK>
7 Z8 k/ _' |: M, \: [: l$ W<TITLE>Complicated</TITLE>4 M0 h. ?- _- w3 e. U3 z) B
<ARTIST>Avril Lavigne</ARTIST>2 @" y3 t0 y+ V2 {
<ALBUM>Let Go</ALBUM>2 r6 k5 y1 s7 r$ F4 S
<COUNTRY>加拿大</COUNTRY>
# S Q/ S% f" W: S5 V! d<COMPANY>索尼音乐</COMPANY>5 e+ P% v4 K g7 q% E8 Z0 Y
<YEAR>2002</YEAR>
! g& v" K( d' O# u</TRACK>9 P" A0 E1 f0 j/ B4 G* Y
6 D* N" c1 {$ z' {<TRACK>
. E; J) j" g- T# q; B5 H- E* k' ~<TITLE>三生三世</TITLE>0 r( M0 j/ v; e" @7 P# e
<ARTIST>张杰</ARTIST>
; L z& Z" O2 B: n# P! u<ALBUM>三生三世十里桃花</ALBUM>
' D; U5 P& P: \& [<COUNTRY>中国</COUNTRY>" R6 j: R8 u+ h. n5 d: j
<COMPANY>仁溪音乐</COMPANY>
$ U8 p, p T" z' }. W<YEAR>2018</YEAR> W O. C8 J5 W: D5 E: R: a
</TRACK>
0 }' w8 k0 @1 O6 _/ C
- b. H: `8 {7 m5 B<TRACK>( G* [2 h" D; ]2 ]1 ~3 _" S) `8 E
<TITLE>Five Hundred Miles</TITLE>
; c4 o4 m Q+ w4 w" }2 o+ q<ARTIST>Justin Timberlake</ARTIST>
0 @0 [( k$ X" G0 i3 Y3 K6 l0 D<ALBUM>Inside Llewyn Davis</ALBUM>
3 N' l" z) A- d<COUNTRY>美国</COUNTRY>9 @* {/ X Y/ h+ g+ G9 ~, X9 {' ~/ E1 H
<COMPANY>华纳唱片</COMPANY>/ s* k9 o9 j n. y# Q: F
<YEAR>2013</YEAR>9 F2 _ A0 D9 P/ |
</TRACK>
1 _3 U" n8 P& G L T- [' z5 F
8 Q$ t9 f: C- n. Z( E1 Y<TRACK>
% U' a: }% a) k6 I: Q) @<TITLE>演员</TITLE>
$ O6 k, J) `5 c2 {<ARTIST>薛之谦</ARTIST>9 b6 F# ^2 D+ m2 y
<ALBUM>绅士</ALBUM>
. q/ h( O" ~ }<COUNTRY>中国</COUNTRY>' u9 O: s( A* I, q# ]1 m8 q& v
<COMPANY>海蝶音乐</COMPANY>
1 v6 X9 m% \8 t: j<YEAR>2016</YEAR>
3 f, T* P9 O- \- Q2 Q8 q7 t</TRACK>- v/ t' k5 m: t& n) U
# b7 L: g, f, P3 S1 g* A. r<TRACK>8 }# ^9 a! \) S' T8 ~7 q
<TITLE>Numb</TITLE>$ @. r, @ e6 u/ S) v
<ARTIST>Linkin Park</ARTIST>
3 d7 Y: L" E% e& |- `<ALBUM>Meteora</ALBUM>
" P9 S6 C8 Y2 z5 \/ a+ T9 m4 G<COUNTRY>美国</COUNTRY>! q$ E" r/ [. N- `/ k6 [( I
<COMPANY>华纳唱片</COMPANY>
6 Y: I! u4 b) A* b0 E2 E' H<YEAR>2003</YEAR>8 u( n' F- a o( h3 m7 v, A- _7 d
</TRACK>
! I$ M+ \! @7 m, T$ t
& }1 Y" O( G, X<TRACK>
' R2 q) u: C3 |! C% h<TITLE>给未来的自己</TITLE>
2 |3 s! |& M8 a3 {" l+ T<ARTIST>梁静茹</ARTIST>
6 {6 v U. i- x1 X9 D) [1 `, r<ALBUM>崇拜</ALBUM>
1 v) \, J% m4 V<COUNTRY>马来西亚</COUNTRY>
% I$ A- M) E8 @) L<COMPANY>相信音乐</COMPANY>
0 E" T( _0 u" l, _* C<YEAR>2007</YEAR>7 i5 K& S7 [4 u$ m" K
</TRACK>! _3 s* `* |% ?; d4 g0 p; M7 o4 K
7 H& _* `7 F6 \7 C* B& u
<TRACK>% j- N1 I% p1 x8 o
<TITLE>The Monster</TITLE>' Z! J3 n3 _( C- W+ \2 ?. U0 S
<ARTIST>Rihanna</ARTIST>
4 Z2 r- j; B; m4 D<ALBUM>The Marshall Mathers LP2</ALBUM>9 F R8 j d$ b# Z( U# I$ _
<COUNTRY>巴巴多斯</COUNTRY>+ T2 r& p8 z( y0 \# a
<COMPANY>环球唱片</COMPANY>
" r$ C9 Y' O- c) t4 R$ [<YEAR>2013</YEAR>
2 W( K0 f S6 n- c$ _" e6 ^% I</TRACK>. }6 b& r/ D6 t% o: c0 x
* |; z& a6 x# c, ]" ~0 M; w4 e<TRACK>
$ i3 G- {3 g( U/ V5 b- `<TITLE>我终于失去了你</TITLE>
/ I6 h: e( c- N' e9 H<ARTIST>赵传</ARTIST>
7 j' }: {5 F0 ~+ z5 t5 T<ALBUM>我终于失去了你</ALBUM>
: B0 g5 \6 r5 U" T- Q; v<COUNTRY>中国</COUNTRY>- z- O3 S; m' p3 a5 G
<COMPANY>滚石唱片</COMPANY>% M# }3 s# E& L
<YEAR>1989</YEAR>
7 p$ h4 `% F0 N0 Y</TRACK>
2 h( N; F4 p1 Z7 J& t y1 g) T. Q5 Y7 v% {5 W. X
<TRACK>
! \8 p8 d) z; Y) g q5 |* |2 `<TITLE>Main Titles</TITLE>+ A8 n( B4 t6 D* C
<ARTIST>Ramin Djawadi</ARTIST>7 `* }! x D+ \1 v8 ~5 F! `+ K
<ALBUM>Game of Thrones</ALBUM>, M' _- t. L. g, `6 S- S) W7 |/ Y3 g
<COUNTRY>德国</COUNTRY>2 z" Q) r; o: Q; Y% p) K& K- C
<COMPANY>索尼音乐</COMPANY>
: n) ?2 ]$ S" f1 v<YEAR>2011</YEAR>
" f( X+ b' f( B/ R0 J6 ?</TRACK>& b7 r" o4 ?( x5 j
( I2 H% s1 U+ J
<TRACK>2 K1 |4 H2 g( Z3 b O* Y
<TITLE>传奇</TITLE>
" w1 ~' t/ M/ n( y/ P" ^<ARTIST>李健</ARTIST>6 M4 v) ^5 }/ n
<ALBUM>似水流年</ALBUM>
& g$ Q1 _# _$ o, g6 ^' ?<COUNTRY>中国</COUNTRY>
7 L4 l( r3 m5 y7 ?* s7 S<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
+ k" q6 D; I/ P; g<YEAR>2003</YEAR>
* W( Y0 R! M, \0 v; T8 A) K+ q</TRACK>
! s5 L6 z: z4 | Z
! \. f; z6 ]/ V/ o( y<TRACK>
& q, t4 x/ m9 p0 X5 b5 a- V<TITLE>完美生活</TITLE>
2 A3 Y! e5 {1 h1 p w8 F& h<ARTIST>许巍</ARTIST>: H& i! c& m: D: y% O
<ALBUM>时光漫步</ALBUM>0 w) K @" X- s# q1 }
<COUNTRY>中国</COUNTRY>; Z/ S! y& _; J- H
<COMPANY>金牌大风</COMPANY>
# V+ t+ k0 q2 ?; a6 \+ Y. [<YEAR>2002</YEAR>
- d& k/ `8 |8 T- E( y5 y6 h3 r</TRACK>% M$ U3 }* U/ E* i$ B0 D" a7 d9 X
</CATALOG>[/mw_shl_code]" o& h% I G, X0 [+ }( y6 A7 [* e
|
|