|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
4 k$ `( b3 ?- x) O: t
+ {9 _! O- J% F+ d, i4 P4 Z
3 ], g% a) l# G
[mw_shl_code=html,true]
) [# }" o( {6 g, v7 v4 o7 A
# e' `0 o% ^& z( T) `# N<!DOCTYPE html>* B/ v3 q5 s+ O! ~7 z* X" b/ h
<html>, l+ T3 J$ O& O% g8 u
<header>
: M, y0 v" U5 l <style>$ T0 Z9 M6 U4 o% s
table,
, I" W/ k2 ?& Z) Q* O tr,
. ?, L( |# L W4 Z7 E* w' a0 R, R th, W! V7 g& y: V- k- Z P
td {3 I+ s3 o- d, f* J
border: 2px solid rgb(20, 59, 230);6 H) u5 N5 N. c3 m
border-collapse: collapse;
# z2 P. n8 ]& w M4 v. T3 o; { text-align: center;
/ V6 C- A6 v2 g4 \; @% P }) u) @* k# C3 ]& t
3 z/ d$ Y7 ]" x
th,
, O& ^! k7 ^) c3 @ td {1 k) J" K- N6 A5 J8 w! A, U! X
padding: 5px;
- M3 d5 m6 N) n% I3 _ }7 b, f# d8 }) Q5 W5 I, O$ i* o
</style>
# z' @( R, t& \0 {. k</header>
) ]0 E) A/ H9 r* H& g6 T
9 y V7 ~5 P8 m m9 P7 P<body>
" A5 x# g) X/ }+ h <h1>xml http request object</h1>- F9 \" `. U0 `$ I# i# G9 o# F
<button type="button">Display Music</button>. q" A' C( E, |
<button type="button">Previous</button>2 L) H5 r4 ^2 K2 ^0 e( u/ x
<button type="button">Next</button>
. E9 ?0 i4 A/ p <button type="button">get my music list</button>) }- G# F/ o) r
<table id="showMUSIC"></table>- z8 M# `, J7 \# F- M& a) T/ u
<table id="demo"></table>8 c# r1 v/ O- r8 l
<script>
/ G/ P# y# _. Y6 k- j2 }# X7 e8 j; c- O) N5 p6 c1 \+ `5 V
var x, xmlhttp, xmlDoc;% W/ N; o+ D# F4 I! {
$ g0 e# F& w$ l, w' k xmlhttp = new XMLHttpRequest();
0 f5 _9 b' x3 S, Y3 a& W. {. F xmlhttp.open("GET", "/files/music_list.xml", false);
* W6 x; N5 u) R7 `9 Q l* w xmlhttp.send();! M, H0 Q, ]6 d" T; j7 p, \6 b% H
+ W+ L6 ^% e$ e- Y) d! \! l xmlDoc = xmlhttp.responseXML; 4 B; a2 F0 Y5 Z! d$ R' ~; K
var table = "<tr> <th>Owner</th> <th>User</th></tr>"
$ e3 g: s2 q% L) y9 I% W; Y# R var content = document.getElementById('demo');. s: B* C0 B6 }) `
var x = xmlDoc.getElementsByTagName('TRACK');9 k0 i% o/ B/ @4 ]9 D1 j; A; e( M
for (i = 0; i <x.length; i++) {
% h' e% g0 H6 s$ V5 p table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
# T! F% }+ D# Q table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
: x N7 M2 y ]) ~( Z table += "</td><td>";( l ]+ u2 ?. w& A6 o! l6 [
table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;) c7 @' z# R3 n
table += "</td></tr>";, x2 H* F9 S& W" P' }8 ~
}; _% e+ x$ G; \2 K3 {
; @- j, c# E* f0 B% x0 |, w) rdocument.getElementById("demo").innerHTML = table;
% }; \+ B* M) q* m& O( Q6 H% {var i = 0;
6 g5 h/ S; t/ p6 _" r) V2 ? function next() {
( _! w# C( x; g! c& y5 G3 N // 显示下一首歌曲,除非已到达最后一首& A. a$ [9 s2 J7 Q
if (i < x.length - 1) {7 R9 }. j% a: E# g5 U/ M
i++;: W( Q3 N1 V2 W ?8 _
displayMUSIC(i);: ?. u% h$ \* p; ?% o
}8 g. y2 I% l2 [% f! @
}
$ s/ R7 v6 t) P2 K' c
$ ]6 L( D" P) T: f function previous() {$ V9 H }4 q2 K1 w
// 显示上一首歌曲,除非已到达第一首
( X8 s$ J% W: r$ w9 z, e if (i > 0) {, E: ~4 Z( l, m$ l [
i--;) Z* K! q" J! D9 C8 @
displayMUSIC(i);
]; l# x. N7 J* T3 q3 D/ A }: N0 M, C6 u) M
}7 t1 F+ d7 r! ~- F& O
+ U- W( k3 Q3 Q" F Z. V/ N function displayMUSIC(i) {. x+ Q) n: w) `' g
document.getElementById("showMUSIC").innerHTML =; z, H2 ~% B. t2 N5 I- x: p
"<ul>" +* ?- l: P5 o6 r
"<li>曲目:" + R3 T/ Y7 t# s4 m5 r
x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
" c6 b6 ]/ @% j3 W7 d" Q; V5 T! [ "<li>艺术家:" +* o) Z( q) P. D& t0 O0 Q3 I
x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +0 z( @- e$ I" i2 Y: Z: y" K& s% s
"<li>专辑:" +9 k3 j) Y7 R, l$ x7 r! ?% l( Q
x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +) B8 z6 m$ T( K& o6 H
"<li>国家:" +
& w ]8 v9 n% ?4 E8 }& P' p: L: h# P x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +' r7 U5 c6 y5 z
"<li>公司:" +
2 D2 ?) T' ?/ S' P# q/ | x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
, w# M) v( F# m6 b1 o "<li>年份:" +
* P8 ^8 o6 y! s. c0 M) ]' d x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +" j0 A0 ?8 w6 a6 R8 d( z" Z, F
"</ul>";
% Y. R4 H7 B* H; f7 {7 T }- [) e9 J6 |7 }6 l: a, }! I7 k# q
4 k9 y- s1 @$ l, n4 w3 `( I function loadDoc() {
3 x* M4 i1 _; f8 F6 b, A& W2 F4 P. I
document.getElementById("demo").innerHTML = table;( ^7 H5 I1 N. _# x! C
}
- B& t! J2 Y' Y" C8 K6 K) O1 v* j- F6 i2 Z
</script>
) G6 H5 r8 h* V m0 W5 R @
0 j# d0 M2 e- e' Y, F( u1 I3 w- f/ D" f# C) r: \% z
</body>
. R, I6 G" `; h& i9 A' e; a/ [* s5 I, I* [' [
</html>
, s/ R& ?3 p: H# A
# A- C, O A- [6 K: F
* `5 a: Z$ z H[/mw_shl_code]
. i- o% H/ L7 K! Q8 B/ U7 t0 b: e! ^+ T0 w# t, i4 C3 a( {' J
4 k' ~, a: _# Z
5 u" K1 Y) J# y+ e$ g0 @# _XML文件
2 v+ J( @/ @- K5 `& _* {- i$ I8 p
. M, Z7 _' _, u# I: x[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>0 z4 ^* Y! z+ `5 x# Y7 b) P2 L: N
<CATALOG>- ?- x; g! C8 i3 w e
<TRACK>
6 _4 m; Q# @1 y; A3 Q& g3 L<TITLE>再见</TITLE>! m+ o; o' V+ M* T1 p+ c' W' V
<ARTIST>邓紫棋</ARTIST>
- T G% D) m( Q<ALBUM>新的心跳</ALBUM>8 T& H& h( c3 N) M
<COUNTRY>中国</COUNTRY>) |: W' R" ~: z7 U6 \* H
<COMPANY>邓紫棋工作室</COMPANY>
" e- y$ q9 [5 V, N3 y5 J<YEAR>2016</YEAR>. g7 \" t- P' a
</TRACK>5 X7 x* f3 B* J+ l: A
5 |% i( V/ q4 |+ I6 o8 Y& S<TRACK>
4 }$ N) {$ M, M4 m5 q: p. H6 ~<TITLE>All I Ask</TITLE>: g7 ?4 W) I! a" t1 D4 @- v
<ARTIST>Adele</ARTIST>
/ R- z5 g- Y# y% w' W. H<ALBUM>25</ALBUM>
/ Q2 {! I" a9 d; d$ O$ o, R+ I<COUNTRY>英国</COUNTRY>4 W6 n2 z, A4 Q
<COMPANY>XL Recordings</COMPANY>
# P$ H2 @' o2 H<YEAR>2015</YEAR>
& z" t9 Y3 f1 v2 l1 F5 U/ o ?</TRACK>
2 s4 m& a: L Y* T/ S8 {0 }# B" Y2 B' [' R& \" i" N* B, [
<TRACK>
( p) \# o3 @9 Y- O- p<TITLE>之乎者也</TITLE>! h8 [( F/ s8 r) i4 R( z3 D
<ARTIST>罗大佑</ARTIST>
" Q9 C* u% D6 z<ALBUM>青春舞曲</ALBUM>$ { J1 U7 v- C
<COUNTRY>中国</COUNTRY>
: I! p% v9 J3 V \1 e8 ^. W<COMPANY>滚石唱片</COMPANY>
% G) C& T/ i# r# s5 j7 ~0 R3 R<YEAR>1982</YEAR>. F( c @1 a8 F# `. i; @- |
</TRACK>
9 a7 [& ]# ~7 l. D, ^( h2 b9 ~& ~8 J+ V, ?
<TRACK>4 S4 H$ _, x$ }" q0 l7 }5 }
<TITLE>Never Be Alone</TITLE>( _1 O7 n @ e7 W" {, y1 o
<ARTIST>Shawn Mendes</ARTIST>
1 @ Y; {" Y( a1 n C( _<ALBUM>Handwritten</ALBUM>
; F4 c4 v. M3 q: l, i6 c: a$ E<COUNTRY>加拿大</COUNTRY>
: H5 ^+ ?6 E/ Q9 g/ L; g, c<COMPANY>环球唱片</COMPANY>- I6 D& s9 U) J. O. L
<YEAR>2015</YEAR>
! I0 z# ?# C5 q: K& ]5 Y1 i</TRACK>5 o' J7 f" m! d& G- h9 I
3 z8 W; Z8 c1 [; N0 ?<TRACK>
0 m1 u8 M$ u& U! {. X! t<TITLE>慢慢</TITLE>
' q- m; C* b) W; h7 Y+ o: r<ARTIST>张学友</ARTIST>
3 ?* K5 r0 S0 ?<ALBUM>忘记你我做不到</ALBUM>
- R, V* c$ d5 F# `6 Y: I<COUNTRY>中国</COUNTRY>
: V9 C6 a2 r& h<COMPANY>环球唱片</COMPANY>" ?5 ]$ j/ K5 s. h
<YEAR>1996</YEAR>: d) x3 ~* R! Q: {- a
</TRACK>0 I6 J9 E' o$ F% H
z( C. [* E# |% v8 o! h' y<TRACK>
1 ^$ ]2 F4 a1 j! |8 }<TITLE>Complicated</TITLE>( e! H f: S& u( \6 T% x! S% @
<ARTIST>Avril Lavigne</ARTIST>
0 m4 R, n1 o$ \<ALBUM>Let Go</ALBUM>6 z9 f; V- a/ K8 u1 L- R; }
<COUNTRY>加拿大</COUNTRY>/ l4 ?$ P s& D6 U) s1 V
<COMPANY>索尼音乐</COMPANY>
, @* {: e: F' |& E8 v<YEAR>2002</YEAR>
3 D O& }' W; Q</TRACK>+ Z4 r/ b) h0 T% G# ~+ |
% V/ W3 k# w6 Q) V$ R' {$ S; W; O
<TRACK>7 N2 c; K& K0 \4 M- f
<TITLE>三生三世</TITLE>* A' t8 ]& P# y2 u/ x7 e" E, C
<ARTIST>张杰</ARTIST>* m+ [" L0 ?9 D4 D
<ALBUM>三生三世十里桃花</ALBUM>
) w9 ^: g# ~. g5 c; g1 E$ N<COUNTRY>中国</COUNTRY>, y6 S! {% l) m; _; L* T: K2 g8 W3 H
<COMPANY>仁溪音乐</COMPANY>
6 n! ?% l2 C: J ^9 R: D<YEAR>2018</YEAR>' D1 {+ k+ s. {( A
</TRACK>1 S& |0 ^6 q' o! X
& t* S8 e4 x1 r' |; X q3 J% ~# K- s0 H
<TRACK>% N8 M7 x8 ^2 W/ K* }4 U
<TITLE>Five Hundred Miles</TITLE>5 r8 d! \2 J/ Y- F+ p1 |
<ARTIST>Justin Timberlake</ARTIST>
* Q) f5 H8 m+ E0 k8 D$ f; p4 O& O5 n<ALBUM>Inside Llewyn Davis</ALBUM>
& ]: h0 K4 c( [0 z* b/ q<COUNTRY>美国</COUNTRY>
7 f1 U( ]# @7 y6 @ Q8 `5 f<COMPANY>华纳唱片</COMPANY>/ h8 u) K, j/ I( i
<YEAR>2013</YEAR>% a; C8 d- Q: \, L, M
</TRACK>. f/ U$ w. V: t2 |" I: |/ n5 _2 {
3 N$ h9 b% U# @& d$ ^) x
<TRACK>
* t; H9 e( {: n( L4 w% I' j<TITLE>演员</TITLE>
9 H4 M4 F+ ~1 _' I' L<ARTIST>薛之谦</ARTIST>
/ B- q ]) p* ]. o<ALBUM>绅士</ALBUM>' w( E7 T$ F8 _, |% G4 |- D/ S6 k
<COUNTRY>中国</COUNTRY>
- \9 F/ a# { q! w' Z: Q# |7 H- ^<COMPANY>海蝶音乐</COMPANY>" w. F$ w7 N' |5 B
<YEAR>2016</YEAR>7 G: J3 \8 F, o: Q6 H8 ^
</TRACK>
' m1 X+ E; M# G* k' s1 A
# |6 n' ?' s' f<TRACK>) y; S( I6 h: C. p \3 N* E
<TITLE>Numb</TITLE>" z7 I: m9 {, l1 ~1 k0 Q; ^/ ?8 v. q
<ARTIST>Linkin Park</ARTIST>% T! \" t8 f, U Z
<ALBUM>Meteora</ALBUM>9 q( ]: V) k$ v* G4 [" S' q
<COUNTRY>美国</COUNTRY>
' X7 o* ~9 I* O0 H/ k a<COMPANY>华纳唱片</COMPANY>
: u$ b' y3 B/ d$ p<YEAR>2003</YEAR>
) `# g7 K/ S* F: Z; V( c. ]9 M</TRACK>4 f; V; D/ F, Q( c( I
' R) J/ B- D6 B: O1 K2 c
<TRACK>
8 C5 ]+ Z0 G9 n$ A$ D; @<TITLE>给未来的自己</TITLE>
: K* v$ {( b$ S/ n/ A# y# U/ L<ARTIST>梁静茹</ARTIST>
& q+ @, Q" E8 N. `) g( \! _- H9 ~<ALBUM>崇拜</ALBUM>
u& E$ T+ a( W, d4 q# }/ s<COUNTRY>马来西亚</COUNTRY>2 D8 q/ d& l% W$ X
<COMPANY>相信音乐</COMPANY>
/ }( F3 Z; T+ E5 r5 X( `5 ~<YEAR>2007</YEAR>/ {& [' C& P$ P* c# ?& {+ {
</TRACK>+ ]5 R9 M: W Z/ ]* q3 @/ P
* z- V5 n' c7 W$ u
<TRACK>
6 ?! d5 r" b* E- {$ v4 b<TITLE>The Monster</TITLE>0 p E0 x( M1 ^4 s# l+ v4 j
<ARTIST>Rihanna</ARTIST> E: E: \( f. }* F8 e: B
<ALBUM>The Marshall Mathers LP2</ALBUM>
! }% o2 S9 [$ {* h0 s3 d0 Y; ?' @& N<COUNTRY>巴巴多斯</COUNTRY>9 Q& j6 {4 p' v: n1 Z6 y
<COMPANY>环球唱片</COMPANY>+ D; m8 I% E% R* C) m4 c6 y# D
<YEAR>2013</YEAR>2 ^/ e3 ^( B! n# ]0 @/ P7 T7 t
</TRACK>
8 M& d7 D# W1 U' D
5 x# [3 h! Q& [- I5 I6 A<TRACK>6 v) N! {7 r& Q* |: n% _* j1 i" I2 `
<TITLE>我终于失去了你</TITLE>' l5 M3 N6 D4 H1 N- i# q
<ARTIST>赵传</ARTIST>
" f0 k9 N! f1 r. F i+ J: y6 k<ALBUM>我终于失去了你</ALBUM>$ F" Z' G) h& I, t3 O. q" W
<COUNTRY>中国</COUNTRY> X3 d/ i, o4 K t- z- T8 ~
<COMPANY>滚石唱片</COMPANY>
! e$ A- g. \- C. L) Q4 @<YEAR>1989</YEAR>! F; b9 `5 s" s8 S& c! ^ p! h
</TRACK>' m9 P* f& t" O/ q3 Q X2 `9 W8 z0 p
" L% v2 F; C( M5 q% [6 K# H$ b
<TRACK># B3 d7 p+ F. d
<TITLE>Main Titles</TITLE>2 Q, u4 m# k0 p8 Y: K* a. m
<ARTIST>Ramin Djawadi</ARTIST>
& j) ?4 ~3 Q0 v- T<ALBUM>Game of Thrones</ALBUM>
6 S+ Y9 p6 f. f1 F<COUNTRY>德国</COUNTRY>) w3 Z {/ s) B+ R4 a* L8 ^
<COMPANY>索尼音乐</COMPANY>' V6 ^0 B4 o9 n% n# V; s0 e4 a
<YEAR>2011</YEAR>
1 u5 A+ m. G; d+ O, p" \$ w</TRACK>" ~4 ~' e5 ]5 X- N; Y
3 d' W. U p4 w+ r; @8 V. v7 V<TRACK>
8 S: b$ s' h: [7 ^1 d+ Y1 l) {<TITLE>传奇</TITLE>0 Q8 c9 y, N4 n, K4 z
<ARTIST>李健</ARTIST>! r ~6 B% o% Q6 o
<ALBUM>似水流年</ALBUM>
4 t- T+ H* d: U3 n) k2 ?- d: q<COUNTRY>中国</COUNTRY>
! G% {# k4 t3 |+ A4 z4 h9 r<COMPANY>北京完美坚持文化艺术工作室</COMPANY>0 d8 S/ i& R! p. {3 M
<YEAR>2003</YEAR>8 v# q1 g: {, M7 Y3 O
</TRACK>
7 |1 M" x& f4 k& h3 w4 {
8 g* X N' f" Y<TRACK>
/ D$ l' r2 n9 N0 H8 m0 E7 T7 W<TITLE>完美生活</TITLE>
. @- M- |; }4 l% S% O* I<ARTIST>许巍</ARTIST>4 n* h8 b* h1 }2 n& Z( p- w
<ALBUM>时光漫步</ALBUM>/ D, _+ R( ^0 k' b
<COUNTRY>中国</COUNTRY>/ Q7 Y' x& h, I+ ?0 N7 v+ t; s
<COMPANY>金牌大风</COMPANY>
0 q4 I8 x. A7 W9 ]2 w) H<YEAR>2002</YEAR>. ^, q9 ]' j5 K. x: t
</TRACK>
: t3 ~& P1 N, @, D</CATALOG>[/mw_shl_code]$ T: N- \, [! H5 L
|
|