|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
, A4 b# W# V, _% t% y% ~, Q
6 d) A/ j' h' q! m$ X3 M. H0 Y0 L( q y O/ A u* M) ]
[mw_shl_code=html,true]
1 D) P: K( A) H+ O& J/ d# `% N. m: K3 E* s
<!DOCTYPE html>, K& x7 J0 v4 }8 M8 Q+ N
<html>. [( P+ `! d) V$ Y
<header>) h) Q2 F4 e- t. t) T0 o8 {7 ?9 m
<style>
; w9 ?$ r4 T5 t8 W0 z table,: ?5 L+ w( J2 m. X, x8 I& \
tr,% I* I! h" J/ M3 y2 r5 L0 e+ f
th,) r: U4 B2 ]0 i! j k6 Z
td {1 K% q: J5 U% n
border: 2px solid rgb(20, 59, 230);1 Y( t* F, B3 C3 {+ T- E! d
border-collapse: collapse;
# N; M( W2 j0 u( {0 u text-align: center;4 H0 B. I1 g' T1 r2 V
}! H/ K+ H$ @' p9 {
. J* l5 T* W( x T* j
th,, `5 n2 k- t0 a% Q1 x
td {8 P, q6 N4 v6 c
padding: 5px;
* e/ F5 \ Y/ P; D+ L$ [ }
3 m1 g( `& t4 Q </style>
( u0 `5 y0 }5 i) m y' p4 n</header>
7 o, f( w4 s* z
8 s9 u7 d' l2 J9 S3 `' _; p<body> }, `: z$ s1 t* _7 S0 a: S
<h1>xml http request object</h1>& h5 C4 f) ?- M- t) ?
<button type="button">Display Music</button>4 N; U2 r% f9 A% n9 K
<button type="button">Previous</button>
% m+ ~) ?3 t$ a2 w } <button type="button">Next</button>' @& M1 d) [* _
<button type="button">get my music list</button> ^$ b+ x/ C5 U8 \: ?9 e5 J9 {8 R
<table id="showMUSIC"></table>
4 u$ Q. B6 v4 d7 S P <table id="demo"></table>
( [/ ?- E* w( ?& C) o6 z8 I <script>
( ^3 u1 h% `& u
# Q% H% d: Z' i" |1 n3 | var x, xmlhttp, xmlDoc;
. h# o% Z1 {/ Y, i* @" B
% A2 k# r' ?% E xmlhttp = new XMLHttpRequest();
; s" R; w( z" o7 v6 X xmlhttp.open("GET", "/files/music_list.xml", false);
3 y1 V; w4 o0 X' L; i+ c/ d xmlhttp.send();* K- S: d9 k* z. l* h, B; d0 o
, W: S+ i; r- H xmlDoc = xmlhttp.responseXML;
! N) w2 h, z, H var table = "<tr> <th>Owner</th> <th>User</th></tr>"
r9 v% Y& D: w. |) n' d& n& w$ } var content = document.getElementById('demo');% y1 {8 ^' z; N
var x = xmlDoc.getElementsByTagName('TRACK');
/ W1 t# G. d$ @% p1 t for (i = 0; i <x.length; i++) { % C1 u6 N0 k8 d K" w8 s1 p
table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
7 N5 X+ y. V8 k/ S table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
: l; Q g* f' v table += "</td><td>";& b4 ]; Z' O7 B9 \0 U% ?
table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
" ?/ P. }) y3 _3 m7 y table += "</td></tr>";
- ^0 {7 r: G2 f* d. e}3 I, e% W9 N, H R
8 [! N2 h& L% P9 \document.getElementById("demo").innerHTML = table;; k3 ^7 M5 `' d" M. p9 Y& \
var i = 0;8 ^4 a/ B8 D0 p" F
function next() {
+ r5 A8 M- b5 c5 a' w5 s$ I // 显示下一首歌曲,除非已到达最后一首
1 @+ K2 F: c' K4 ` F. ?/ n% N5 p if (i < x.length - 1) {
4 A) y# H- z# F( X% L* o# } i++;) _+ `9 a$ e9 W; O# f: h
displayMUSIC(i);
( c5 ^- j1 q8 S' C& x. B: k }
. m4 S: ~- e* ]; u: }. }/ V; k }; a- Z$ q' l v% c
, I P) J" N0 f: Q function previous() {
! n+ b; H* K1 s2 g // 显示上一首歌曲,除非已到达第一首
6 F. z2 Y7 ?& V+ ^- J) C' z0 K if (i > 0) {
( A% h$ Y9 V" |, L m$ W i--;3 P8 R. i1 p u4 F1 y3 R* V3 j, _
displayMUSIC(i);. M: ?6 V" k$ j
}+ K6 V; Z* D, q: D2 v. M
}3 z2 F: n3 j. f1 y6 q3 O" L
2 E4 O4 P4 I# Z# }! x( \
function displayMUSIC(i) {
0 z" V2 s/ W$ B. O document.getElementById("showMUSIC").innerHTML =
3 g1 [" u( [0 L4 C1 f, C "<ul>" +
; {+ a; R7 l" y, H5 l- x "<li>曲目:" +
# f* L8 M$ s/ g) k0 M x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +/ V& D, w3 d6 U5 _2 w9 A
"<li>艺术家:" ++ q/ ^2 y% p7 [6 S( ]# ^
x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
1 M5 J2 V5 ^2 B1 e5 h( i$ o "<li>专辑:" ++ N4 Z* }2 c2 y# p, K
x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +' \5 A1 V! h# k& H2 o8 X0 o
"<li>国家:" +8 ^( E& M- }; }
x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
) L& \; u7 u8 X- g. l( I "<li>公司:" +
" y" Q X. s# { x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
. p# ?, Y* z1 Z "<li>年份:" ++ p1 N, U: K! F8 K. O
x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +6 f+ C: ^! i0 g/ d( {# `% ]% ]: ^
"</ul>";
, f( U$ o- T- O, R( z$ i5 r }
; l' t. f% C9 l. r! ?( {
& t! O3 T% j/ F* Q ]+ U function loadDoc() {
9 \; \, `+ b0 v8 k* F7 {2 _% N3 y- g1 r! m! ^9 e( p, h) ]: R
document.getElementById("demo").innerHTML = table;
- i% P# F' y. Z4 i }+ T$ @2 i1 M. _ I7 w7 ~; Y# h
) B) v2 g5 A, X
</script>
4 l! x5 h8 ^% p- c O7 d
( ~, r9 N f2 X \, D- v6 r! N* v% O+ @& T$ D C2 v& T* A% Q
</body>! X8 _4 s/ G+ `$ z, w/ ~' j
( d6 v% m8 u, N) u/ }+ u</html>
! \5 P1 f+ j! ?$ e# y: y) O
! O1 g& J* S: T
6 \( [* d* y+ |) u& f! Z[/mw_shl_code]
2 z- s( w; ^. r' t Z3 e
/ z& x' ^0 W! h) ^
( N% t/ x4 O0 f% B" v; k
( x: y2 Z) n& _+ D- |XML文件
7 ^; N) k1 S% D. N1 V- _ }, C' R* R3 B3 c2 J
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
- t" [( ?9 X# z! [. g9 _<CATALOG>
) K4 c- [2 g3 k* L" N. F# q<TRACK>
) T& m/ X; Q% ^9 ?0 s& G8 `<TITLE>再见</TITLE>
& [5 G5 w2 q9 I! P, j+ C<ARTIST>邓紫棋</ARTIST>) L8 R) ~! A n2 f
<ALBUM>新的心跳</ALBUM>
1 \' _+ M. g0 d' g<COUNTRY>中国</COUNTRY>, b, P& D( S0 ?3 O
<COMPANY>邓紫棋工作室</COMPANY>8 E( T$ |6 N% s% c/ W9 t
<YEAR>2016</YEAR>
* S2 \4 u; d5 G/ K, A: \</TRACK>$ k8 @, ^' b1 ^# \
, a1 a- {2 c/ l. k9 y* `9 [6 `<TRACK>
- t/ U$ Y( F" b& W. B9 Z<TITLE>All I Ask</TITLE>
# J9 G; [' @1 p2 g<ARTIST>Adele</ARTIST>. r* P' ~. ^. c9 }2 ~; m
<ALBUM>25</ALBUM>) g6 Z. |8 Q4 l: |" \/ b2 `+ e3 A. ~
<COUNTRY>英国</COUNTRY>/ m4 m; F( U3 j
<COMPANY>XL Recordings</COMPANY>
8 }; t8 f: w4 I" g& Z<YEAR>2015</YEAR># t! X" [" n* s) }7 I; }+ V* D) L
</TRACK>
. C9 D" M- q1 W' c
) J. g, X5 `, m; J; U+ `6 I<TRACK>
: |5 k" l5 ?3 l2 e4 P3 k<TITLE>之乎者也</TITLE>
& T: F. u# g7 [" u<ARTIST>罗大佑</ARTIST>
9 \7 w5 F. w9 B( h6 g# ?/ G& q<ALBUM>青春舞曲</ALBUM>/ I/ Z# t0 n) S" L
<COUNTRY>中国</COUNTRY>
$ I6 g( Y6 F4 v5 W9 J8 I- r- y( q<COMPANY>滚石唱片</COMPANY>
8 ?% y( ?. P* |; Y i% Z<YEAR>1982</YEAR>
0 ?5 j( Z' V, Z) }3 p& P: C</TRACK>/ w5 e9 z( Z% e
8 z4 ^6 I+ J! m- q<TRACK>
- @0 Z8 u2 Y5 Y3 b4 L3 M! Z5 |<TITLE>Never Be Alone</TITLE>" m; r1 |( ^7 m% f t+ i
<ARTIST>Shawn Mendes</ARTIST>' F) O0 ^3 W7 z. i. }1 M+ q4 {
<ALBUM>Handwritten</ALBUM>+ p/ P+ B: E4 P6 t U
<COUNTRY>加拿大</COUNTRY>
6 @5 M2 C* v$ S! i, R4 d' L: j6 s<COMPANY>环球唱片</COMPANY>5 N6 C1 s% T$ d' G( q5 @; [+ s
<YEAR>2015</YEAR>
* X0 S7 |0 }, V+ w" W* ~& Q6 M: Q</TRACK>
6 y, `9 n/ F* s2 B$ Z0 N0 l) Y, h3 J3 w; E' o. B
<TRACK>
% V4 a; ?! M8 l3 E/ J<TITLE>慢慢</TITLE>' J/ t3 O R" N
<ARTIST>张学友</ARTIST>
6 n9 b' |' V# b% Q<ALBUM>忘记你我做不到</ALBUM>; t6 X b, ^1 D2 H) X' ]
<COUNTRY>中国</COUNTRY># M! r9 Z; z; A+ x
<COMPANY>环球唱片</COMPANY>
& _$ I* @# L: D' ] b" U. `<YEAR>1996</YEAR>
& T! F1 M$ `0 D) B, M+ h& g: s</TRACK>. S6 s% Y. P) R! I
4 v4 }& C* B6 u8 A* L( w
<TRACK>! v9 j0 [1 F( f8 }/ c; D
<TITLE>Complicated</TITLE>
; [- z, ~0 Y2 ^$ j<ARTIST>Avril Lavigne</ARTIST>, @2 `4 p$ Y; O7 q" C
<ALBUM>Let Go</ALBUM>* g' g3 j% C6 u9 N
<COUNTRY>加拿大</COUNTRY>
3 O `/ a9 t$ n! E<COMPANY>索尼音乐</COMPANY>& `* B+ v1 u0 B4 s/ K0 r
<YEAR>2002</YEAR>, @/ [+ f8 M5 P) N
</TRACK>" l; l `8 ^5 b5 [
/ Q) T4 F" e) i" A4 b F( |
<TRACK>' {) A5 x' q8 c: B. q6 U
<TITLE>三生三世</TITLE>
2 s8 _6 n: p- q# f( U* T. }<ARTIST>张杰</ARTIST>5 B! n. b1 u y) ^1 m: Z2 }
<ALBUM>三生三世十里桃花</ALBUM>7 t. ^: ^. H0 P/ f2 B) H$ P9 u
<COUNTRY>中国</COUNTRY>
6 E0 v9 v7 s9 l, ^+ A& u* P<COMPANY>仁溪音乐</COMPANY>4 A- X" n0 _; v5 a. l* ~
<YEAR>2018</YEAR>+ [/ F$ g( c* Z& |! j
</TRACK>$ ?8 ]$ u* _% O
: N! a4 V. z, t<TRACK>
: |0 u: Z$ o5 m* n+ M" M$ v# S<TITLE>Five Hundred Miles</TITLE>
6 I5 v9 a' P) j- o+ X4 J<ARTIST>Justin Timberlake</ARTIST>
% Q; E( y6 E7 A1 O$ r1 Y; H; {<ALBUM>Inside Llewyn Davis</ALBUM>$ D; t2 s5 R- D* u' i2 B. y7 ~
<COUNTRY>美国</COUNTRY>5 q9 s) E6 Z* J2 F7 d
<COMPANY>华纳唱片</COMPANY>
" V4 C! I9 S. g( D, T" P<YEAR>2013</YEAR>
r' l: z. X0 |7 E/ P) h+ Y</TRACK>2 F1 h [& H. j, ] E
$ P$ o% F9 x8 W" w6 k# P<TRACK>
6 _* ?0 L0 t6 t9 h<TITLE>演员</TITLE>
, D4 }( t T( s# [<ARTIST>薛之谦</ARTIST>- }4 k8 e$ C# m( o! q% {
<ALBUM>绅士</ALBUM>$ n9 ^5 [ g1 T$ j
<COUNTRY>中国</COUNTRY>
; V }9 w4 p6 @* I2 L4 o<COMPANY>海蝶音乐</COMPANY>
. V+ i( C" j; S% I* _<YEAR>2016</YEAR>* X# ?8 L3 j3 R' B
</TRACK>1 w9 l& @. m- L# J. c
, K9 I4 g' _/ b" C8 t) p# F7 N6 O<TRACK>
& G- A8 P/ T9 z2 }) y8 Z% `0 V& ?<TITLE>Numb</TITLE>4 d$ d4 k' v5 P ~2 T2 \7 H
<ARTIST>Linkin Park</ARTIST>4 b( m9 j ~; e6 Z
<ALBUM>Meteora</ALBUM>
( M" u, F1 D) u3 M<COUNTRY>美国</COUNTRY>& o8 I- ^* b7 k+ t
<COMPANY>华纳唱片</COMPANY>* l1 a) Z6 _4 h# {7 z7 u2 q
<YEAR>2003</YEAR>
G* @* c, s, @</TRACK>
" D8 o. N) q7 B, `& O5 k; m, T2 @; m' u! I" S! N, S5 W
<TRACK>
0 z$ B. {( L* ?7 V<TITLE>给未来的自己</TITLE>
; c( c- t9 d# u0 S/ I" E<ARTIST>梁静茹</ARTIST>
) E; w5 r2 t% z- q<ALBUM>崇拜</ALBUM># U0 M) i. N" Z5 n% M
<COUNTRY>马来西亚</COUNTRY>9 c" G" x$ Y5 u M7 [) r2 W
<COMPANY>相信音乐</COMPANY>! t, m E, w X+ S
<YEAR>2007</YEAR>) c! w/ F. p+ k& D, v4 w
</TRACK>
0 }, i! Z! x& o. u8 A
' V1 C$ ?' M L. C$ k! Y( h2 K* r<TRACK>& ?% \. H. I* Q( z9 y
<TITLE>The Monster</TITLE>
& R1 Z9 f% I. {! d! ?+ l<ARTIST>Rihanna</ARTIST>
t# d0 ~( D5 [ R, R<ALBUM>The Marshall Mathers LP2</ALBUM>+ e7 D+ c5 ~! z' Z0 B/ p& g5 ]
<COUNTRY>巴巴多斯</COUNTRY>
6 h, o* l G" k* E$ p. M<COMPANY>环球唱片</COMPANY>6 _) \0 k+ M; b% F; N) l
<YEAR>2013</YEAR>
8 V8 H0 E6 T- k, ^0 Z8 n8 f</TRACK>
" _- h7 ^# h* A4 V& v# C4 o
* C, l9 `" [2 w' S: n<TRACK>
* X k8 u m, S: p; F2 L<TITLE>我终于失去了你</TITLE>
1 V' S+ n! p4 \. o6 J<ARTIST>赵传</ARTIST>
& V" o5 `( \8 Z. F7 R+ E# V7 c<ALBUM>我终于失去了你</ALBUM>7 M0 Z1 \# I& j4 P
<COUNTRY>中国</COUNTRY>" n( M7 q p! t# r( W/ h* X
<COMPANY>滚石唱片</COMPANY>+ T$ E9 |7 F/ g; |8 }4 o4 t6 P2 l% D
<YEAR>1989</YEAR>& s6 x! F5 @' r' F% W+ H! w1 [
</TRACK>
3 N4 J4 P) G9 z" d3 j; u7 `$ [& [+ c7 O0 {$ T
<TRACK>8 m2 G2 |; i& [" F( v- F
<TITLE>Main Titles</TITLE>
- w9 s1 V% ^4 ?9 e/ j8 R# t9 |<ARTIST>Ramin Djawadi</ARTIST>
/ w- e0 z( G% G<ALBUM>Game of Thrones</ALBUM>
3 D5 l+ R! y" t2 q0 i<COUNTRY>德国</COUNTRY>
, k. t% u. r$ G9 ?7 z$ p<COMPANY>索尼音乐</COMPANY>6 S. p1 h' ~; B
<YEAR>2011</YEAR>
2 G, a" c( t( T f# _) h: U</TRACK>
^5 D. J& J4 r
& j/ d' @+ m( i8 ], l<TRACK>
% v2 I' U) y' O<TITLE>传奇</TITLE>
8 |6 q6 W" J) e" u<ARTIST>李健</ARTIST>* r) o4 z0 w5 v) N( Q0 ^
<ALBUM>似水流年</ALBUM>
6 E/ B1 s- |2 Q g1 I8 @2 S<COUNTRY>中国</COUNTRY>
, @& R/ q6 L: ]4 E# i<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
3 r$ J: n9 ]% G8 T" _<YEAR>2003</YEAR>
4 @# Y7 e. T- Q</TRACK># h N4 ?! u6 C6 v6 {. N. Y
, D+ C! J5 E9 U3 v9 O" I) Q1 X<TRACK>' c& e& e- u; p+ c1 C9 j( x- @
<TITLE>完美生活</TITLE>
( q" r0 \( [6 \1 |6 g/ M/ K* T% h( C<ARTIST>许巍</ARTIST>
) F6 H+ m+ h' o; S, U1 |<ALBUM>时光漫步</ALBUM>
( f2 h: n, J# k, h% ]' `6 }5 E<COUNTRY>中国</COUNTRY>, r! d. L* L, [3 c" R# `
<COMPANY>金牌大风</COMPANY>2 x& F7 C- A' h4 ]
<YEAR>2002</YEAR>4 E: u" V" U+ H w
</TRACK>) \5 _( Q5 U( y- v5 `9 s: }
</CATALOG>[/mw_shl_code]- d. P4 X* s/ h
|
|