|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
×
1 ^- u+ F- i+ y, g
/ _0 D3 Z# S$ j
/ k+ k$ f* d1 C& M" e[mw_shl_code=html,true]$ t; M* r5 c; B
# l5 s: {/ @$ B3 y+ n- K- z! |<!DOCTYPE html>
& O; {( O7 B: o2 u& I$ }5 B<html>8 I" c& `+ Q; _; _) w* c
<header>
' D2 @" }" y* B <style>
, }( k' U5 c0 N [" A; ~ table,' h- k c6 U$ Y( u( Z$ r: `
tr,% i. N) `% B) G6 \
th,% P% v& o, g( I4 e
td {5 p; F: B m6 T
border: 2px solid rgb(20, 59, 230);+ o7 B, G( U0 F( p; I
border-collapse: collapse;
7 R2 j/ I0 ~1 j text-align: center;2 O5 U* X/ q" `4 F9 c
}
6 r0 B. F( Z$ U) Z( j3 Q
0 P% |" |( E6 I/ C5 w4 }# H3 W th,, @6 _- A. [8 N- u; E& [; y
td {, ?$ m. h2 U$ X9 b+ |% Y
padding: 5px;
+ n) Y# ~0 p; D) ?/ y! f. ^) x& B }, u. |% I# k$ |8 j' J% q; v9 y* m
</style>0 |' K% q% p# q) \) `' Z4 C
</header>: C( F! y- F" Y7 r
- D, D4 w: q) s" z+ c2 g2 P, V2 m5 p<body>& N: G2 Z: E, T
<h1>xml http request object</h1>. l8 x# D. v2 d r( g
<button type="button">Display Music</button>
" E" n4 D; ^% ]1 d5 k <button type="button">Previous</button> N5 n9 E8 a5 d' a1 `4 K
<button type="button">Next</button>: m" \& O5 i7 i. z
<button type="button">get my music list</button>
* e: h) h c0 S, V* ^ <table id="showMUSIC"></table>3 \$ l7 S4 H: [& d/ P) t6 |
<table id="demo"></table>
( x$ V# v/ ~8 B% b$ y$ T q <script>
( m4 I& B% p+ R4 \' L
! h! a% s# n" V& r var x, xmlhttp, xmlDoc;! ~' d5 d' G9 ]; z
4 t5 J* G1 A. o; E! P% { xmlhttp = new XMLHttpRequest();+ h( z7 `& ^$ r/ b( C7 {/ q
xmlhttp.open("GET", "/files/music_list.xml", false);' L& P$ o5 V* N S) z
xmlhttp.send(); T1 H# Z7 |/ F/ C
! x( M/ y3 _) f$ w
xmlDoc = xmlhttp.responseXML; * n6 q7 { v. D$ o S+ i5 T
var table = "<tr> <th>Owner</th> <th>User</th></tr>"
# c. x& i5 l q$ T: D" A7 z U var content = document.getElementById('demo'); a! m! z! t% P1 o1 [0 _
var x = xmlDoc.getElementsByTagName('TRACK');3 A; S% X! {3 \4 w0 q# o% ?; y
for (i = 0; i <x.length; i++) { ( [; i5 |7 P( A# e [+ ~$ |! V
table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
7 Z# J0 A1 L1 R! [0 n8 K$ P9 x table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;7 p! i7 K& C% E2 f
table += "</td><td>";
' b, m( }- U' R- L table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;' u3 z- G e6 L8 r4 [7 t; _; u; a
table += "</td></tr>";$ f5 y! M. j! i
}' j7 G' D% K+ a) U% q- q* v" b
( \0 d7 ~+ r2 x) M8 O2 x
document.getElementById("demo").innerHTML = table;; \8 G7 O& V+ P" d* |
var i = 0;
. `- W+ [- j c) N: ~+ b$ \ function next() {
9 U! A7 N" R$ U: }- o: i // 显示下一首歌曲，除非已到达最后一首6 h' c3 Z3 P+ P% B/ e
if (i < x.length - 1) {4 c9 }+ a7 Y1 M& {6 w- E p
i++;, D- O) ?3 ~# c% M0 @# Y- h3 \, W( E
displayMUSIC(i);
4 r0 S* c6 D8 l4 {$ i1 C8 k8 _ }3 O) G: w. H: @" B$ U$ K
} Z/ T' J% U/ ]' k, z
# a7 z* h' x2 H8 C# y) b
function previous() {2 o' l7 e! q% L" l7 R/ U( B9 \
// 显示上一首歌曲，除非已到达第一首
& F3 G/ ~* k+ u) T" u. _ if (i > 0) {
7 X$ X3 S! ^: M/ ]" q# s6 V i--;
! ^% e3 B C& h6 z% L displayMUSIC(i);7 z3 q a9 C# _# f ^
}
# g/ U+ t7 R3 s4 p: I9 _" q5 q& l }
0 L, ]9 }5 ~3 i5 t7 X8 Z; p
- b* ^4 d9 l& e function displayMUSIC(i) {
' \4 N- ^3 z! A q/ u, z document.getElementById("showMUSIC").innerHTML =
7 P. C- q% @# f4 q! L% U "<ul>" +6 f$ R4 n3 |: C6 O. K
"<li>曲目：" +' o7 B1 L# t- l+ v% N/ q
x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
$ f% w" Z% ?1 [' M$ f: c$ B! | "<li>艺术家：" +3 O- U6 \- Y; S7 L" G
x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +. E7 j9 R3 w4 v9 q) m
"<li>专辑：" +2 O/ ^: @6 d }2 T4 s+ Y$ Z* U2 ]
x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
' z1 p- j1 X4 M! }* j6 b1 a) z+ C "<li>国家：" +% J! _* Q( U8 \/ n5 a" T5 i
x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
0 H/ g- Z! B* U; y4 C; a3 m "<li>公司：" ++ `! `" f* J% C6 ^/ I
x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
0 N" m& ]! R/ A. G! v "<li>年份：" +) E/ x6 T2 e: a9 Y( F- b" x" A
x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +4 v4 W, ]. s1 ~& S
"</ul>";
}0 O. E1 Q9 w* k3 v2 V5 V }
! H9 W. W& l, o: r5 Q# Q& P2 y( \4 O$ ~ \
function loadDoc() {, a G, q8 \* E/ R
) g% d. ~6 F9 C document.getElementById("demo").innerHTML = table;
, r, H: D( N4 f2 r6 H. j& V5 B }
2 E% B2 B7 O( D+ {& G, D6 m
1 Q; G- f, R I: s </script> ~7 |2 n4 o3 \6 o! h7 o3 |
; Z0 Q; W$ Z" i9 a8 @4 j, I" A" {. T! a2 {9 L+ w
</body>, D! K8 y# J8 p3 |
1 t b" A( x% a- R+ A; ?, ? i
</html>
8 M g2 _6 v4 p" e! u- F7 @: G# _/ E. d) t3 K' j
+ L: q% }# v! B, a( R" k[/mw_shl_code]
$ X% y9 `4 w' Y$ a0 k* [* g2 M1 G! |/ A+ Y. |3 c" j
9 w- a* }# t. [, v
$ h1 c6 a/ Y! R: |5 q
XML文件3 p& z" [, J/ i! z; m
, R3 x& r! y/ M6 p8 P
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>6 W ^6 O$ k. W& p, r9 \
<CATALOG>8 ^3 z4 t& ?: t3 T# j0 n
<TRACK>
; \+ ?& y% o% _/ Y3 l<TITLE>再见</TITLE>; w7 @) I, ]- W+ k) c! h* i
<ARTIST>邓紫棋</ARTIST>
/ b2 S; C2 W9 N2 L( Q<ALBUM>新的心跳</ALBUM>1 D5 I* d, J' P3 W7 r
<COUNTRY>中国</COUNTRY>! W- L& F6 `+ b( a
<COMPANY>邓紫棋工作室</COMPANY>$ Z' T1 O2 B) ?7 m. S
<YEAR>2016</YEAR>
( T9 a7 W0 P4 R! M</TRACK>+ P: s) V. D+ i* t7 ?
0 _4 F2 }3 j* G' R<TRACK> n9 e0 r" k; @" b$ t9 m: x# B
<TITLE>All I Ask</TITLE>
4 E: I+ N% g' M<ARTIST>Adele</ARTIST>
# F4 `* B, n( F<ALBUM>25</ALBUM>+ p- a2 y! Z% h# w* z
<COUNTRY>英国</COUNTRY>
* S' r4 a3 t3 O0 m<COMPANY>XL Recordings</COMPANY>7 b l/ S# @! S
<YEAR>2015</YEAR>; k, s4 j. J/ T
</TRACK>8 g! l- e* X! W; A2 O5 y0 c
- O4 w" _' I, G
<TRACK>0 S& e% Q" T& S
<TITLE>之乎者也</TITLE>, D& D1 V+ s" Y" R2 |- p# f
<ARTIST>罗大佑</ARTIST>
8 `6 }- ?) k$ x( Q6 E* ?<ALBUM>青春舞曲</ALBUM>
6 f W7 g9 C! J/ y, j7 K. X& M<COUNTRY>中国</COUNTRY>
! C3 d- |7 p- r4 d5 M* f<COMPANY>滚石唱片</COMPANY>
~2 m7 ^! }$ I2 y! z5 W<YEAR>1982</YEAR>, {: |( @4 A# b, V
</TRACK>
' _+ ]$ H6 `7 G1 @5 S @% l l1 o6 F
8 A) z& p" ?0 g1 Q7 [0 B<TRACK>
& N/ E0 E+ i* o$ n; |/ M<TITLE>Never Be Alone</TITLE>
, a, U! g3 C' U<ARTIST>Shawn Mendes</ARTIST>/ W4 e. p+ h% A. v3 W$ t
<ALBUM>Handwritten</ALBUM>
/ g/ z! x0 a d. O7 j8 O<COUNTRY>加拿大</COUNTRY>0 M% Y W! k. I# ~" `
<COMPANY>环球唱片</COMPANY>
! E1 X, P, Y$ I: W<YEAR>2015</YEAR>4 P7 H7 n# i6 u1 |
</TRACK>+ i: d! A% ~+ b& a) l( \% O
; u4 y4 r' o: t<TRACK>1 B/ O% r+ j4 v, v) T
<TITLE>慢慢</TITLE>
) i) t0 ?1 ~: n6 T<ARTIST>张学友</ARTIST>; l1 @/ E' u$ L. G( B3 j
<ALBUM>忘记你我做不到</ALBUM> c: E/ R9 U) i/ n, ^7 ]2 s
<COUNTRY>中国</COUNTRY>5 @5 U' W( }: |. @
<COMPANY>环球唱片</COMPANY>
0 y2 m5 `; I" ? I9 y<YEAR>1996</YEAR>
- f$ K3 y0 Z6 P7 S, M# D) m. K</TRACK>
* W. f+ I; P& E( v0 j, _+ ?) x" _1 w: v, r5 }, U3 J" b8 F
<TRACK>
, K t/ @5 d( c$ c& o" Q<TITLE>Complicated</TITLE>9 {* E3 [ F8 Q( G$ E0 |+ {
<ARTIST>Avril Lavigne</ARTIST>
* C3 k! y5 \8 {<ALBUM>Let Go</ALBUM>
' E* f' r$ {; p9 h1 X/ ]<COUNTRY>加拿大</COUNTRY>
- @" S C# L! E0 f' L& L<COMPANY>索尼音乐</COMPANY>; _0 i% r j6 z3 o
<YEAR>2002</YEAR>% {0 R: J! y( o" D D; l/ b- o
</TRACK>
1 R- f5 l ]5 F, b
. K- R6 d t: O3 s/ X4 O<TRACK>
/ [# i$ f0 E, I9 ^6 v8 d1 ~# {+ S+ k4 u<TITLE>三生三世</TITLE>( | X! i! N$ ^7 r7 w$ G9 g$ c
<ARTIST>张杰</ARTIST>* z/ g. g' H0 A. r* y9 R
<ALBUM>三生三世十里桃花</ALBUM>
$ v; d/ {* t) [- _/ _<COUNTRY>中国</COUNTRY>* @7 T2 `+ {; l5 I( R9 O
<COMPANY>仁溪音乐</COMPANY>
+ s @" ^: C ]' ]<YEAR>2018</YEAR>
8 R9 I( v% s5 W& y$ {) C</TRACK>
% ?2 Z6 q; S3 v, y6 o( \2 A
( R& F" n4 L: U! j+ ^<TRACK># S0 z6 l! Y7 P9 U6 H$ J4 l
<TITLE>Five Hundred Miles</TITLE>- Z$ d, l" A8 \- v F/ `
<ARTIST>Justin Timberlake</ARTIST>
: T J8 F z; Z, z* Y<ALBUM>Inside Llewyn Davis</ALBUM>
. \3 D1 O8 v4 G/ d% e% }8 n0 c q<COUNTRY>美国</COUNTRY>; w! A/ N0 j0 p
<COMPANY>华纳唱片</COMPANY>$ C Q, `, o4 U$ A' L
<YEAR>2013</YEAR>
7 _" E+ b# t* Y/ B* ~</TRACK>. f1 m) Y, t* @6 M
1 J3 W) c8 ]5 y9 Y5 L# v) i<TRACK>9 B3 o5 N# v2 Z
<TITLE>演员</TITLE>
3 _$ Q9 I" k+ M$ q" ]' d<ARTIST>薛之谦</ARTIST>7 c* h8 m/ x% g! G" s4 }# Z" [$ L
<ALBUM>绅士</ALBUM>9 D7 g, G( A k) ^# v
<COUNTRY>中国</COUNTRY>
* V0 Y' q" S3 Z$ g7 Z1 L<COMPANY>海蝶音乐</COMPANY>. G- H0 L) \7 s3 ]1 v5 d0 U. W
<YEAR>2016</YEAR>* ]$ C" r( e/ ^9 P& v, t
</TRACK> K. r$ b7 F+ m& k7 q
: b. [1 F5 B; g2 r- v<TRACK>
( Q, y. a0 d/ B4 [9 y# V! l<TITLE>Numb</TITLE>: G0 {/ @7 b: a+ Y ]4 j) n
<ARTIST>Linkin Park</ARTIST>% {0 p; J9 h9 S0 o) ^3 U7 K4 M
<ALBUM>Meteora</ALBUM>) Z8 n- o3 n$ i" C
<COUNTRY>美国</COUNTRY>
* ~- m+ }; n4 }* F- N<COMPANY>华纳唱片</COMPANY>6 o2 I1 e6 C2 t/ b7 W( ?% b
<YEAR>2003</YEAR>4 `5 g: |/ p/ ` T$ G& D
</TRACK>
/ ?# Y% |/ L- M: A% x1 Q# s
! }; ^& @, b+ {# |6 a) V( y<TRACK>9 @! O! d) k7 _0 t
<TITLE>给未来的自己</TITLE>9 I" y+ h D! M, e# }) a
<ARTIST>梁静茹</ARTIST>
! N4 D9 O$ ^2 F, B" ]5 L* ~<ALBUM>崇拜</ALBUM>
& F) J' U0 s2 C6 M<COUNTRY>马来西亚</COUNTRY>* v- Y; N5 I* \* y) `
<COMPANY>相信音乐</COMPANY>. W8 z. v% `) g6 E1 ^6 ~$ s6 b. S
<YEAR>2007</YEAR>( Q; ]0 R% P6 M5 K k
</TRACK>
( _1 T1 t# m0 g4 I& }/ X _+ J! M, @. b5 U7 X
<TRACK>
* ]8 P7 A( f6 `: q) Y1 S* ?<TITLE>The Monster</TITLE>
8 m+ }) C% s* W& T+ M* S! D<ARTIST>Rihanna</ARTIST>
0 }; ]5 ]) t" N<ALBUM>The Marshall Mathers LP2</ALBUM>
! \8 v4 Q8 \, U; f: Z3 v<COUNTRY>巴巴多斯</COUNTRY>. i D( o: \0 T1 K- H5 J) y; P
<COMPANY>环球唱片</COMPANY>
5 A' f+ U0 e2 l! }$ i) ?, I<YEAR>2013</YEAR>
$ m" ^, z3 C& U; D- m</TRACK>
7 D7 r! T. t6 ~! _# v3 t+ Q0 }3 [* C/ K/ F
<TRACK>
! }+ M- h0 s1 v0 P<TITLE>我终于失去了你</TITLE>7 ]$ o' n; Z, s: L
<ARTIST>赵传</ARTIST>
0 ?, i+ }: t6 l, K3 l7 |; M<ALBUM>我终于失去了你</ALBUM>
. S$ O8 o" R4 r<COUNTRY>中国</COUNTRY>& `" k. {1 S9 P2 y/ C; P. j
<COMPANY>滚石唱片</COMPANY>
8 ^2 o. _4 i) R" ^! v# p# ~& ?<YEAR>1989</YEAR>
1 ] i- ^$ t/ j2 ^2 `; @9 }</TRACK>2 c/ ~2 ~, y4 ~* `1 U
1 G. i* }2 Z9 ]3 a; R! g, \<TRACK>
4 P: H% d; ]$ X<TITLE>Main Titles</TITLE>
7 Z) c0 }) B9 Q<ARTIST>Ramin Djawadi</ARTIST>
" ?# t, f% c; d( z5 T6 }<ALBUM>Game of Thrones</ALBUM>
/ C- W* a8 u* x% ~- I<COUNTRY>德国</COUNTRY>
2 A/ L6 E s2 c5 f3 D1 j<COMPANY>索尼音乐</COMPANY>7 q0 K; s* g) t7 [ n
<YEAR>2011</YEAR>- H6 D$ z: M, p
</TRACK>
* h5 K( `2 p: O# r) \: d" x* h9 W" J1 H& ^& r
<TRACK>1 `3 M* Q( q- v! B- g8 z
<TITLE>传奇</TITLE>8 G1 r# p" E) I. k- E6 l. G- z
<ARTIST>李健</ARTIST>: n1 P' v: c5 @6 s
<ALBUM>似水流年</ALBUM>
; {0 v7 W" ?8 ]0 M6 E& Z! Y1 D, W<COUNTRY>中国</COUNTRY>: h2 ^1 ?* `" N
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>& Z' f, J% I; m" ]2 R
<YEAR>2003</YEAR>
- V2 U, o- B9 l4 s) v4 X+ {</TRACK>0 ~# Q+ ^% p9 H# p" I" P" u( `% J
) `- B' s; S" p5 P
<TRACK>" o% F+ |& N& {$ y) f0 o
<TITLE>完美生活</TITLE>
8 G8 V/ r5 ]6 y% _<ARTIST>许巍</ARTIST>
s$ L7 O7 U7 c9 L* a<ALBUM>时光漫步</ALBUM>
% A% U, Z4 Z" L/ z& F<COUNTRY>中国</COUNTRY>
6 H- `% C$ |; o. G/ |0 f' Q: H<COMPANY>金牌大风</COMPANY>
2 n1 H* L: `4 Q) R9 k* V<YEAR>2002</YEAR>, q* Z7 Z9 ?, D, [ x+ N
</TRACK>: o7 @8 F) l$ Z; Z
</CATALOG>[/mw_shl_code]* ^, v( t3 I$ s6 k# ]; |! z$ Q
|
|
发表于 2019-10-29 20:10:50
