|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
1 c" b" a* f; I& H k: n" Z- I$ ~# U% [% Q S- d& J+ g; T
% s- n7 G6 U: O& y( b[mw_shl_code=html,true]' g4 T _9 l; U) l) F9 ~, u6 z
) j0 V' t S7 q/ D+ U7 y4 [
<!DOCTYPE html>
; i# t* Y+ T0 s+ W<html>% v1 N2 J9 ^4 F- p2 m
<header>
`2 W k" e! K' F( `; P$ F/ a. E6 J, l <style>
( p5 [! f7 v2 T table,
- T! e' X( O# | tr,5 y N$ G5 @! j* g: ]
th,* Z+ D4 Q" `/ {, Z1 U
td {
$ K8 q0 x0 l$ k$ R. f border: 2px solid rgb(20, 59, 230);
' I* o7 D6 W. Z+ ]* e3 O8 Z1 B8 V border-collapse: collapse;1 s4 ^+ [& X0 {; l% m
text-align: center;0 J1 a% s- Y7 l; r, Q: u
}
( b/ ?# N T" k1 l2 P% F7 F6 q, d! o" J, m
th,9 ?( } d; K' ~# E: `6 M# B
td {+ p7 P2 Z+ Z8 p, N) Y8 t Z! c% K& W
padding: 5px;
% P& [ L7 {* g( x" Z1 V1 o }
9 V# ^( W7 k% s </style>
+ j6 s$ V D3 w. p</header>3 _7 Q! B# O( w" k
9 \# t3 T8 u2 l+ ~# Y, i
<body>" h5 W7 ^) y( K) p; R8 j7 R% R# T
<h1>xml http request object</h1>
6 [0 C2 u) O7 L) N- F& z% v4 p <button type="button">Display Music</button>
- x) ]. ?% H. _" L1 r# E <button type="button">Previous</button># Q! X4 i, i" u
<button type="button">Next</button>$ B/ T; k: n! b6 n
<button type="button">get my music list</button>
4 y; V7 E+ W+ j+ d% a: h: b* T1 b <table id="showMUSIC"></table>' N4 H" j/ `. k5 G
<table id="demo"></table>
[7 ~: `, b, }6 g5 ~! }8 S1 ] <script>
" t0 B. O& ]7 h `9 j& Z0 G! l, Q4 a5 F. e! ?# T$ m0 ]
var x, xmlhttp, xmlDoc;
3 ?- j3 E0 Z1 S. q) [( ^ 1 \# U" l9 U3 d
xmlhttp = new XMLHttpRequest();
5 h0 `, ~- \+ b1 n: K+ | xmlhttp.open("GET", "/files/music_list.xml", false);
. D# f; J4 ?9 s T7 h# U xmlhttp.send();: v! n" o6 p5 P7 ^( A
* l' S7 [: h6 O' u; s1 B
xmlDoc = xmlhttp.responseXML; 4 R x1 I% c2 u
var table = "<tr> <th>Owner</th> <th>User</th></tr>"% ^# a8 m% r& C+ l5 ]" C7 v( y
var content = document.getElementById('demo');
! |- G \5 N; [- d' h$ L* _) R" B, t var x = xmlDoc.getElementsByTagName('TRACK');
) n' d1 C M3 e" ~0 E for (i = 0; i <x.length; i++) { 4 h0 m |% ^8 ]2 m8 K( `8 J
table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
+ U, w- m1 }0 }& {( q2 t6 W table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;. }+ J- U7 K, L$ c
table += "</td><td>";" ?- p, z( l8 m# k3 O |( t5 N5 F
table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
- d7 b$ S- V7 W# h# a2 n) ?7 i table += "</td></tr>";3 H- Z. H A) }. M H7 o0 Q( s$ D
}
) e( I/ O! g( p5 Z! R9 p5 s' K" X6 t% |5 N! D
document.getElementById("demo").innerHTML = table;
7 \6 _( L( B0 |1 ` c" v. R3 nvar i = 0;
7 s) Y; q$ V8 _0 I" u p0 o2 n function next() {& Q1 d5 A7 T0 Q2 F3 o
// 显示下一首歌曲,除非已到达最后一首( e. o8 W; s. ~2 V
if (i < x.length - 1) {
: w6 l) p- D7 ?0 v: | i++;
, L7 y4 n* Q r: o displayMUSIC(i);% |7 b- X W+ m5 X! @0 t) R
}
! M4 I: c0 c( `4 ~/ i7 w( f4 T }$ ?5 d0 H& P0 m: M9 i1 N0 v% p
4 O$ Z$ K& ^( e+ \
function previous() {
# g+ e' i9 c8 r6 G // 显示上一首歌曲,除非已到达第一首
+ b }* J$ P7 j$ P7 g4 C0 P) c1 U if (i > 0) {7 k o0 l1 z& r& z9 J
i--;
$ G. b6 Q9 ~/ N& I [. f( j5 |& C displayMUSIC(i);
, }! a" l5 I' x9 S+ r% c& E/ T0 N }
; T5 C% P4 f/ | }6 d+ A' j; t R8 g
9 L" |1 p: g) q
function displayMUSIC(i) {( {0 b! a% a" F- H1 z" Q, o
document.getElementById("showMUSIC").innerHTML =. Q( G9 F z- I2 \% j6 r! q
"<ul>" +! v' p. u5 A. o
"<li>曲目:" +
# m& p5 S. O& o7 E6 m( G1 `1 w) I x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
9 P3 N( g) }) D, A1 { `, Q3 E6 J "<li>艺术家:" +* T- N- h- M# w3 b/ a! e
x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
* V6 l! {* ^$ {0 Z. o "<li>专辑:" +. q. {9 Q4 v6 G O; L( S) y
x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +( e* ]" |( Z2 A5 h& d/ N1 j: X% H4 f
"<li>国家:" +6 j1 y. L0 E: Z9 U. V+ Z
x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +: N8 n. e2 D J9 {$ M& F& [
"<li>公司:" +
6 b S9 M0 q( \) |3 c x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +- h5 ]# X4 ^9 ]
"<li>年份:" +
+ |5 S& C& K. t4 l0 c+ g x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
( H! w* T3 Y) k/ q. c3 ~/ Z "</ul>";+ d5 O3 U! q- S' s
}# f7 T, @+ C3 y3 D: c
" Y/ I0 f! |1 O7 Q
function loadDoc() {' ^. o, {3 a! g1 g8 h
9 d% C2 h; m* Q) ^% s0 U3 \+ g- n* V document.getElementById("demo").innerHTML = table;
+ T0 w# z9 X6 g. e0 M- _' p }
7 Z( X- }" R: u& L7 v% |% M C" m# N! w* s" \ M- O9 `
</script>
# M/ d! p+ A2 l
4 x: k! F) h. g# C2 `! D1 r$ m
& ]8 s) C7 @# c</body>
$ a/ f" u5 N7 h* a5 u' g7 M% u. s& E0 }7 N, N8 A( c
</html>
' {/ Q$ D9 p7 r
& m$ c) E* m4 O4 f. f' l3 t) l4 l- M% b' h
[/mw_shl_code]+ \) h2 H$ j K% O/ {% U; x A
+ e0 Z" t! o8 N- o
* c9 K/ T! b9 o/ g/ I& F
M+ J, f, d) L* A2 K
XML文件8 E' i* A& t; u e% n
( [" o) T5 s) F! M, _2 ~9 W[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>- y" A5 ?4 I# |( c: ]9 E
<CATALOG>
% m7 B6 s, y5 W1 r8 j' x D<TRACK>& r: r) _* o- |" y2 }9 M
<TITLE>再见</TITLE>) }# q5 O7 h- n, t
<ARTIST>邓紫棋</ARTIST>; w- @ h& }; ?5 M' J q
<ALBUM>新的心跳</ALBUM>" x/ w" C4 T7 m9 c+ Q
<COUNTRY>中国</COUNTRY>0 C' c6 d' O$ Y& u" B1 n
<COMPANY>邓紫棋工作室</COMPANY>
) S2 N/ e' V9 `" e<YEAR>2016</YEAR>
: R; j5 A# h# I% j0 l: R</TRACK>
4 G. D0 O, w3 O: W# D
: E9 o5 ^9 A+ D* B<TRACK>
y8 M: T' ]/ A5 h# X \) I<TITLE>All I Ask</TITLE>8 @; T! a; r' u
<ARTIST>Adele</ARTIST>6 r: c/ p5 u6 H# t' E
<ALBUM>25</ALBUM>5 s" W. U# k9 _9 Y% i+ U1 K. {
<COUNTRY>英国</COUNTRY>* U3 C& q0 n) [. u* V! l
<COMPANY>XL Recordings</COMPANY>9 d E4 T% z* q0 f% v2 q8 k6 O
<YEAR>2015</YEAR>/ X; V3 N0 s4 E0 Z7 R& B, E
</TRACK>
; C0 q, [8 V1 G9 r
! X/ O' G9 f4 k<TRACK>1 J2 i l9 ^7 R5 T D- D& T
<TITLE>之乎者也</TITLE>: a. i& p" Y. t( s7 `
<ARTIST>罗大佑</ARTIST>4 q; K8 Q& k. v
<ALBUM>青春舞曲</ALBUM>
' e7 s% L- q% b! j; E<COUNTRY>中国</COUNTRY>
% W4 _# V0 n5 |/ O7 t<COMPANY>滚石唱片</COMPANY>
& I% `, N- a2 f) p( u4 P5 H, t% W<YEAR>1982</YEAR>, D6 g* D; G4 m( e& d6 n
</TRACK>
9 F8 `; ?8 C% T2 y7 V% V
& t4 w* a9 n9 W0 i) O, X<TRACK>
* u- l+ H# \, s& _$ q<TITLE>Never Be Alone</TITLE>4 C% [+ r g2 T( l M; b
<ARTIST>Shawn Mendes</ARTIST>5 V* S% t9 \2 S8 o0 o( \
<ALBUM>Handwritten</ALBUM>/ K3 a& K+ N k" \. H. W( N
<COUNTRY>加拿大</COUNTRY>- M9 |1 F7 e. f$ L9 W: G, @
<COMPANY>环球唱片</COMPANY>% P/ z K( x3 K$ b W1 K" r2 g
<YEAR>2015</YEAR>
) b9 q, s* f4 Q& K' }</TRACK>
$ }* @% V. O v) u, K. y3 O4 {7 n; M+ N4 n
<TRACK>
4 w4 v0 q' f! S7 t# d) x, K<TITLE>慢慢</TITLE>
, l5 ^; V9 w- W5 b8 Z' i4 e# s<ARTIST>张学友</ARTIST>3 w: r9 ?% h: ?. P5 O
<ALBUM>忘记你我做不到</ALBUM>
4 k: g/ U0 E; t/ C- m3 n0 ]+ x- ~<COUNTRY>中国</COUNTRY>0 G0 R5 V- d) x4 W
<COMPANY>环球唱片</COMPANY>
K9 B, v B$ |/ g" r7 C2 w<YEAR>1996</YEAR>8 P& k9 Y7 J2 A5 b) r! j
</TRACK>& E1 _) C: y$ G8 c+ Z
) d" E0 h! v! A& F; B' {) @
<TRACK>
: w+ s. T5 d* [. n<TITLE>Complicated</TITLE>: T( d& J5 D! S' C J9 T. w8 e
<ARTIST>Avril Lavigne</ARTIST>+ L! m" L9 ]6 j5 Q2 N* B
<ALBUM>Let Go</ALBUM>
7 W" {! ?# O& a3 e, X<COUNTRY>加拿大</COUNTRY>
0 f) F- R3 f7 v' h' J0 z+ {<COMPANY>索尼音乐</COMPANY>
9 j R- E$ F# s2 F8 L<YEAR>2002</YEAR>
C9 w P' `3 y& }$ X</TRACK>: ]. o6 P: w& k( s4 F
# H1 V. S8 N8 A: w' G1 ?0 b1 w
<TRACK>
z0 v$ q+ D0 \; Z6 Z0 L<TITLE>三生三世</TITLE>
( j7 z. E% `- @<ARTIST>张杰</ARTIST>
+ g$ A" F( Y) ?2 X<ALBUM>三生三世十里桃花</ALBUM>5 x& S8 ^& i. E. Q( v
<COUNTRY>中国</COUNTRY>
, Y- T1 X- C2 P2 X<COMPANY>仁溪音乐</COMPANY>& Q$ E+ u4 r! S' X1 P6 l
<YEAR>2018</YEAR>
0 K, m% w( Q5 r& Y</TRACK>! q" ?: v& B9 j$ m* C
9 b: Z( f# [6 h<TRACK>
7 i. {7 Y6 E% x; L, b+ H( U<TITLE>Five Hundred Miles</TITLE>
3 k' x" s. _4 }7 `/ J0 z" a<ARTIST>Justin Timberlake</ARTIST>
- w. y2 ^( I6 z& s3 e o<ALBUM>Inside Llewyn Davis</ALBUM>6 Z( Y: O2 {) {6 L, [" i! [
<COUNTRY>美国</COUNTRY>
& O' U2 _8 P7 L3 |' X/ v: p7 J<COMPANY>华纳唱片</COMPANY>& n' S, B/ K d3 d! j
<YEAR>2013</YEAR>
2 s4 U/ n( r s4 A: o& |$ |</TRACK>
+ x* }# s; z# G+ }5 c! F2 `1 t! m* E- v/ T: T
<TRACK>0 {' E) `- m! z. T) b* r; A
<TITLE>演员</TITLE>
5 c }. F9 \ |8 ~8 d( [4 _+ t8 Z<ARTIST>薛之谦</ARTIST>- s0 l% p) f( o$ y
<ALBUM>绅士</ALBUM>
8 ~* X" {! R& ?1 p<COUNTRY>中国</COUNTRY>
6 c4 i+ t& n9 ^. w8 u4 ?' L: y<COMPANY>海蝶音乐</COMPANY>1 @. g0 |% @# L- T$ p6 c5 D
<YEAR>2016</YEAR>1 A. V/ T/ i3 U1 P
</TRACK>
$ z) |8 ?. T0 ]' `4 X# n
; e" h8 j/ @! `0 n+ C4 [<TRACK>
8 t+ M9 ^% ^' K: N<TITLE>Numb</TITLE>
0 h V ^3 r2 P' o% A0 ~5 q<ARTIST>Linkin Park</ARTIST>
: \7 D, H W: }8 V5 q- X1 {6 X+ U! s<ALBUM>Meteora</ALBUM>8 C' _0 K4 L- B
<COUNTRY>美国</COUNTRY>
3 A) v" S2 H9 w<COMPANY>华纳唱片</COMPANY>, F9 d; h. L/ c
<YEAR>2003</YEAR>% C v. }" C: x4 ~! ?
</TRACK>
% P) A+ I! }, s- `7 k) e
8 d f% y& Z+ M, o) y8 H) X F<TRACK>
* Z) n) I( k8 M6 I! {: f& j/ o<TITLE>给未来的自己</TITLE>
! V& W' ?7 b, S# g( S5 I; g<ARTIST>梁静茹</ARTIST>& k( `- e8 v7 W. Y m
<ALBUM>崇拜</ALBUM>
2 _/ E& h3 h6 j) ?7 n+ Q2 ~. y3 x<COUNTRY>马来西亚</COUNTRY>! `: [* l- ~0 R# j9 V: r
<COMPANY>相信音乐</COMPANY>" i( K' g$ E% N; i: T( S
<YEAR>2007</YEAR>. r4 o0 v) a. ]
</TRACK>
2 e- e/ W1 p& ~6 }& s0 j, i/ [9 j: x5 @- t$ @
<TRACK>2 O; @9 F9 o/ [% J4 R( @3 l
<TITLE>The Monster</TITLE>
6 _+ c! H5 v8 S0 z& g; N<ARTIST>Rihanna</ARTIST>) o2 A) I0 i- s5 S
<ALBUM>The Marshall Mathers LP2</ALBUM>) [. `% T K" T& E9 s
<COUNTRY>巴巴多斯</COUNTRY>$ i$ w7 K5 m- C- V' K
<COMPANY>环球唱片</COMPANY>
9 ~9 o1 @# D1 ~<YEAR>2013</YEAR>5 q, V5 R, L# @5 v0 A0 D u
</TRACK>/ U* V u* S9 a0 p3 Q4 ~
$ F, _6 g% ]( O- T. j/ g5 b<TRACK>
* s5 `9 s8 x; z+ a0 ?, q7 k<TITLE>我终于失去了你</TITLE>
9 _$ t9 X+ K3 }' F$ O# o<ARTIST>赵传</ARTIST>, ^3 {" R) g/ T
<ALBUM>我终于失去了你</ALBUM>
' q3 }+ U" p- J6 W" u1 H5 b" V9 ]<COUNTRY>中国</COUNTRY>- J# z3 v& _* X7 b0 ~7 A
<COMPANY>滚石唱片</COMPANY>
6 b7 J+ _. d6 B" A! i- R9 d3 g<YEAR>1989</YEAR>
8 k$ }+ A. p/ J& B& i</TRACK>
- G; {. [3 b. i7 M! w" D* T3 a/ L' x6 b* E+ \$ B$ t* h9 O( B8 N
<TRACK>3 C! L- v S6 s+ i- _
<TITLE>Main Titles</TITLE>
0 l8 W" @9 }) I8 w<ARTIST>Ramin Djawadi</ARTIST>
, l, P% e+ F1 }6 e<ALBUM>Game of Thrones</ALBUM>
7 Q, e" Z+ g1 N. Y<COUNTRY>德国</COUNTRY>; N0 g; r) U d! ]' [/ r7 y
<COMPANY>索尼音乐</COMPANY>
& t4 B9 w" y+ @; I$ X<YEAR>2011</YEAR>4 `: r0 a+ m+ I
</TRACK>- Y1 M$ Y1 S2 z8 {6 V1 u
& w6 P X# K' o' g
<TRACK>
" z# `+ Y D& m# z9 S<TITLE>传奇</TITLE>
; f: D' y0 N- u. X, ^( P<ARTIST>李健</ARTIST>& k" N8 ^- P3 w' |
<ALBUM>似水流年</ALBUM>" N# G4 L8 M7 V
<COUNTRY>中国</COUNTRY>( @8 N) N4 C) Y, `) |8 u
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
' J# Q- N# D3 n0 r" e! v% a<YEAR>2003</YEAR>8 a1 n6 |# o4 r% r% T
</TRACK>
7 J0 X8 Y5 ~9 x; W, ` b4 ^$ ~/ y% y7 M5 `
<TRACK>2 m Z. G1 n; O; r: J
<TITLE>完美生活</TITLE>
& E* }- w4 `$ J; S& I3 ]5 k% T4 a5 l<ARTIST>许巍</ARTIST>$ Z/ T5 Y) w V9 i; \
<ALBUM>时光漫步</ALBUM>7 h! Z# W3 c v; q9 C- F1 A. O
<COUNTRY>中国</COUNTRY>) z N( J8 e5 V# U. u" p
<COMPANY>金牌大风</COMPANY># G, E) q% a0 L% |! o2 P0 O
<YEAR>2002</YEAR>
0 f9 V, _& R- }) I2 o, o</TRACK>; N' p, e4 d3 ~$ h
</CATALOG>[/mw_shl_code]4 `0 l# [0 ?7 x7 |; k: T$ {# e, c' ~7 p
|
|