|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
- r: G% U2 P0 ^( D! ?2 X
$ M5 l& P; E6 [9 e
; A$ u7 B) o: D# a- h" d[mw_shl_code=html,true]2 _. o2 D7 {4 l& A7 p4 f3 S
6 k/ N8 s/ t9 u" E% i7 H* K# \
<!DOCTYPE html>5 k4 U* c0 N5 o" S* W6 e, [8 X
<html>* ] F& u$ ~; v* E% _6 c
<header>
, E3 G# a. T" c2 [ <style>
* O- s; r2 \: `( R3 L table,3 P' b- R" b/ W2 j8 b/ o# ~
tr,$ q0 ~4 u7 F+ x" v. M
th,
% B6 v7 ]9 E0 P( u C5 N8 [ td {4 j1 K$ F4 o0 v1 n( }
border: 2px solid rgb(20, 59, 230);- C0 u2 t( y r
border-collapse: collapse;
. r$ d1 \& P4 u4 f2 r l( z text-align: center;- ]* p* B8 z' d' |
}) m7 {7 b {+ H9 w9 o5 G2 `. D, I: t
$ d: Y ]/ `( N) ]* {/ T" a9 N8 R th,
$ b& y/ U3 J) I# r td {
8 d1 _2 W- t6 ? padding: 5px;: v. g) S3 {7 S0 P1 F% [
}8 l6 R. d0 w6 ^) H
</style>+ Q0 F. z6 D) o% C$ U
</header>
* J$ H h6 J1 _+ _- E& [0 K, |! B2 ], q
<body>( c2 U4 ?+ y3 S
<h1>xml http request object</h1>% ]7 h" ~$ s$ c9 W
<button type="button">Display Music</button>
% }$ S. _. ^ m) G, {: }% N <button type="button">Previous</button>4 g9 l; |! Y* |1 v# G% K) v A
<button type="button">Next</button>
4 X: Y- E. a: ` {: h. c( ^$ a( L <button type="button">get my music list</button>
- b2 _ _" k$ O6 O7 [ <table id="showMUSIC"></table>- f% f# V9 x+ `5 o/ v% @: r8 R
<table id="demo"></table> t+ _: M2 t5 V3 H
<script>" x0 k3 O( I7 @$ V) ~. O3 B6 t1 H
. X8 F o. e X" v Z- A" \
var x, xmlhttp, xmlDoc;
6 P/ I5 t; ?. v& x# I . q2 [2 s3 Z+ y- J6 |' u2 q7 `( B
xmlhttp = new XMLHttpRequest();! t/ U$ {! b6 E' X' B* k7 @ @
xmlhttp.open("GET", "/files/music_list.xml", false);
" f9 Z+ R: C1 u6 T0 q xmlhttp.send();, ^7 O( Y5 D) K5 `3 }& ?
: _4 S2 r2 w8 a: { {, C; {
xmlDoc = xmlhttp.responseXML; 6 S) s1 S" p, `: C5 F
var table = "<tr> <th>Owner</th> <th>User</th></tr>"- G1 d- i5 v$ Z6 X6 R; S
var content = document.getElementById('demo');0 ?! v M2 _" V4 |
var x = xmlDoc.getElementsByTagName('TRACK');/ Z/ T7 Y X7 f; ^: u
for (i = 0; i <x.length; i++) {
. P; w7 P; ~( c+ @; x table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
# O; r! E6 ~3 y. @$ w0 o table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;5 i! W: b b A( ~- n; S
table += "</td><td>";
% X" B5 T: I' S4 o3 u8 }6 F" F8 i table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;5 x C8 t# Y) I( e5 `) b4 k
table += "</td></tr>";- n# ?! U- l5 B, l; I
}
9 {# z8 t6 @! n1 @: u6 d% W4 \) [# W2 [9 J3 h- S/ U0 |
document.getElementById("demo").innerHTML = table;8 o; j9 t$ H$ A) S& @/ U
var i = 0;+ H% Y ]1 W/ {+ K9 ^+ S# R
function next() {$ w5 e9 b: s4 b" W
// 显示下一首歌曲,除非已到达最后一首
2 a/ x3 l+ J/ o if (i < x.length - 1) {
% |' f) Q; d( m) T7 y i++;3 X% Q" ^9 l3 c& [, }
displayMUSIC(i);1 b) b- W1 j8 |" k0 Y. |
}
! M: O9 |5 l4 C% X }
& N: A% F3 r6 D- |) K6 S' q5 ?
& m2 O) A0 j( g9 t& ~6 c function previous() {
. \& T% r& J& N/ K/ X7 I' g // 显示上一首歌曲,除非已到达第一首
! c" V" O' R! u: Z if (i > 0) {
' R5 W) ` `% }- n8 M i--;
( D9 H5 R) Z7 c8 c displayMUSIC(i);
' o' B: @# T( W8 A: S6 R }
3 f5 X, P" Q0 X" r& E }* |: c& t1 Q# n4 ~9 u
) {" }/ O1 u5 ^1 _( o/ ]' J function displayMUSIC(i) {
) T% t2 E; a9 H3 I9 k9 x: ^- R6 U4 o document.getElementById("showMUSIC").innerHTML =
3 o: y7 n- R; _4 i: x/ ?8 ~ "<ul>" +3 _. [4 `! Z+ R$ }( P: N7 O2 S
"<li>曲目:" +
* M+ g. K' f+ u# l8 f3 _: o+ m- z x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
0 G' @# _. ]: J5 @- g, B9 J; \: n' [' C "<li>艺术家:" +
, X5 m5 Z ~ a x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +$ [4 ]- |$ o' z4 O- }0 x- U
"<li>专辑:" +& B$ u* H1 p3 r
x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
; l( i5 X. J0 D' H a# [) f+ c6 d# k "<li>国家:" +
) O0 |' D& S: F4 ?0 c0 O x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +7 p) B3 M6 F+ g6 Y9 z
"<li>公司:" +7 y0 ]4 J# E1 ~ r/ Z5 U
x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +* I6 M" V8 ?2 G
"<li>年份:" +8 n( u$ Y+ A0 t# Y5 z2 i" f: e* x
x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" + T1 ~7 U3 |6 @, x3 v1 f
"</ul>";3 F7 ]) Q- p' E& c, T5 E5 @# i& Y. f
}" Z. i( H( C& N$ Y
% c' \$ v" z7 b0 Q$ ?2 Y- I function loadDoc() {
+ v& ?0 H8 o6 w% ]8 Q# ^: m7 L. g+ G6 f1 U5 Y/ h
document.getElementById("demo").innerHTML = table;
6 u# @/ F3 }/ ^5 h- P+ x. ^ }! C+ [) f1 r& H$ ? m+ z/ T
7 ]9 ~# W7 E- ^- h
</script>
/ D% o7 A9 _# c1 u4 n) s+ w7 F+ ?7 D' u
3 z* M4 S3 i$ A. } w, Z: p
</body>! X- K$ a# L# S, k& g" H9 d% T8 j
% t, B5 h; o* `4 e
</html>- ~) j/ y; Z8 r! _9 `
; m7 y. J6 V1 a+ w: l
! M# F! _- D8 q1 Q[/mw_shl_code]6 s- j; s; Z4 @1 g# W: o
; G% y' j: t5 a9 s% J
* h9 }+ K; D C: b' d
R1 A- i) t [9 k1 I+ uXML文件
! p. z! X+ e3 Q
: j, Q6 \; K4 @& M/ J3 N; D! ~[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>+ J% m/ w' x) [) b y& K6 F
<CATALOG>
+ n& `" b, J* n; M<TRACK>( p4 j6 [* e. ]9 G
<TITLE>再见</TITLE>
: }2 T) H% q4 }' Z* h: r3 [" [1 v<ARTIST>邓紫棋</ARTIST>" R( |6 b1 t- q0 b) t7 [2 h
<ALBUM>新的心跳</ALBUM>
5 B# s1 u' {# @* ^0 m<COUNTRY>中国</COUNTRY>5 r. Y1 ]9 C2 T4 @, b
<COMPANY>邓紫棋工作室</COMPANY>+ c: H! n/ h8 B8 A. C `
<YEAR>2016</YEAR>
; `0 g1 q8 O3 f: z' J) D, F; d</TRACK>
x, r9 @# W) S B; {' m& P: I, e8 z8 w/ \; H
<TRACK>
* Y2 z# Q$ F1 \3 |4 y/ A( s, @<TITLE>All I Ask</TITLE>
0 B0 Z( h- H7 U$ F9 j; d, t, o<ARTIST>Adele</ARTIST>% {7 F( [8 W2 J
<ALBUM>25</ALBUM>
0 O7 F* }- B/ Q* O: y0 y<COUNTRY>英国</COUNTRY>5 e. ^1 `0 e) U2 m7 O7 L" x7 A3 E
<COMPANY>XL Recordings</COMPANY>2 D4 f8 o; s. V2 M& w- K/ ^, H
<YEAR>2015</YEAR>
" m% e% K1 G' P% f0 o; v</TRACK>
: o$ j6 {2 G- D' z2 Y. a! z1 v: ]2 X! S1 {7 ~! o l" s0 o g
<TRACK>5 d8 {5 ^* D* f, J1 P3 n2 ~
<TITLE>之乎者也</TITLE>& W% _7 s$ M: w9 Z" Q
<ARTIST>罗大佑</ARTIST>9 l3 n- I4 a. s% S+ ?
<ALBUM>青春舞曲</ALBUM>7 N6 S& r6 U% O0 G7 h
<COUNTRY>中国</COUNTRY>" z/ Y0 I3 A& B, G6 n2 F- a1 Z& W" y
<COMPANY>滚石唱片</COMPANY>) A$ N2 o& ^4 |& @( Q5 v6 I
<YEAR>1982</YEAR>" ]' O: A4 _8 F# r7 a5 U. r6 Z
</TRACK>
, v3 @7 u/ W& O5 L0 T8 c' p! I7 p% j3 i: M- `- N. X
<TRACK>: d+ [& b! C3 s& M7 ^4 L# c# g2 f
<TITLE>Never Be Alone</TITLE>2 l2 ]- Y5 t/ q; p. N4 e
<ARTIST>Shawn Mendes</ARTIST>5 S* e8 t J0 G7 N2 l, [
<ALBUM>Handwritten</ALBUM>- ~$ u8 c; N/ I, l4 H, b% |
<COUNTRY>加拿大</COUNTRY>% \# j# M: D# }3 x# x9 j' s& X3 ^
<COMPANY>环球唱片</COMPANY>
# E8 x7 I+ O# ~<YEAR>2015</YEAR>
& \) T L6 e* W</TRACK>9 X5 n; a! P. {& A+ d+ a5 i5 x& r
; c0 ~& k/ }. X+ T* N T<TRACK># O0 y- c& F' q0 r2 D# O
<TITLE>慢慢</TITLE>2 u' m; O4 t' Y" Z" t" q
<ARTIST>张学友</ARTIST>
* f+ G" P- f6 ^: {( o- J, s$ o<ALBUM>忘记你我做不到</ALBUM>2 r, v3 [' p# `; e. b+ `0 V
<COUNTRY>中国</COUNTRY>
. G; L; T Y" [; R" {/ o7 X. X' G; Q<COMPANY>环球唱片</COMPANY>
8 E: I% u( l. a8 {5 q: p7 Q<YEAR>1996</YEAR>
& A! c, b o- \3 x</TRACK>
6 L1 i/ q3 S/ z d# X& p5 A- H# V4 ~2 `2 s, g$ k& L2 T
<TRACK>* T# t: u a9 @" |: F2 D7 e: m
<TITLE>Complicated</TITLE>1 q: A9 D7 {& W5 a
<ARTIST>Avril Lavigne</ARTIST>9 u4 G; _( L3 L! J8 T
<ALBUM>Let Go</ALBUM>; a7 T% F3 Q @2 k
<COUNTRY>加拿大</COUNTRY>9 b( x+ i, }5 Z6 J U6 `
<COMPANY>索尼音乐</COMPANY>% c8 Z4 j' i) t1 ?. ~- E. q* @
<YEAR>2002</YEAR>
) j2 l6 E' h% ]7 M0 X( {0 w. r</TRACK>% M4 p5 z' I9 Q/ e% u
6 M. y1 {6 A; ^3 P F7 P7 ?
<TRACK>
4 E/ F5 Y- |6 z) z7 Q9 ?6 W<TITLE>三生三世</TITLE>+ a- J- L! _: Y. Q6 a- j
<ARTIST>张杰</ARTIST>
. r0 e/ d7 s. d# V8 }3 S<ALBUM>三生三世十里桃花</ALBUM>
% t6 d5 _) q* T9 M<COUNTRY>中国</COUNTRY>
! f" E( J- w; z' X2 v$ ?/ ^( u<COMPANY>仁溪音乐</COMPANY>
- p; H$ ]7 K+ k- d9 P2 C$ o% @<YEAR>2018</YEAR>
! u2 }( i8 Z( o1 ?</TRACK>
5 C6 y8 Q, ` r& w# f- H9 E/ `# w$ o+ h: Q: U" y \4 y, Q! V
<TRACK> ^7 ?* }) \$ I2 _2 j2 `% y
<TITLE>Five Hundred Miles</TITLE>5 S0 l- ^" h0 n, n: @# w6 m
<ARTIST>Justin Timberlake</ARTIST>( [$ F8 o$ q0 }7 O0 Z% G/ U9 V8 X
<ALBUM>Inside Llewyn Davis</ALBUM>2 c+ m2 l; v @. Z }4 w
<COUNTRY>美国</COUNTRY># v, A& \ r/ Q( `
<COMPANY>华纳唱片</COMPANY># |' @3 q: L6 p$ ]! ^: ?0 G1 f
<YEAR>2013</YEAR>0 |6 o( M7 m- e/ u$ Y
</TRACK>
6 p2 r# T3 p* G, h W/ Z, f0 w5 Z/ b% S' _4 ^) E
<TRACK>& R ?# g+ O& s( `6 Q0 |7 J6 K6 h
<TITLE>演员</TITLE>7 W( z, h! @: X/ A
<ARTIST>薛之谦</ARTIST>8 G: |- h' E2 P- i
<ALBUM>绅士</ALBUM>
4 G( c9 `5 Z+ w<COUNTRY>中国</COUNTRY>3 m1 d, m; G! J N" i" R% x+ V; v
<COMPANY>海蝶音乐</COMPANY>
. X) w. R) R9 q) o+ t<YEAR>2016</YEAR>
1 s" U, a% { S0 \2 n2 \: l- {2 l</TRACK># Y) t; t$ g+ _" }
1 Z/ W) d- z0 M, l
<TRACK># a5 h& u8 X$ V) h' A
<TITLE>Numb</TITLE> N* W8 A! f, ~8 {: j7 _* _8 n$ ?' M
<ARTIST>Linkin Park</ARTIST> \. [1 h5 |, O
<ALBUM>Meteora</ALBUM>
1 w' ~7 H$ f3 W- M2 c6 K<COUNTRY>美国</COUNTRY>% x! W# f0 |1 ~( u3 x1 j
<COMPANY>华纳唱片</COMPANY>: N# R, [0 W) K
<YEAR>2003</YEAR>
5 ]+ C* m+ m2 N</TRACK>5 C5 W! p$ |! r# f: H
% T% N8 \0 N8 k& h' u- J% W
<TRACK>4 b/ U* z l& w. R$ s8 b9 s
<TITLE>给未来的自己</TITLE>
4 `0 }) N; N4 V F# A$ ?<ARTIST>梁静茹</ARTIST>$ ^# w# z* l3 C$ k8 P% a
<ALBUM>崇拜</ALBUM>! B( @2 J6 y0 z8 U+ U; Z n
<COUNTRY>马来西亚</COUNTRY>
+ I0 K/ P/ k8 h* D1 k: Y<COMPANY>相信音乐</COMPANY>
; g( u% g* `, R* @4 n- `! [# K<YEAR>2007</YEAR>
5 A$ M5 ~8 R& p% n</TRACK>; x# W0 S; ?+ L& X3 |
9 c2 C2 A* u2 P7 J7 D
<TRACK>$ u' o( j2 o2 q: w$ b$ W P
<TITLE>The Monster</TITLE>6 f6 s8 h. A% T# d( a! i
<ARTIST>Rihanna</ARTIST>
Z8 z) K& ~( p<ALBUM>The Marshall Mathers LP2</ALBUM>
" ~& J. f# Q" A( z<COUNTRY>巴巴多斯</COUNTRY>& G- {% K/ G8 D/ b
<COMPANY>环球唱片</COMPANY>
$ @) [3 _1 p- L4 d& Q: g<YEAR>2013</YEAR>& |/ A9 Z: m( c: j4 [! n4 ~# e$ ]
</TRACK>
* X# A- h' J" N# h$ y {) S4 U% n) ]! M6 s: z3 K
<TRACK>
. B7 t- s$ D- x; e% h' V<TITLE>我终于失去了你</TITLE>
N- c3 M! A% u) B+ {- q. V<ARTIST>赵传</ARTIST>
& T$ Y+ p- O, z; j, W+ t<ALBUM>我终于失去了你</ALBUM>
4 b' O# o0 V2 r0 i, y7 ~& p<COUNTRY>中国</COUNTRY>" C+ i5 Z7 }5 }3 P# `5 N1 Y
<COMPANY>滚石唱片</COMPANY>3 d& e# k$ G; C6 O5 o
<YEAR>1989</YEAR>
, \9 X" X7 q! n% i' l: d l7 _$ J</TRACK>! F8 `9 r- v& u6 t
2 h8 I$ B2 T W i7 Q0 u
<TRACK>
& _- X+ E6 K: _<TITLE>Main Titles</TITLE>, ]! n6 U8 C1 ]
<ARTIST>Ramin Djawadi</ARTIST>
) Y9 x! @( z3 M6 D9 b6 t<ALBUM>Game of Thrones</ALBUM>6 G( p$ K- i0 E7 z# q5 s
<COUNTRY>德国</COUNTRY>
+ b2 J* n, p2 S j' F y2 }. N* j<COMPANY>索尼音乐</COMPANY>: C! h L( b0 _, r) ^. q$ H
<YEAR>2011</YEAR>
) u3 e' B1 T' l' Y8 }" Q R! L$ v; I</TRACK>
7 w l0 j% L# m4 V
6 R3 O% U+ Z- G9 V" E- b( G) P" i. x<TRACK>
' {- I0 a7 K; F6 H6 p: H<TITLE>传奇</TITLE>- ^# V" _0 o% k* C" H2 x3 J8 L
<ARTIST>李健</ARTIST>& w8 b9 ]: B; [$ y3 @6 u% a
<ALBUM>似水流年</ALBUM>
) @9 F5 D; U+ T( N/ d1 l<COUNTRY>中国</COUNTRY>% p# Q5 d& ]1 M: F( N
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>. h4 w& Z* o7 F) C* Q* w6 l
<YEAR>2003</YEAR>
, L- U0 d$ j* N( `% ~' J</TRACK>
& h1 |/ D1 ~7 [4 k! Q" m0 ?+ R( Y& H9 K% A
<TRACK>8 o. M9 I/ s) w" `4 N" G* o
<TITLE>完美生活</TITLE>
, ^, [! R) L$ K; l: c<ARTIST>许巍</ARTIST>
$ O0 c7 X7 s4 M4 O6 k; Q8 W& ?<ALBUM>时光漫步</ALBUM>
+ P# |! U- v6 c6 X! G- _: R<COUNTRY>中国</COUNTRY>
) R- S- f) d" m R& Q: B7 V<COMPANY>金牌大风</COMPANY>
* y$ B, t' A L- j; C<YEAR>2002</YEAR>
" V5 ~0 T! k0 Y9 |</TRACK>
0 r( D2 g0 F1 _" q- V4 F p# j</CATALOG>[/mw_shl_code]
& \. k) y' B2 ]" P: _! T" a+ f, i |
|