|
|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
4 l3 p" D( Y/ c9 x( {
/ O8 s5 ^/ J, r% [! n2 R0 H+ [6 I6 q4 w' j. }1 y" H: L
[mw_shl_code=html,true]
# c3 h/ [+ w' a+ _! ?
% x& @% n9 Y7 l* Z6 w<!DOCTYPE html>
) D8 Y# v+ f- s# `4 @1 r- R<html>6 `* B# b+ g. @! y9 e
<header>& p0 z2 B$ K, \. z
<style>, K3 |. h4 Y" P" ]$ e; l7 |& r: \. q
table,, n: u$ Y$ H) ~! ]0 T! f3 O/ X
tr,
# C! U4 F5 O1 t9 z1 r0 k8 }& O th,
) B' Y* N, o n td {
" F2 g* ]5 M5 \2 w# D5 C/ r border: 2px solid rgb(20, 59, 230);
1 v: m+ R, `/ p* v border-collapse: collapse;
* ?! M7 i% V# O1 ~2 M, V, {+ S; v text-align: center;
c1 X; P, {' V' U3 Y3 N; p' o }
1 t* {! M) Q5 Q; P/ \ @
P& e( k5 J+ Q7 z6 U& I th,
; s) g: l: Q: w, [( @4 b td {
9 U: c& x. _) H5 ~ padding: 5px;
% o3 U% b8 L- k6 t, P0 F }
# e! w0 B. g( F0 u2 a1 p3 T </style>
/ i! A+ j) n% T1 D</header>- ]. p0 k" n U1 _' C8 l
9 J2 W2 ^: w3 n; F" i+ @! F* C# ?<body>( j0 g4 L+ c' {3 V9 w* G1 e
<h1>xml http request object</h1>; b+ D9 Q5 Q t0 t# {
<button type="button">Display Music</button>
* H4 X% H0 b- [; R <button type="button">Previous</button>- |6 B& s, g# O3 s4 `# _# \
<button type="button">Next</button>4 J o# F$ @. R8 s3 s0 h
<button type="button">get my music list</button>5 E1 p& B8 v; ] Q8 `
<table id="showMUSIC"></table>
- R& I4 |+ Y; B" _& `* M8 J+ ?9 X" H! |4 d <table id="demo"></table>+ a) F: n+ R: Q3 ]
<script>. {+ ^8 r& ~# k3 M- u y
' B9 F% @% F$ d& m: H5 k var x, xmlhttp, xmlDoc;
$ H- e0 x( V6 V 1 O" d; m) F {+ G: d7 R
xmlhttp = new XMLHttpRequest();
. H+ s1 _' K6 n; m+ u" b9 [ xmlhttp.open("GET", "/files/music_list.xml", false);
|4 D$ L2 l) I; M, f8 I9 H4 q1 g7 C xmlhttp.send();. }5 \( J6 x5 u7 G: H
8 b) J5 G3 ?1 z9 a2 K. i1 Z* `( B
xmlDoc = xmlhttp.responseXML; $ e1 b( Z$ U4 w) i" M( q
var table = "<tr> <th>Owner</th> <th>User</th></tr>"1 o/ Q& I% u6 ?+ W
var content = document.getElementById('demo');
! W0 S( f5 X+ Z4 N& H2 t var x = xmlDoc.getElementsByTagName('TRACK');8 ?% o& H5 k3 U: f; U; p3 z% g
for (i = 0; i <x.length; i++) {
# ~- g2 @6 K2 W- c9 g' t& u8 s. \& L table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
* K. K2 c/ ? s d, L table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
- Q( a( L6 I& A* u+ ~- K table += "</td><td>";
?3 W# n* l3 a table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
& u$ @/ T% b. \+ N table += "</td></tr>";2 M; P& ~4 M6 i; x8 A1 b3 ~7 `
}
5 |' H" n9 w* ?4 h- j+ l& _; J" k6 c/ U) d; C, @
document.getElementById("demo").innerHTML = table;
3 B/ J( x) _% ^" k. m0 r, ~var i = 0;
% x' }8 U6 I+ z) c9 l6 ~2 L2 c+ L function next() {
- t) @/ y# }) G // 显示下一首歌曲,除非已到达最后一首1 X8 E" ?% X. M" z# c
if (i < x.length - 1) {
, _% t3 _+ U! ~ i++;
" s( M: I# t9 D V" p displayMUSIC(i);
* n) U5 M% p* @) H, U% i }: A1 o8 ~' F8 o( K5 g3 @3 G
}- d3 Q- h# t: M, j- f
) _% o. ]* d9 T4 Z# H$ A, V
function previous() {2 u6 C* L8 e0 E$ I2 s( x
// 显示上一首歌曲,除非已到达第一首
; z, c& T- T/ T, S3 S0 J6 H if (i > 0) {9 U+ F: p9 k/ `
i--;
" J7 V1 V# c" O8 B, y% K7 g& { displayMUSIC(i);
/ Y m( A. E& q2 P$ F u; p/ \2 [ }4 e" e% h) @: M0 S
}
7 }" P. `& L V0 r, @8 `% N! m& D: J5 x* \, S) ?
function displayMUSIC(i) {& o+ |5 s9 g2 l4 @7 v
document.getElementById("showMUSIC").innerHTML =! E) G* o' [6 G! ?! F4 r
"<ul>" +0 p! A) q5 b2 X: f% H
"<li>曲目:" +0 X# g- z) ~* W: }8 Z q
x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +3 g" l. _8 q% B" X2 ]
"<li>艺术家:" +: L) m a2 b( N/ y0 q6 x2 I' c2 s
x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +' k/ f7 w: T3 y
"<li>专辑:" +- ]! C; f; L- T7 a2 i
x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +, q0 e4 ~! [# J
"<li>国家:" +
* Z# n8 { |. I4 W% ]/ J+ b8 I, ~ x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
) ^" K0 N8 L6 M |* A, u "<li>公司:" +
/ ] D) S$ ~% l+ f* G& J x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
* o; m* ~2 C# ~ "<li>年份:" +0 P; B) o/ C+ b2 z Z3 A* X
x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
, X1 B9 K2 \) q* h "</ul>";
; V i. t1 M. H' E' s }* }8 O# e. w l3 p% o6 \/ s
6 j7 f, `) A+ n- j! X8 W. H4 m function loadDoc() {0 t. g- q' }1 R# ]6 E0 x
_7 O3 ~ y3 r9 J7 E- w6 @ document.getElementById("demo").innerHTML = table;
" R, T% M4 Q. K' \ j/ E* `7 G }
7 j* W7 J, z# i/ q$ L/ D2 F4 t- ]. B: L
</script>
' ]0 \7 d4 b0 \! o# F# z `/ ~9 T6 m- Z+ O6 O+ Y. i; _# a& ^: I
) f0 j# \) ~7 p5 f</body>
: o: W+ l* o3 H: b. r6 k8 p6 ]/ N% m( R: {
1 r) N+ C" j* w6 g5 j</html>! i# p7 O1 t! F; @
7 Z. D5 K' B U# ~
7 h& b* ~5 @) M" S( z[/mw_shl_code]5 l8 }8 U$ m; [1 d8 \0 |5 f
# G! [- ^% c# x) H A+ b
" Z- C1 J. L3 s3 j3 ]9 o
. F3 y" v! E7 d/ t# U( E4 }XML文件5 O2 S6 H1 Q, q: D0 U7 d1 L1 r7 N
' @ ]% `1 h2 y3 D4 ]
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
$ Q6 M4 ]9 g! F# O<CATALOG>, r8 `- ~6 Q* I% G: Q/ U
<TRACK>' V O8 ~2 z1 \, |1 F
<TITLE>再见</TITLE>
& i+ d% t# n0 o, W" I0 O+ u+ V* T<ARTIST>邓紫棋</ARTIST>* K" e( U$ d! a9 ? C5 l1 b
<ALBUM>新的心跳</ALBUM>" F( H7 s5 N! x# s- x- o
<COUNTRY>中国</COUNTRY>
- S+ [' q! a3 p- Z1 p% p# D<COMPANY>邓紫棋工作室</COMPANY>* S: w# O8 V% j; c. S" v! A0 s
<YEAR>2016</YEAR>
, j0 ^0 x& k5 `7 L2 n. q8 s! Q, [</TRACK>
4 P/ N5 `! L$ o9 u; W+ J0 P' E2 m/ I% W5 @, ]7 m' H6 }6 M
<TRACK>/ U E* o8 J! A, P/ C/ R
<TITLE>All I Ask</TITLE>4 M$ `# P7 I- g8 a3 V# s
<ARTIST>Adele</ARTIST>
9 u9 x; X; H% ^* j<ALBUM>25</ALBUM>3 x' w: N4 [' r2 v4 M K
<COUNTRY>英国</COUNTRY>! l5 W/ v+ b, R* Q: t
<COMPANY>XL Recordings</COMPANY>8 z# J9 j8 G5 n" \6 c
<YEAR>2015</YEAR>8 r: a& b% Z' X4 T3 O
</TRACK>7 W k* ~% s5 _5 Q+ P* e9 ]
. d M3 r+ a" a9 a! I) ~
<TRACK>4 ^: D V9 o8 Y4 [! t2 ~% R) n( Q/ W' x
<TITLE>之乎者也</TITLE>
3 G+ J& H7 ~3 \9 `9 C( Z; R<ARTIST>罗大佑</ARTIST>
+ \3 c3 R* x6 t1 f1 A' M<ALBUM>青春舞曲</ALBUM>- f! i; V3 O h8 z2 w
<COUNTRY>中国</COUNTRY>5 [4 V6 r2 a" q P& A- v# O- I* ?
<COMPANY>滚石唱片</COMPANY> D+ o/ m; q1 C
<YEAR>1982</YEAR>
2 Q; u( R5 L+ r( u( \4 P; r</TRACK> t6 T' ?1 C1 a
/ {2 x$ ~, h( H, |$ U- D) h/ Z
<TRACK>
+ P1 o' E6 y' O4 Q6 G( l<TITLE>Never Be Alone</TITLE>4 _4 ~: [* {" ]9 D+ H$ W
<ARTIST>Shawn Mendes</ARTIST>
, b/ `4 d; F% R- m& m/ k9 @& C9 q<ALBUM>Handwritten</ALBUM>
, u1 e y5 R$ r; j$ k# N }" j<COUNTRY>加拿大</COUNTRY>
- ?7 r# o9 `' @! D- i" P( T<COMPANY>环球唱片</COMPANY>
' p5 \# g+ X6 `9 J* ~, S<YEAR>2015</YEAR>& t/ q* f4 i) @; x
</TRACK>
, Y. Z. c8 j$ Q/ B( ^3 [
& p7 B6 h" S; Z* [* G3 I<TRACK>
; n1 m; a1 z/ @: L" F1 O<TITLE>慢慢</TITLE>
' J6 D5 R) q1 t4 t; W<ARTIST>张学友</ARTIST>$ z7 L7 y* k$ g& K
<ALBUM>忘记你我做不到</ALBUM>6 M# J7 t( j, e9 K* R
<COUNTRY>中国</COUNTRY>; j! s; U( H7 Z, \
<COMPANY>环球唱片</COMPANY>' _: Z. C* u3 K' ~* N$ T. D
<YEAR>1996</YEAR>$ o6 M* c) z. z+ s+ W: s" }5 g
</TRACK>
0 x4 h8 z8 f# e6 R- l# Z0 d j1 F9 P) t- M
<TRACK>
9 i E% |7 e3 t5 ?+ M+ D3 w( i<TITLE>Complicated</TITLE>; @2 ]: w1 S1 V+ Y9 O; V
<ARTIST>Avril Lavigne</ARTIST>
# o- S$ x# ?9 P" b; b1 q+ f5 ^<ALBUM>Let Go</ALBUM>" E) n7 n7 ]/ y9 Y. R3 R
<COUNTRY>加拿大</COUNTRY>
! p/ b5 f. k& K<COMPANY>索尼音乐</COMPANY>
+ _, n* X5 U, n: `/ Z<YEAR>2002</YEAR>
# v8 p7 J, c/ ^& U. k</TRACK>5 t7 G! [# C0 n' p. b1 Z
3 u: l+ |) E% E4 s
<TRACK>1 C3 F- U1 E# A: f
<TITLE>三生三世</TITLE>4 N8 F% E( F$ X. C1 t
<ARTIST>张杰</ARTIST>
* t: u: b+ X* s<ALBUM>三生三世十里桃花</ALBUM>
" g) }. E6 l _' S3 R, J<COUNTRY>中国</COUNTRY>
3 g( g0 E4 A/ v) i p<COMPANY>仁溪音乐</COMPANY>0 @1 A# |$ M3 @- W! u
<YEAR>2018</YEAR>6 h0 M/ b( }1 a8 [0 E$ y1 ]
</TRACK>2 y: w# d* z1 l2 X2 A4 E
! F6 C! j( k6 O7 g* t3 ~<TRACK>5 w3 U0 u8 o" i, R5 T, ^2 J
<TITLE>Five Hundred Miles</TITLE>
# C6 L. c* Z4 P) o8 h d! _/ L<ARTIST>Justin Timberlake</ARTIST>
! @* E: F3 {% I, N& x<ALBUM>Inside Llewyn Davis</ALBUM>
6 W' T7 F( m; {& K- J<COUNTRY>美国</COUNTRY>* S* j' i$ H! Z: L1 j' c, |+ }
<COMPANY>华纳唱片</COMPANY>
2 c# S' p& \! M<YEAR>2013</YEAR>. ]! X2 ?. p! X2 z6 _/ n. m
</TRACK>' H/ e- \% ?+ s F& U+ S( [( `
5 n" Y) ?3 v* Y% j# t* y. ]1 X
<TRACK>
$ S( S9 c. t# N$ r0 V5 A$ [5 m<TITLE>演员</TITLE>
v+ b4 ]: `7 c" J1 m F7 X- a8 Y<ARTIST>薛之谦</ARTIST>+ `5 s/ K) ]7 B" Y" P; H7 e( X$ R
<ALBUM>绅士</ALBUM>
$ i. V! Z8 Y8 D, f5 V<COUNTRY>中国</COUNTRY>
$ t0 @# B! r& ?<COMPANY>海蝶音乐</COMPANY>
) Y# Y+ Y1 }0 y; [/ G0 L<YEAR>2016</YEAR>
8 x1 N6 G+ g: R& ?, L. P</TRACK>
8 a, H7 m# W G) U5 F' _# e
4 W) C. m0 r9 e4 C<TRACK>0 Z9 U; W& s1 ]4 A
<TITLE>Numb</TITLE>
' {$ `1 `0 J- e; v<ARTIST>Linkin Park</ARTIST>5 ~7 `9 d7 c+ \* e3 U4 I
<ALBUM>Meteora</ALBUM>8 s- l6 N4 H4 R+ {
<COUNTRY>美国</COUNTRY>
( W/ p- |5 q; B( d+ ~2 B: a& p, t8 s<COMPANY>华纳唱片</COMPANY>3 g0 U! {% h7 ]( J8 v1 q
<YEAR>2003</YEAR>1 J2 ?8 G2 f; f/ s/ n3 ^* [' P. {$ y
</TRACK>- U4 s: |9 ?9 R9 k/ P E# G0 v
" K7 ]6 w4 Q) S) W) n1 y6 O<TRACK>
& c4 T" g7 p, ]7 i. R+ W. g4 O<TITLE>给未来的自己</TITLE>( |$ M! O$ B3 o+ U- X* Y# b* M; L% f
<ARTIST>梁静茹</ARTIST>
, Q8 _$ t. C* z' n) L' B<ALBUM>崇拜</ALBUM>
6 v3 M) N3 k3 [% N. x2 s2 A- e<COUNTRY>马来西亚</COUNTRY>
: b/ I- [, m& s7 h8 O/ T' W<COMPANY>相信音乐</COMPANY>
9 n# S/ x1 u& g V<YEAR>2007</YEAR>
3 R. j- `$ y0 T3 K</TRACK>+ F2 u# |* Z$ G4 h3 t
) {) a% w9 {1 v6 g<TRACK>8 i! s& E/ t: s7 {" I
<TITLE>The Monster</TITLE>5 F0 e; ^% D* I+ a$ U
<ARTIST>Rihanna</ARTIST>* h' _1 x4 T [
<ALBUM>The Marshall Mathers LP2</ALBUM>7 c T/ A/ P0 \* E3 A4 K4 o
<COUNTRY>巴巴多斯</COUNTRY>
8 e5 h! {' V% q2 c" f8 N7 N3 Q<COMPANY>环球唱片</COMPANY>
/ t$ l" }. x) q; C; f<YEAR>2013</YEAR>
* K z* ^0 y; X) N* d</TRACK>
! g2 b% |+ A: P7 E }% R) B h; l" R
<TRACK>1 Z7 h( p* a& c9 P" |" o
<TITLE>我终于失去了你</TITLE>) W- ~" e2 a. K4 _7 \5 q" {+ ]
<ARTIST>赵传</ARTIST>
* {9 ?, @6 r" g; Y8 l1 w- d5 {2 f<ALBUM>我终于失去了你</ALBUM>' O/ \) G; T- u0 O6 _* S; v: D0 @0 A- j
<COUNTRY>中国</COUNTRY>
! O5 o, P7 K; _8 w+ e0 _% O<COMPANY>滚石唱片</COMPANY>2 e Y, d% K' G8 r$ b* B' R1 [
<YEAR>1989</YEAR>
+ O1 L% O; J; U6 M1 K* n</TRACK>
! p7 f8 k" ?( J F
& d/ q1 f2 {0 X! j* J$ L M<TRACK>9 J0 U* \$ T6 T6 w( S' U
<TITLE>Main Titles</TITLE>6 m; D- r1 f) G+ G7 m, s' g0 N, ^
<ARTIST>Ramin Djawadi</ARTIST>9 P: j; t& i0 P
<ALBUM>Game of Thrones</ALBUM>
& w3 N* u$ S; W; Y+ X% k<COUNTRY>德国</COUNTRY>
% {1 P, U! w: l5 K* W<COMPANY>索尼音乐</COMPANY>8 r# O( [0 _( r+ J2 o( k& g5 F9 ]9 P
<YEAR>2011</YEAR>: m$ A( `1 p; U; E0 y
</TRACK>
' r5 O7 V3 C5 W4 p* Z$ e/ C( i2 W+ A3 J3 I0 \
<TRACK>
9 L U9 X6 K' e6 e M( A& i<TITLE>传奇</TITLE>. J$ i* ~2 ?1 g" L
<ARTIST>李健</ARTIST>
g% P2 m) e$ V* N<ALBUM>似水流年</ALBUM>) L* x7 S, _+ {6 |- e6 }" q
<COUNTRY>中国</COUNTRY>+ i* d% E* B7 P" e! G
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>) }% N4 h3 Z/ W% h3 ?4 f3 \' @
<YEAR>2003</YEAR>
8 y( {& w, W1 i" Z0 ~$ P! [) `; G2 l% p9 d</TRACK>/ C3 n1 i. v; A% g8 x
& \3 Y% r' H- L- l5 R<TRACK>/ ^/ g5 x) }2 F& c+ U9 O, c& `
<TITLE>完美生活</TITLE>
3 B6 A% [* d ^0 Z1 W! x<ARTIST>许巍</ARTIST>
5 S' D0 j1 ?2 p/ ?. h# b<ALBUM>时光漫步</ALBUM>
; i2 g. @9 I* g# x# R# B0 O* G0 o0 P<COUNTRY>中国</COUNTRY>
* @8 @! Y- C1 j<COMPANY>金牌大风</COMPANY>3 e5 k/ b7 z4 @3 J7 O* M
<YEAR>2002</YEAR>" T% S3 p0 q' J' ~+ B% ]
</TRACK>
& ?' n/ G' q7 B# J, B! u</CATALOG>[/mw_shl_code]
7 o% b0 `! m, K2 c; n* T! _ |
|