|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
" i& U. Y# f3 h& L; K; t
0 W% ~5 ?: v5 g( a4 F' n
7 B2 `; q' B( V+ G1 T4 D[mw_shl_code=html,true]
7 c5 Z) y$ M4 z# e1 H$ `. m: O4 k, |( y8 g. c3 z) |( ]* K4 ~3 |7 @3 D- J
<!DOCTYPE html>
$ e7 ]- C' M2 N/ Q<html>
- T! r. ~% Z9 K" Y H' m* N2 w<header>
& J( d+ [5 m; j8 k <style>
/ l" K( w: b$ r7 X table,) `, d6 E5 A2 p7 C8 C
tr,
5 _ y9 t$ u! c9 X th,: Q4 j: T: }4 ^5 x0 B. t8 s
td {+ `1 K' r; X* T, E9 g' L
border: 2px solid rgb(20, 59, 230);. Z% _: v+ O! ?( i# k$ _
border-collapse: collapse;" g) |2 Y$ @8 c9 B
text-align: center;
) r2 C8 W% }4 Z( j }; w- V+ |4 H# L3 B' T4 J# f; C [# L
4 X; d3 `$ |; T0 |& e$ `2 h
th,
W0 I5 i' d" L$ s, \ td {% N4 p; j9 {1 u# x6 }" R$ f) V
padding: 5px;! j5 S! V& i5 C6 S: H$ [
}& Y% T0 x0 `- s9 V9 d
</style>1 o$ l8 }7 m) r, ?# |9 F% r
</header>+ A* v# x( S; p+ w% a2 a! [3 I
/ v/ L: Z- j4 U/ @$ W
<body>
1 F- B, G* Y7 h7 F <h1>xml http request object</h1>& ^% J6 k7 s. M7 M9 n$ j- c! M
<button type="button">Display Music</button>
" x* k0 Y% m& F7 k" z9 b! D/ X* x <button type="button">Previous</button>
' J% K6 _/ {" f, W& V3 A) G# d <button type="button">Next</button>
: }: v; v( Z0 Q! _4 Y" C* A3 } <button type="button">get my music list</button>
' i. U4 m- ?/ b% t5 ]& B" T3 J <table id="showMUSIC"></table>9 K9 V. k( S* s% o8 s( M
<table id="demo"></table>4 _7 d$ u: E0 g- P
<script>
4 ]5 n: J5 j9 A/ Z4 N2 D3 f5 o
9 ]) o! ^' H+ T7 Z* \4 i3 v5 W6 r var x, xmlhttp, xmlDoc;! W) W% e& H5 f' U
2 q5 P* r, `0 e. j9 o xmlhttp = new XMLHttpRequest();* r# s# g) D* |4 y" B5 ^+ N
xmlhttp.open("GET", "/files/music_list.xml", false);1 V; [. S, o$ o' V- [; C
xmlhttp.send();; |, Q P; t. J
4 c( `4 }- n) Y7 ` xmlDoc = xmlhttp.responseXML;
4 i% J$ s# p# B' N8 ~" m5 S var table = "<tr> <th>Owner</th> <th>User</th></tr>" e9 c o4 D8 C0 e
var content = document.getElementById('demo');1 a/ |! e. h( p: G, P7 Y7 Y0 |
var x = xmlDoc.getElementsByTagName('TRACK');
8 a/ Y, \6 r- E7 S2 s" b4 a for (i = 0; i <x.length; i++) {
) b* l6 b0 U4 O1 l3 s9 [4 D7 l' T table += "<tr onclick='displayMUSIC(" + i + ")'><td>"; R: }6 l6 i5 c, E, _* q6 N6 Z% U
table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;( M! b2 |3 B1 q0 D7 j/ N
table += "</td><td>";
* ]0 s! M$ f3 x. @8 r; x. v table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue; C& W# t. h& N' q9 I* K
table += "</td></tr>";
$ B$ s9 Q7 q) `* U$ |}
1 d) f5 Z/ u' Y2 l% e2 `* _* H I$ ~* \% q
document.getElementById("demo").innerHTML = table;8 D% m# H e% P; k
var i = 0;
3 @( |- E9 E4 z' }/ u function next() {% V8 o# B# ]: a; E. s
// 显示下一首歌曲,除非已到达最后一首
E$ I; @ V2 h9 q1 \ if (i < x.length - 1) {' ?7 t! U" u$ Y( h0 D0 l* X
i++;
: o0 \/ O; w/ ^) Z- g9 M/ @2 s displayMUSIC(i);
0 o7 }) a0 e! \; r& a }: S ?" ~" m% s
}
3 P. F) o% {7 U8 i/ n f- E( z% g: B& x5 A
function previous() {& Z" K) w0 I$ n* L5 ` Q6 I
// 显示上一首歌曲,除非已到达第一首& T! a8 w7 b; c) z6 V& U
if (i > 0) {# J' e/ `2 \8 M6 w
i--;- b9 k8 }' J+ F+ q
displayMUSIC(i);. H! V% C v8 _7 I6 _. A/ w
}# T! G5 ?: u, b( F% c
}
3 w& O; K+ ]4 z3 E
3 z! a! ~" G1 a! { function displayMUSIC(i) {% b H& c3 c; _, S/ X0 y
document.getElementById("showMUSIC").innerHTML =
8 t6 ]8 Q4 W; ~7 }! G "<ul>" +) n' a, Y" N1 w7 b. G# \
"<li>曲目:" ++ Q# b/ x g5 J
x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
0 V. @! h- V q# N: n1 {) o0 Y "<li>艺术家:" +% l p( g+ K. p$ v
x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
# T9 R2 ~6 W; ?/ s4 D- { "<li>专辑:" +& g8 M' j3 ]8 m1 K. w# C$ _- B
x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +4 J* W' H. ^8 h1 k
"<li>国家:" +
% T( P- y5 a' u4 e7 d3 Q x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +8 z7 P/ R7 [; }6 F0 S. f6 ]5 r
"<li>公司:" +: K6 |# D# n, Q7 `- G0 }7 Q
x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
6 H# J0 x0 {5 n% L "<li>年份:" +& k( @) [9 Q2 `! d1 J
x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +) {0 O# I' {- ~
"</ul>";
( p1 [4 r2 I7 p6 |# v }$ t& @% T3 ~2 v4 | Z- D6 d" E$ d
+ ]! x0 y. S1 d6 T* q m function loadDoc() {
# T1 F8 I: m! `
' [3 n7 D( _7 _4 `8 ` document.getElementById("demo").innerHTML = table;$ h0 T0 T N! v3 r: u9 E
}% _+ Z" g1 i. I R" w" x8 T
0 y( m* K! u/ S& @4 q) A- w </script># U% s5 `- K" O$ \$ b
; a$ O% n* t& H: I' N6 X* N" E
$ G; E# Y0 H x- a E) [; f</body>+ a# u9 P5 w$ B! l' \9 u
1 y( S' M' N# o: a+ d) v
</html>
9 t0 J6 D, _- F( {5 H* Y- ~" x0 C, K; n, D, ~" d3 V
7 t# ]; [9 A/ e) a4 z; I, g2 y) i: i[/mw_shl_code]
% I; `2 e* L r3 R% {! f0 r9 l- r/ \, [2 `( d
R7 D- N" k. r3 E9 P' Y. B+ R( {& S( \2 `( ^3 I
XML文件1 F# c! ?, k6 E# r5 c6 o3 b y
( d5 l1 \: S, k1 D6 I# `[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>6 g: f) ]' A I: W/ H# _2 C
<CATALOG>' A7 Y T% ^. z/ t8 _: c% m
<TRACK> I' S7 n K5 i" W. t- A
<TITLE>再见</TITLE>
) m9 X* i9 D% l( i6 I8 V* y) s<ARTIST>邓紫棋</ARTIST>
! V" [+ b% v8 v4 ]' w- p v<ALBUM>新的心跳</ALBUM>8 b2 n0 r/ N2 s2 q
<COUNTRY>中国</COUNTRY>
: L# j% Z: L1 K2 p5 T) i<COMPANY>邓紫棋工作室</COMPANY>
9 v% [9 k) M+ O8 n) m<YEAR>2016</YEAR>
0 L$ r' d* ~$ C J5 m. w- x3 H" r</TRACK>0 f3 w. ~: M6 ^ h
& {( z2 M O' p" S" f0 w0 W
<TRACK># w' a) B. Y, ?; }
<TITLE>All I Ask</TITLE>' U5 k( G- ^- X8 ?& T2 h
<ARTIST>Adele</ARTIST>
1 F) a" Y j# q" h<ALBUM>25</ALBUM>
( X- R \: L% \& _; [7 X. H- v<COUNTRY>英国</COUNTRY>6 q/ d& g4 z6 r: K0 Z# B$ y% ~4 [6 r5 t
<COMPANY>XL Recordings</COMPANY>. r9 l+ r' I- l5 y! A- Y$ Z4 u* u
<YEAR>2015</YEAR>4 {0 t/ @8 p5 X+ s
</TRACK>
$ ^ \9 {' P9 ^; i8 g1 P; }* L8 {! M {
<TRACK>
$ ?9 Z# b7 g5 x U$ }$ r" t# v" ?0 _<TITLE>之乎者也</TITLE>
* x3 _) ^" M% {<ARTIST>罗大佑</ARTIST>) W3 h0 Q: h1 Y$ ]) c# j1 g' A0 l' P
<ALBUM>青春舞曲</ALBUM>
& l" P; s) {2 Z9 [0 T<COUNTRY>中国</COUNTRY>6 S. S) D- B3 u- N) ~5 Y
<COMPANY>滚石唱片</COMPANY>
3 O, L1 V" l: g) W* s4 a2 z4 r! a<YEAR>1982</YEAR>; v7 M2 `7 K4 @) \% b5 e! L
</TRACK>* j; U/ W) C1 B7 R8 u0 ?- B0 z
. D) z$ \! |# k ~! B<TRACK># Q& b- W3 j: j
<TITLE>Never Be Alone</TITLE>
) ^- G s; A# k4 j" `' v) E<ARTIST>Shawn Mendes</ARTIST>/ [$ O3 o( ~' ^
<ALBUM>Handwritten</ALBUM>
: k5 B$ C& n% h. V: D/ a<COUNTRY>加拿大</COUNTRY>
8 y* c2 z7 T8 |( `' O<COMPANY>环球唱片</COMPANY>
' a; p; [2 n" g! E<YEAR>2015</YEAR>0 W4 t* I9 n$ l' h6 U4 h
</TRACK>1 d5 t9 d H, E! ~3 Y& N: W/ Y
4 I w' U, d8 D; k! i& k! G/ k
<TRACK>- w# E1 j' e {
<TITLE>慢慢</TITLE>
9 [1 N- [7 g& r- Y' J; I8 P8 x! l- f<ARTIST>张学友</ARTIST>1 V8 L- z) c+ p/ h; W- r' i# q; ^
<ALBUM>忘记你我做不到</ALBUM>
) E# X: W$ q, T6 b2 Z: F' U<COUNTRY>中国</COUNTRY>: J4 T7 C. c. c" t/ `/ Z, P6 m5 N% W
<COMPANY>环球唱片</COMPANY>' a" j) _, |& `
<YEAR>1996</YEAR>
8 P$ e! Z# @' B5 H- J/ ?</TRACK>
T! M4 ?% y. ` S4 ~: }( z/ _" T6 q' K. j# U
<TRACK>; q+ s- n3 Q1 n
<TITLE>Complicated</TITLE>. F0 q; H: @4 l7 b
<ARTIST>Avril Lavigne</ARTIST>
3 M+ y$ w8 L' o8 s- p<ALBUM>Let Go</ALBUM>
0 [1 j$ {% r; |/ m<COUNTRY>加拿大</COUNTRY>
* v! f8 J4 \- i! }% t<COMPANY>索尼音乐</COMPANY>* @2 e( B" o e# J
<YEAR>2002</YEAR>% L1 ?( g6 P' Q3 n$ s7 ^$ s
</TRACK>
7 G# K6 q/ V. M7 i2 a# G
/ h s8 n+ `, t$ D0 m9 w1 f<TRACK>
$ {1 t2 L( Q2 e8 `1 V1 }, g& x<TITLE>三生三世</TITLE>
7 i' w. ]8 H/ L3 M<ARTIST>张杰</ARTIST>, `2 Q% _) L+ o9 a
<ALBUM>三生三世十里桃花</ALBUM>9 p& v% W2 J) E. o9 v
<COUNTRY>中国</COUNTRY>$ j$ R& ~; Q1 W, O
<COMPANY>仁溪音乐</COMPANY>
3 z l0 ?$ O( ]# {9 K<YEAR>2018</YEAR>1 r. u& Q& ?- T' K/ M
</TRACK>
1 H: ~, U* f8 ~+ @: m1 a; D0 e( |5 `, b2 Q" H
<TRACK>
& f- [% d5 w1 ^& e0 Y<TITLE>Five Hundred Miles</TITLE>
/ y" z; I" B. ~, x<ARTIST>Justin Timberlake</ARTIST>
" g1 K) Q# Q3 }9 l1 f<ALBUM>Inside Llewyn Davis</ALBUM>
Z- `/ f! ~1 E8 m* u$ Z<COUNTRY>美国</COUNTRY>
1 M1 H% S& z, }( N<COMPANY>华纳唱片</COMPANY>
4 E) w$ G+ Z% b* {' _! b<YEAR>2013</YEAR>6 e1 m" ~ J+ f4 E7 g6 K" t
</TRACK>: s( g0 n9 r+ j) K* k5 _
7 U0 k, N8 G- Y, d% x8 T+ p( j+ |
<TRACK>: `1 S; f+ n$ V8 J' \6 f9 F: P
<TITLE>演员</TITLE>
6 j. S. I# D( Y" M9 t" s<ARTIST>薛之谦</ARTIST>
) z2 d3 I+ K n% u% f' j2 i5 A1 Q<ALBUM>绅士</ALBUM>. L/ B; s7 i E/ ~; K6 O5 p; k3 o F
<COUNTRY>中国</COUNTRY>1 g% q; l3 X, I
<COMPANY>海蝶音乐</COMPANY>
* C- E; O3 i* p8 P% |" y* S<YEAR>2016</YEAR> S( F: v4 V n$ N
</TRACK>
8 K$ a l6 L+ ~/ e6 e; a1 C* p
7 Z% ]& R- K7 B7 b8 l5 _<TRACK>% U5 d, s+ @' z% S2 N7 m5 T
<TITLE>Numb</TITLE>
2 W+ V0 l/ v* q9 V% O( {<ARTIST>Linkin Park</ARTIST>
2 ]0 \* p9 x* |' z9 A<ALBUM>Meteora</ALBUM>
/ A0 T8 A( I9 n1 ]2 D/ @, E# z! X<COUNTRY>美国</COUNTRY>
0 E P; O1 P+ o8 Z; q<COMPANY>华纳唱片</COMPANY>
3 g' a* \$ u" l$ Z0 t* I. |% z<YEAR>2003</YEAR>+ U) Z( M5 h. x$ F
</TRACK>2 I, ?/ H; q: I( i0 L
4 I4 z! }* @* }<TRACK>% ?2 S+ a' `9 p7 w( D+ B
<TITLE>给未来的自己</TITLE>- Y& ^! p- a9 F
<ARTIST>梁静茹</ARTIST>! a) e9 x* p6 g
<ALBUM>崇拜</ALBUM>' b, v1 S; l8 |$ K
<COUNTRY>马来西亚</COUNTRY>
) T$ }% J8 ] @, i; u& g8 P( Y<COMPANY>相信音乐</COMPANY>
" u: ]: S: @+ c<YEAR>2007</YEAR>; Z) c% Z+ \2 p) Z
</TRACK>9 P5 K' m; ^8 x% z9 m; i) o! E
# i) y, M" r& Y( L<TRACK>
: X G. e2 X3 z# `% `& y<TITLE>The Monster</TITLE>
$ g8 j' T* x9 B. H4 y% C<ARTIST>Rihanna</ARTIST>
1 |# P0 E" \+ }: n<ALBUM>The Marshall Mathers LP2</ALBUM>
$ e3 d5 f6 J. C2 p; D# x& O6 r<COUNTRY>巴巴多斯</COUNTRY>6 M4 h; d: Y& }
<COMPANY>环球唱片</COMPANY>4 W3 `& r% X- o' @. a6 E& }4 [0 r7 }5 R
<YEAR>2013</YEAR>
4 \# v/ D5 I) F$ o% s5 ^! m8 X</TRACK>0 c! c2 C/ a+ o) W. n3 W, R
5 T9 ]$ T; `& C& U* Q1 r* k7 }% D<TRACK>8 v# C# e) |- F) R
<TITLE>我终于失去了你</TITLE>
! U5 }! N2 k6 W<ARTIST>赵传</ARTIST>" e" C- H+ B& Y, M! _
<ALBUM>我终于失去了你</ALBUM>$ s% N7 x* F' n) Q2 j
<COUNTRY>中国</COUNTRY>, c( I. t! L/ f4 N( p" C& U
<COMPANY>滚石唱片</COMPANY>9 }4 i8 X3 _/ }" h
<YEAR>1989</YEAR>
# [9 b+ w0 U: @7 u# B& P) A</TRACK>
/ z" M3 d0 ~$ j; h+ f- S9 Q/ E& e
8 V ?; Q( r( z3 p9 i# b8 a+ y$ x<TRACK>2 l; ?3 D3 J( D1 @4 q$ P
<TITLE>Main Titles</TITLE>
5 M F( j0 b) H6 f2 K<ARTIST>Ramin Djawadi</ARTIST>
9 @3 ]5 e$ U# \( X% y- Z<ALBUM>Game of Thrones</ALBUM>" A- t* P" J' }
<COUNTRY>德国</COUNTRY>+ q/ ^( c" [# D/ R1 i2 ]
<COMPANY>索尼音乐</COMPANY>
- V) t9 s e* {! X- q( i( y<YEAR>2011</YEAR>
! ^+ n" C, [1 E8 z</TRACK>
4 a5 O) k$ B, Y5 R. J: E8 v! Z
" R" h% X6 M" z% C5 l<TRACK>
6 ~" M" n9 a0 W E6 Z<TITLE>传奇</TITLE>- {# z! I" K2 ~" X
<ARTIST>李健</ARTIST>& l) B' v3 X3 ?+ c7 c
<ALBUM>似水流年</ALBUM>8 A1 W3 u0 B( M! y- I" Z
<COUNTRY>中国</COUNTRY> E' i$ l4 L/ s" W" _) X
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>3 V" c+ j$ p$ {- S
<YEAR>2003</YEAR>
! j. r4 f. |" k4 @1 f% t, V1 E' N</TRACK>8 _4 L7 J6 }. ?: V6 l) O3 o7 ~
4 y; l: C+ M# r% o0 W E" R
<TRACK>
' T. Y6 [% M; g' k Y<TITLE>完美生活</TITLE>
( i i0 s) @0 Q. K0 B<ARTIST>许巍</ARTIST>; v! w9 A1 i6 }! N
<ALBUM>时光漫步</ALBUM>
# W+ P9 w* \8 k% L. \2 O5 m" ?7 Q) O<COUNTRY>中国</COUNTRY>
0 v5 n' f' T$ [" ?0 X: e<COMPANY>金牌大风</COMPANY>; X" p5 Z3 L+ _3 a- t8 S: b/ M
<YEAR>2002</YEAR>
; p1 w8 i& ~7 n& w! j</TRACK>
1 ]+ U( |7 T& c8 B0 ?6 `5 L</CATALOG>[/mw_shl_code]6 g+ Z/ a, }4 ^7 m
|
|