|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
6 {/ D. c. [2 l* M9 s
" M" R T1 V& R: o6 s7 I# w) @9 {8 `' Y# g& r
[mw_shl_code=html,true]$ M" [/ A% v7 b; c
: }: i5 Z5 t/ e' V4 o% {: n
<!DOCTYPE html>0 z) P# u3 m T0 _ D/ G9 } O* g. Z
<html>
/ G$ J a+ K$ F3 r% ]; }<header>
# b+ V/ b7 Y+ U7 f) k9 R, l1 K- C <style>- i, \! N; F$ j3 A4 |
table,) @, l/ ^( t" \0 U
tr,0 q6 y& _" x* {. q; {$ a
th," N5 d; ~/ E/ a% J( u
td {
% ^& Z4 X: q9 n border: 2px solid rgb(20, 59, 230);" {7 x5 s! o& F" Y
border-collapse: collapse;2 S, G+ X: ?5 _- y$ X Y' I& _
text-align: center;
2 u+ [7 A8 h) `. t5 j7 N4 e' M2 F8 } }; ]5 X' p4 {( N: o: T; s
; {! D1 I! H3 X+ _8 n th,
}9 r4 G+ p1 E1 u9 g td {
( Z7 V6 l) @$ z padding: 5px;- h1 Q y' G d+ w/ n& D* `
}5 V. |* A( G( i- K/ B) S* n8 T
</style>
: w& D! k6 @' J' A3 ~1 i5 G y</header>
% o0 y! B$ L% e( k9 D5 M& d2 b t/ `6 v# o! Y
<body>
% O |5 x: ]: t- _$ z' A <h1>xml http request object</h1>
- Y' k8 Z4 R7 X( |( t" L <button type="button">Display Music</button>
5 l* T! w5 @1 q4 e* I4 ? <button type="button">Previous</button>( N* P) }% b# i" I
<button type="button">Next</button>
3 Z$ \; y0 m8 b <button type="button">get my music list</button>
3 m! h$ y5 w4 a9 [, v& k <table id="showMUSIC"></table>; [, ^6 g- `2 F8 g, R, l
<table id="demo"></table>5 K% T* d J i3 ?# J s# q* g6 @
<script>! r$ G5 {( H6 S5 Y S5 \5 Q6 T
) F7 n9 ]0 t4 X$ [# X( c var x, xmlhttp, xmlDoc;
- i* L; a( `" e8 B0 k7 G8 t 2 q0 U5 [7 }* T% \( S# |' f! v# t( Y
xmlhttp = new XMLHttpRequest();) G2 E0 l5 Z, f9 o! D) c/ t
xmlhttp.open("GET", "/files/music_list.xml", false);
& ^: ~) E8 S2 k* Y+ e- U% t) o, H xmlhttp.send();; A# o- ]: q3 k1 Q0 M; ~" Z0 E
; s* ?/ N; A6 @3 x) G5 d xmlDoc = xmlhttp.responseXML; ' c3 d1 v+ Y# \' ?+ G/ C
var table = "<tr> <th>Owner</th> <th>User</th></tr>"& K4 {" b i* q7 e
var content = document.getElementById('demo');
* y5 J8 _8 R( [" B/ T* g var x = xmlDoc.getElementsByTagName('TRACK');
7 H* g6 i) m/ C. e- a8 m e# \ for (i = 0; i <x.length; i++) {
. F7 t, M& ?% x1 L3 K4 R4 d1 \ table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
8 N5 R+ p4 Y0 Q/ S7 @0 u table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
7 S1 T1 @! m5 \ table += "</td><td>";
' H0 y' l$ r* V6 Y/ ? R$ z( k table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;3 b$ p# F& }, z* u1 b; H Z6 N+ I; |
table += "</td></tr>";
+ Z; g% t7 t8 l}+ V" q) S j) O% H4 P6 n5 x: G
: C0 q. C- E* n) C' z$ Edocument.getElementById("demo").innerHTML = table;
! d$ E, N9 H" W6 `) j, Mvar i = 0;
% U& D+ K5 d* ?2 m function next() {
5 E9 x3 z+ A% I O // 显示下一首歌曲,除非已到达最后一首) ]9 n+ G) U+ ]6 v# z8 y* b" E! g
if (i < x.length - 1) {
7 X: c% [8 f$ d i++;
Q1 D( ~) e2 M4 M6 h/ T displayMUSIC(i);
! ?9 b- g6 T7 ~& F; W1 s; o }$ C# f; m# H, \$ e
}4 A$ J8 N( X2 W9 ~- g0 k' Y2 r
7 u: D3 H/ W$ Q. F
function previous() {
, p+ }' w. D, S! y1 y. V) B // 显示上一首歌曲,除非已到达第一首& I' G1 g* ~. k1 n; C
if (i > 0) {% B( b$ w4 A4 b. ]
i--;9 q- j6 |( L- S- Q+ k7 c9 L7 Y. j
displayMUSIC(i);. C4 O3 D5 j! T, {( |
}
' h, Z8 v, ~& R$ j6 R }& t" G2 Y# ?( P7 ^' ^
% z5 H% B8 k' x; S+ r/ c! \2 z( T- X, ]$ C
function displayMUSIC(i) {; h# h% @2 R" B/ B
document.getElementById("showMUSIC").innerHTML =
+ U* [3 A# j% q% _/ Q2 f "<ul>" +
) y& u! M% L, Q "<li>曲目:" +
+ ]/ W% Q7 \' e x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +0 J# G. h9 |8 w+ I7 ]! R
"<li>艺术家:" +
# f. ?# E1 q* |) @& D0 F3 N x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
& j) t) h0 R7 T4 h, a7 r* f% @ "<li>专辑:" +3 [* o X; c6 G' s& x9 y
x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
8 P6 p3 j! S9 l% n "<li>国家:" +. t8 j+ ]8 i' ]' I9 ]. _
x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
2 j( ?+ Q. G$ L* k% ^% w "<li>公司:" +
. y( a$ k7 `4 ?0 M: R2 K: h. t x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
4 p: L8 c4 ^6 j! Z. Q3 ]4 ] "<li>年份:" +! L( m+ m: R! L; Q# ~$ Z0 F& A
x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
2 j7 x" S/ G |7 Y- [8 X" U "</ul>";
$ a8 D5 V& K& h( z3 ^! v }/ N* }& Z6 Y1 I J) I0 }. e
( l: y: P+ G. W; q function loadDoc() {* y- H( ~! o! j* f, I
& W6 v7 c2 Z* p: z" F( v# u document.getElementById("demo").innerHTML = table;( @* l# b/ }. p1 n
}0 G3 K0 }; y% G2 W/ N1 L
" A0 d8 q/ B( @, j) r </script>& o6 y7 [' ?& f6 h- f/ ~0 d
3 u1 r. ?# P% Z6 I" i: ?9 E
/ R" w# i4 m. D% x8 {% \1 u</body>7 Q/ }4 f" c( ?
3 }' ~- m4 o! \% g" O- K$ q</html>
; I0 j9 O- P' E+ m8 b! K
, U6 f0 y4 Z( P
/ [9 m! M( o$ }[/mw_shl_code]
/ q* z) f: v4 q, D, }, I+ \0 \( H+ B4 c5 [
! H$ L2 h1 j3 m( |
6 t8 b' z; T; N }! M- fXML文件% l' k) ^0 P' r+ y
0 D% q3 d# ?# J( H; | p8 n/ V
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>6 u0 s( Y; U* o( p
<CATALOG>+ h. j% h, J9 B
<TRACK>9 i( z( _5 G& t$ h
<TITLE>再见</TITLE>
2 E5 d4 u( S. R<ARTIST>邓紫棋</ARTIST>
1 u8 P) b( @6 f* n0 j3 n<ALBUM>新的心跳</ALBUM>
% ~) Y6 i0 v3 g0 r7 _! }+ p! c<COUNTRY>中国</COUNTRY>
" k' R6 a/ Q/ Q<COMPANY>邓紫棋工作室</COMPANY>
) }; c: e( U4 D$ Y6 f" y9 ?<YEAR>2016</YEAR>, b! B1 x* I& F3 ~7 z8 h6 b/ x
</TRACK>
' k: V8 C* Y3 X4 k% n, g; G. q' a0 x" b+ Y g3 [
<TRACK>
5 ^- H- d2 i/ j' i# R$ T' E+ |<TITLE>All I Ask</TITLE>2 Q3 q: N& }5 X; G0 g
<ARTIST>Adele</ARTIST>$ V/ m7 O' ^" D: i
<ALBUM>25</ALBUM>1 K, g* b+ y8 m4 b0 t8 T! ]# n
<COUNTRY>英国</COUNTRY>
0 K: t" A6 O. ]* L. ?! R9 {, [" I<COMPANY>XL Recordings</COMPANY>: q1 ^# p |1 A+ e3 R
<YEAR>2015</YEAR>4 j0 ~, q9 M4 v9 z
</TRACK>7 _- |. k3 q7 E& N. \7 |- D
8 Z/ F4 f# ]' `, N! _' e
<TRACK>
, A6 a1 h, @" O$ D; L<TITLE>之乎者也</TITLE>
, V' |- E; s7 E" }. @, j( A; e<ARTIST>罗大佑</ARTIST>- y; s4 ~) t9 X
<ALBUM>青春舞曲</ALBUM>1 M; m$ a1 m' Q& v b; M
<COUNTRY>中国</COUNTRY>- U1 C8 U! ~6 t8 @3 a
<COMPANY>滚石唱片</COMPANY>
4 W$ b+ Y6 C6 t5 G<YEAR>1982</YEAR>6 T. L3 y( A* i2 h. U
</TRACK>6 |& E3 b+ t# B& ]. L! c* T. X9 A3 Q
* {, p: b( @" E) ^0 Z T8 q! |% v<TRACK>/ Q+ |/ t2 }4 W7 ~8 g: Z' e
<TITLE>Never Be Alone</TITLE>$ i3 X* }, y( }1 f' _' d! V
<ARTIST>Shawn Mendes</ARTIST>, v/ M; F! z8 S
<ALBUM>Handwritten</ALBUM>* z* I/ b% o m/ R; Q
<COUNTRY>加拿大</COUNTRY>
+ _+ V7 [8 r: O% t# s<COMPANY>环球唱片</COMPANY>+ P8 Q- W( L$ H% k+ T" \' ]
<YEAR>2015</YEAR>
9 y5 U* S, w" ]* v B4 V</TRACK>! {" }$ q% y2 u4 p. Y
; A+ ]8 ?9 U6 m, Z) \2 o; G: a
<TRACK>- |# e. G! A. d( e' p
<TITLE>慢慢</TITLE>
# x& F H; F9 w* }, W<ARTIST>张学友</ARTIST>
5 x$ \- K3 P- S! U<ALBUM>忘记你我做不到</ALBUM>. Z* p& w, @: `9 l3 A5 w1 r$ A
<COUNTRY>中国</COUNTRY>: }5 F3 l- I0 d% y0 N& y0 T. r# B
<COMPANY>环球唱片</COMPANY>: I- V- k7 t. S0 F
<YEAR>1996</YEAR>
+ s2 E; |6 \. h' W</TRACK>; e+ d& Y% x! H& M" u0 T+ g
3 R; D# Y" {- a8 O<TRACK>
" q' X Q1 L* N& H6 y4 L<TITLE>Complicated</TITLE>- `: a; M; f" b; r
<ARTIST>Avril Lavigne</ARTIST>0 L2 W' c2 x( A7 s t. m
<ALBUM>Let Go</ALBUM>3 d1 ]0 u$ v8 ^3 C8 I6 \
<COUNTRY>加拿大</COUNTRY>$ X: r: C5 I. L; L3 t
<COMPANY>索尼音乐</COMPANY>
5 W B. w6 P% ^9 H* L" ]" ?<YEAR>2002</YEAR>
/ V f8 {5 R$ a</TRACK>$ [6 [0 \; v4 S1 t& ?
/ t/ _% D7 Y! U/ c( L! Y. z<TRACK>% ?3 }9 }5 R4 K# Y1 H1 R
<TITLE>三生三世</TITLE>& {& G& ]' E& a
<ARTIST>张杰</ARTIST>* y3 M/ _ w$ D6 O
<ALBUM>三生三世十里桃花</ALBUM>. T i, a, w$ Y) K: W
<COUNTRY>中国</COUNTRY>
; w! j9 h% o% E* \2 Y# T<COMPANY>仁溪音乐</COMPANY>
& [* b7 v; ~3 X2 k<YEAR>2018</YEAR>
' S2 F4 c7 E% ^$ K. {: `% {</TRACK>4 K5 t1 u8 v! A# n' G
0 z7 x/ x! J+ ?7 z) s; ~: y
<TRACK>4 d: l9 g. j# w0 k3 D
<TITLE>Five Hundred Miles</TITLE>! Z0 V' G ]5 C
<ARTIST>Justin Timberlake</ARTIST>" Y @& i' K& Y
<ALBUM>Inside Llewyn Davis</ALBUM>$ c3 A3 M% I. t7 t
<COUNTRY>美国</COUNTRY>
; q% P; M! }) v- V) D<COMPANY>华纳唱片</COMPANY>
' ^9 ^) S* \+ R* i<YEAR>2013</YEAR>! [+ p+ x$ @2 w
</TRACK>
0 m ~% j' [' Q J# l5 O! }
' ?. v" {- b& ?$ s+ q# R<TRACK>
~( d, Z8 v9 A# a<TITLE>演员</TITLE>0 O% Z' q5 B) P) j' D$ r
<ARTIST>薛之谦</ARTIST>6 ]* @. S, e" \& M* f
<ALBUM>绅士</ALBUM>
# F! N: X/ r; [& g, r# r7 @<COUNTRY>中国</COUNTRY>" L& B r$ F3 P* _8 I6 V( j
<COMPANY>海蝶音乐</COMPANY>
( `- k. B7 P* @/ G$ n4 j8 f<YEAR>2016</YEAR>" m) Y$ D9 L. H2 n8 \4 s
</TRACK>
( O' s$ i4 p4 P& d& }( v4 z7 b6 N3 A w1 y. q4 o
<TRACK>0 V" F1 c1 l" t
<TITLE>Numb</TITLE>+ K/ A7 r+ ]) X8 t1 D Q3 J y
<ARTIST>Linkin Park</ARTIST>
4 _' ~+ s* _3 `# n" d<ALBUM>Meteora</ALBUM>6 V: e2 m, z( m0 P, \: d" {0 H! S
<COUNTRY>美国</COUNTRY>
& G) f: C6 r7 @; m3 F<COMPANY>华纳唱片</COMPANY>
! k; G! d2 d! J$ R<YEAR>2003</YEAR>
0 `3 Q% N1 e. K8 ]( y</TRACK>, a2 e- }( c+ Y- c; W3 ~* h/ V
8 u* J+ F3 b- \- h; Y( `
<TRACK>$ R) i/ b/ D( M/ J+ s1 u
<TITLE>给未来的自己</TITLE>
7 j& {; r; W8 q/ l<ARTIST>梁静茹</ARTIST>: }0 G7 I# J5 R1 z2 Z7 c8 a
<ALBUM>崇拜</ALBUM>4 H6 _* o4 K' Q9 x- Q
<COUNTRY>马来西亚</COUNTRY>- P, [3 i. P; d7 `7 O! ]; _
<COMPANY>相信音乐</COMPANY>5 k* b2 R8 _7 `5 t) h, Z. i
<YEAR>2007</YEAR>
; t9 W* t8 @. R) k' e! y</TRACK>. s* Q; V3 E$ L$ l5 _, h
4 L y1 x+ _4 v
<TRACK>
5 J, M6 S* W' K+ I; i- i9 `<TITLE>The Monster</TITLE>8 D, H" D( \; q$ w4 E
<ARTIST>Rihanna</ARTIST>/ ^, I" ]" D4 w" ~2 \
<ALBUM>The Marshall Mathers LP2</ALBUM>
2 g: c7 t, U9 U+ ^, N<COUNTRY>巴巴多斯</COUNTRY>" m. t' a, G( |; }) B" I
<COMPANY>环球唱片</COMPANY>
: ]# s/ v- P" m9 i<YEAR>2013</YEAR>0 N l4 t$ g/ J: ~5 A
</TRACK>! q' e; p0 Q! |' W# o! v
2 i6 {# A% x) d. D5 \( ^) q<TRACK>
: E- c% t8 P. [# b D<TITLE>我终于失去了你</TITLE>( k9 ^. k# k K4 b/ T7 Q5 E6 R
<ARTIST>赵传</ARTIST>
$ ]! R% F* D2 K$ i<ALBUM>我终于失去了你</ALBUM>
& q6 v! c/ _2 {6 C8 X<COUNTRY>中国</COUNTRY>! n) A( i. Y4 S1 ^, {4 z, f x3 n" C
<COMPANY>滚石唱片</COMPANY>* n# n0 L$ u, t8 m' y% n
<YEAR>1989</YEAR>5 b8 p, k. d" t2 q- c
</TRACK>6 E6 V+ D1 R- m0 g* w
, _, O8 B) a0 d/ g* I! s* ~! N<TRACK>
1 S+ t3 Q2 |. y<TITLE>Main Titles</TITLE>' W+ \* t7 g% v" y
<ARTIST>Ramin Djawadi</ARTIST>2 ]! q1 q; e. f+ I
<ALBUM>Game of Thrones</ALBUM>. ?* E% c6 M/ m% Z' h9 p
<COUNTRY>德国</COUNTRY>
8 q% i+ n# p5 B9 U<COMPANY>索尼音乐</COMPANY>5 Y |! E9 l& x5 A7 g; H
<YEAR>2011</YEAR>
0 W# E( i" D9 W0 E' T3 b# I4 y</TRACK>
% f. F* b8 _' W- l0 t! _$ |0 d6 |8 v+ a" G) O7 l9 T/ d
<TRACK>
2 K1 U/ r! p: c6 y+ M) h* {6 E<TITLE>传奇</TITLE>9 v* V/ G" j1 f9 f6 A
<ARTIST>李健</ARTIST>
4 T i# x) e# C8 x<ALBUM>似水流年</ALBUM>' W1 |2 G% S3 |% b
<COUNTRY>中国</COUNTRY>- w" S; _3 z4 C/ R
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>6 ?8 v0 N" [, Z/ u
<YEAR>2003</YEAR>9 B' F! F8 K, `% F
</TRACK>
* X% {* f3 x- K. d8 U; L( e' N5 C \- K% ^
<TRACK>
& ^. i* J# L3 [ c g<TITLE>完美生活</TITLE>
2 o9 [2 k- F' f/ z) u! o<ARTIST>许巍</ARTIST>: e) D9 k% r7 C' w- w
<ALBUM>时光漫步</ALBUM>0 R6 O7 a9 {! x
<COUNTRY>中国</COUNTRY>
* M9 d' f0 P; v) g) N3 O5 n& `<COMPANY>金牌大风</COMPANY>
4 h# ^7 m& w: L: m- h2 g<YEAR>2002</YEAR>
( K' ?: `, l; E' x3 d</TRACK>8 ~+ C/ h; I( V" G4 d5 k0 Y
</CATALOG>[/mw_shl_code]4 H5 o$ M& d3 J& L- F7 C! ]- \
|
|