|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
& S# u1 p0 d: O; | k+ A) o! n% e3 {, B& _8 b8 e
. j7 l7 p" R+ j3 n8 k
[mw_shl_code=html,true]6 }9 S0 W( g/ v
7 U7 ^" `6 l) k4 k4 {
<!DOCTYPE html>
! @& w2 L7 |3 d# Q N0 S<html>
0 D8 O" D( Z0 O/ c2 X<header>
# U$ C/ B: ]" l& R <style>
; ]8 O* i& \4 U& M- K4 V' i& G table,: f1 e% r8 D Z2 K' {+ ?4 G
tr,( V/ g$ q: q0 V+ e; j A
th,2 @$ t/ J9 e3 u* @
td {
* F: S& y, x8 i( y% `% y* U0 X: } border: 2px solid rgb(20, 59, 230);
3 h: A6 B% e) f Q, y3 h; z: B border-collapse: collapse;" a' H2 M9 M9 r% T2 b
text-align: center;) ]. A' X+ i1 s1 C
}$ A0 J0 S8 E4 k* I+ |; g
$ U3 ^! T2 z" g6 z% i, P th,6 U/ v n, Y0 O; l
td {
0 n4 ` y/ z5 d4 j* c1 x6 @ padding: 5px;2 v7 G) l+ b+ L- b) E( L
}
5 b. _/ Q4 w. H# w m </style>
& L* p$ r5 b2 a' u& W1 M* _* u</header>* u$ e" I1 R# b/ ]! U& v H- A
" z9 V9 e- z" c* E<body>! Y# I; d: x, |
<h1>xml http request object</h1>0 d1 _1 _8 H; |- p- \3 S' H
<button type="button">Display Music</button>" ?. j3 a( S& n1 Q0 E& _
<button type="button">Previous</button>0 q5 |7 U4 |# @" g% t% C
<button type="button">Next</button>8 j' S3 D/ y* L9 L3 K1 g
<button type="button">get my music list</button>
; Z# ^$ q* U- f h- g& C <table id="showMUSIC"></table>
* N7 p+ x8 ]+ S% U <table id="demo"></table>/ }) i4 d" l7 b; H
<script>
! j* i3 s( {1 p8 E; m1 u
' a6 j& l7 h$ e4 ?% k$ V+ U: z* t var x, xmlhttp, xmlDoc;0 L( s# {- \% k
, ^* u7 U2 n& w- C, s1 j/ d
xmlhttp = new XMLHttpRequest();5 `0 g4 ^9 J" ?6 H+ P$ u
xmlhttp.open("GET", "/files/music_list.xml", false);* `/ c8 Q3 j* q, X/ s6 u! P
xmlhttp.send();
5 I- q: j2 y/ Y& U
! V k1 z( x0 F! h- J; M xmlDoc = xmlhttp.responseXML;
3 q! z `: l7 ^8 R4 ~; _. a var table = "<tr> <th>Owner</th> <th>User</th></tr>"
# x. l. I$ T- ~7 P/ { var content = document.getElementById('demo');9 e' v* C+ j6 N8 E0 z! w$ q0 q) e$ P
var x = xmlDoc.getElementsByTagName('TRACK');
% ]/ W# Z3 v0 r4 o, V7 G for (i = 0; i <x.length; i++) { . U0 ?. U# Y A: a
table += "<tr onclick='displayMUSIC(" + i + ")'><td>";( V/ L* O! ` B' L8 B, n2 i
table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
* c8 |# A, }$ v) G5 x! |% N table += "</td><td>";
0 e3 E4 |) }1 n( c) R7 F" K& K& M7 n table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
8 r. D$ J$ p( k! {/ z table += "</td></tr>";
8 Y; R# O" v; Y( K9 w9 [5 V# Y x}
! g: ^5 {/ s8 Z* x2 `% {% s" ^! _. p8 \3 N
document.getElementById("demo").innerHTML = table;
9 r: w, x0 Z3 svar i = 0;
4 J8 b3 a' R3 G. D J: M! I function next() {
; k" @4 ]( ]3 |) w- O, i // 显示下一首歌曲,除非已到达最后一首0 h w6 ?3 f* V- c; _' I9 K
if (i < x.length - 1) {. o$ y3 O+ l" J2 {1 w
i++;
3 w. J2 x% V" k# K$ N# h displayMUSIC(i);
$ o, F" O6 {7 r, Z& _& \ }/ P$ Z) |7 O2 J% o
}
( [; n& p' s1 ?5 H( x9 t3 O. J. m/ @ C& _
function previous() {" A) X5 x; B# d0 B% ?1 r. [
// 显示上一首歌曲,除非已到达第一首
1 S0 u9 y2 Z/ T0 T1 D' ]+ z if (i > 0) {; e7 H6 R$ y$ s$ i
i--;
7 S9 F4 y5 r" M: x9 u displayMUSIC(i);$ b# V# K- L3 k8 D
}+ s# J' }, e. a- H
}# L( `$ ^% p+ H, H5 f) S5 T
* B1 i6 |2 Y; r' Z; F function displayMUSIC(i) {
1 G E4 x+ u9 i0 ~8 x document.getElementById("showMUSIC").innerHTML = S' }2 y7 e' q8 T- C
"<ul>" +8 Q6 Z, i5 d0 S T" K7 {
"<li>曲目:" +" k5 A# Y" Z: ?- m$ L
x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +: r. p4 F* m) s) _: B' J) g
"<li>艺术家:" + k4 o& t$ S/ U8 ^9 D
x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
6 A. P# ~/ d1 a1 S1 y, l. c "<li>专辑:" +* i2 A' P! i7 ~6 N; j6 R9 v7 N
x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +' q* I9 J' K4 J& |# p* P3 [1 [5 g0 {
"<li>国家:" +) p, p; t) {- g# R" `4 D2 i
x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
* f$ | h0 K% J/ ]5 E7 ~ "<li>公司:" +
' A4 W2 E: v9 p x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
( h# c, O- D5 D, _, y "<li>年份:" +7 W! |: `# c* c" ]
x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
+ c0 u! O; q* t: I "</ul>";/ I- C! |- K: n& A6 v! ^
}
; t' w- Z' |% J/ E) s1 J
1 }7 R% q! w% T function loadDoc() {
7 k" F3 Z2 U9 M% j7 z/ P: W8 W) `. B" k" x
document.getElementById("demo").innerHTML = table;
5 E ~4 I* f; o1 f0 k$ X }5 J7 Y- o1 q W+ o! {: z) k
, {# s2 i# _' V( U# f </script>
1 b3 ]' Z# z+ s$ Q% e S3 H$ v6 w d' g/ U/ N; X' {0 w9 x
' M. H! G ]6 X0 ~ \' g6 l</body>
" g: @$ ^0 B8 X# y0 ]) b* w' z# t5 L/ Z9 n
</html>
( ~: |0 h$ P$ r1 [+ D
' z, i; |5 c" ?' d: k. G4 J9 [/ J- L3 S1 @! V& F
[/mw_shl_code]
) t6 O4 ]: K8 o& R0 o; O( s4 S$ K* `8 S( \* \0 [
: S8 h ?: P% b6 c- Q" }1 c! O! q7 O% z# J2 i& g2 p
XML文件1 f* P+ X, ~, S5 n( L) M
! q* t" ], [, F+ }, E5 J7 d0 x
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
5 V" |/ u" ]$ K( f; T: O& b1 r<CATALOG>
7 f% [$ D9 a1 g( r<TRACK>
" g& A2 f/ Y- R8 ]0 g<TITLE>再见</TITLE>
8 O4 ?/ d, }$ ^4 g( ]/ i; j<ARTIST>邓紫棋</ARTIST>
% }0 U0 g: Q; s& ^7 U: N8 g<ALBUM>新的心跳</ALBUM>" } X# p7 U1 g
<COUNTRY>中国</COUNTRY>2 f4 s; ?0 \. W& d
<COMPANY>邓紫棋工作室</COMPANY>
) y4 ]) J. L& j+ m& j& c<YEAR>2016</YEAR>
. y! ?% o7 J# t4 M) M</TRACK>
3 p5 e- x% K- u1 H/ Q+ b* ]$ Q8 v' x* o' F
<TRACK>
! T# _5 u' ^0 v1 y0 B<TITLE>All I Ask</TITLE> F3 K9 F6 }) o
<ARTIST>Adele</ARTIST>* M3 A1 E/ d2 }6 \. C6 z
<ALBUM>25</ALBUM>6 r% p* F; k9 w }4 y! W
<COUNTRY>英国</COUNTRY>
4 \( S0 y, Y0 G: |. _, Z3 x<COMPANY>XL Recordings</COMPANY>5 [3 h- [, c0 O, l
<YEAR>2015</YEAR>, q ?& Y5 G) f! m' ]+ b, n" n
</TRACK>
+ W9 `" r0 U& V- O* A5 Y0 n
- x; d. n9 ]; k P- x<TRACK>" d2 s9 c4 Z: I
<TITLE>之乎者也</TITLE>1 `; ~& ~7 x( Q3 ?7 C
<ARTIST>罗大佑</ARTIST>
9 l5 W5 v. K- s<ALBUM>青春舞曲</ALBUM>0 w* b- h! @7 p% J; l
<COUNTRY>中国</COUNTRY>: ?3 r {; J- o# f7 w* T% E5 V q% M
<COMPANY>滚石唱片</COMPANY>+ W& `; a: d6 H1 t3 G5 _$ w
<YEAR>1982</YEAR>. n: P( [; t: k* h, D# ~
</TRACK>
' f7 @8 {, e! w6 i+ D8 p0 u/ K# N. ~' v
<TRACK>6 J: Y) P! J2 ]7 Z5 U6 X
<TITLE>Never Be Alone</TITLE>
$ K* [& f, j1 p/ U9 ?( e( _6 s<ARTIST>Shawn Mendes</ARTIST>1 t8 A7 @, U* c4 v5 }6 g% {
<ALBUM>Handwritten</ALBUM>! ~- l/ y1 C5 x% q4 Q, d+ S
<COUNTRY>加拿大</COUNTRY>
% U3 w' }- I$ d9 g% T<COMPANY>环球唱片</COMPANY>
! Q" H3 G( E' F3 f& }. f' B6 O6 V% T<YEAR>2015</YEAR>
# v7 n3 m7 q8 @; f</TRACK>$ I3 H: R5 |0 I5 L. i: x
5 R% C8 H' |) `
<TRACK>
* J. y* |8 L" G9 [' R M5 @<TITLE>慢慢</TITLE>
4 A; b5 a, h, j' ]& I* c; _<ARTIST>张学友</ARTIST>+ E! {% V0 c1 N, ?8 c
<ALBUM>忘记你我做不到</ALBUM>
$ g/ U" d2 ]5 f2 B) p3 Q4 Z1 s- O<COUNTRY>中国</COUNTRY>* z6 A! h9 D* R- C7 e9 @" H
<COMPANY>环球唱片</COMPANY>; _5 @( i0 x0 V& h$ y5 q( \) c
<YEAR>1996</YEAR>
5 o& ?$ C, Q- k</TRACK>
0 z& ~# b$ k7 }- p+ C
& @* c/ K+ W" @+ Q<TRACK>' @ l1 v5 t3 J# A1 o5 G8 Y! r% r
<TITLE>Complicated</TITLE>1 T! n- |" A' j5 N5 {
<ARTIST>Avril Lavigne</ARTIST>) K% K1 M- e L f A
<ALBUM>Let Go</ALBUM>
9 M2 W9 b+ B; N) j<COUNTRY>加拿大</COUNTRY>
0 x( u( z3 b( J/ w8 L- e/ W<COMPANY>索尼音乐</COMPANY>
8 s# c& h3 a. J! N: I+ x<YEAR>2002</YEAR>+ Z) Q' @0 H+ n9 P! o r9 j
</TRACK>2 o, n$ s7 E; |# w* z2 O6 e
/ h# x3 h2 B( {$ z" }) z5 c
<TRACK>) e7 ~+ |- _1 [
<TITLE>三生三世</TITLE>
. E0 ^) @- W) c9 V<ARTIST>张杰</ARTIST>
9 R9 \6 u& d) o" y$ t# o<ALBUM>三生三世十里桃花</ALBUM>) L* O. ?2 O8 |$ v/ W
<COUNTRY>中国</COUNTRY>
( H# J5 r4 W. M9 J- E<COMPANY>仁溪音乐</COMPANY>: I$ ~( b; x# {; X
<YEAR>2018</YEAR>
3 t+ w' r7 u: T1 [- o</TRACK>
5 t, w& k' w" p5 [$ i
7 ~9 ]0 K8 v6 ?/ {2 [8 e! O<TRACK>
% g. p8 H' F( U7 z+ ]$ R<TITLE>Five Hundred Miles</TITLE>
6 d# Z h2 y2 ?" P9 t- Z% S, U<ARTIST>Justin Timberlake</ARTIST> n( B" j6 x1 w. b0 |0 S B
<ALBUM>Inside Llewyn Davis</ALBUM>( R& n7 Q# J& a: g
<COUNTRY>美国</COUNTRY>
: @, A6 [ [' o3 W& |) H( s' m<COMPANY>华纳唱片</COMPANY>
/ T. L6 e# }/ t2 G) Q<YEAR>2013</YEAR>9 S1 Z' P0 \( w3 Y2 t; X D% J
</TRACK>
/ d( W( j# r) e1 _" Q E( `4 t: f
<TRACK>7 G+ }+ Q$ h, U" ~4 Y) B- d
<TITLE>演员</TITLE>
4 P+ I. H; _, Q3 V$ M% M<ARTIST>薛之谦</ARTIST>& T% o4 y9 M8 i' Y) o+ }) @
<ALBUM>绅士</ALBUM>
) t( T- X) L$ l% i& ?8 c<COUNTRY>中国</COUNTRY>- J9 v& u8 o8 Y K' r v [
<COMPANY>海蝶音乐</COMPANY>" v: q0 i" n7 s1 e# _
<YEAR>2016</YEAR>
0 x+ D) P+ j+ a# J3 e. u</TRACK>7 |3 w& d. j$ R# f
" p% ]3 b1 [3 d: c% ]<TRACK>
# N( W3 b5 k/ ^9 Z<TITLE>Numb</TITLE>1 M, O0 a6 P D
<ARTIST>Linkin Park</ARTIST>$ t/ U3 ?9 ?6 ^ t8 v
<ALBUM>Meteora</ALBUM>
( `7 l0 K- b6 C' |# k0 O<COUNTRY>美国</COUNTRY>: V3 `* x7 \# v( H$ e
<COMPANY>华纳唱片</COMPANY>' x9 ~) o: b* ~, ^9 T2 ?
<YEAR>2003</YEAR>4 {8 m7 V+ B- p
</TRACK>
( m0 f [# H0 I. q/ o$ }% g
- e* `) ~7 Z9 ]( ]7 ^<TRACK>
) k/ c7 F/ \. S" x( L<TITLE>给未来的自己</TITLE>& K$ E! p$ R! `. x: q
<ARTIST>梁静茹</ARTIST>6 w9 f0 x; `* u
<ALBUM>崇拜</ALBUM>
" S9 P" ] p! N: A<COUNTRY>马来西亚</COUNTRY>
9 T J s' _7 I# M) V( Y! m9 W<COMPANY>相信音乐</COMPANY>
; T9 Q, i; Y& V) a/ `0 a' l<YEAR>2007</YEAR>
# s6 H: t$ N9 d2 m. H1 ~- \</TRACK>3 l1 L2 _; Y- S$ n5 \9 l' w4 {9 ~2 |% B
: Y6 H9 {. F6 X( L$ I2 F<TRACK> D7 _6 X. Y/ N2 L
<TITLE>The Monster</TITLE>
7 v1 R" O6 R8 Z# j( j<ARTIST>Rihanna</ARTIST>2 c! g; I; K5 v. Y$ K. ~) M9 G1 H: F
<ALBUM>The Marshall Mathers LP2</ALBUM>
, ?: d8 T7 y2 e1 i% @, R% u! s<COUNTRY>巴巴多斯</COUNTRY>: z% \" E0 H* L3 b
<COMPANY>环球唱片</COMPANY># i5 @5 G4 `* Q
<YEAR>2013</YEAR># m5 k& [9 }; O) s& t
</TRACK>& T; l( C7 ~; K, X: [3 ~! f. l% C
2 `/ g( A) |, @0 [<TRACK>
5 |& x, K9 s( P2 |' @2 ^8 \<TITLE>我终于失去了你</TITLE> c6 l8 I) Q' \3 ^' K
<ARTIST>赵传</ARTIST>* R0 b3 Y! M% t! t9 V& a- p( a
<ALBUM>我终于失去了你</ALBUM>9 ?/ |) k* g0 ^% k* @+ F" O9 o
<COUNTRY>中国</COUNTRY>
% o- R( G* j" ?$ D" n- g<COMPANY>滚石唱片</COMPANY>! M2 v5 L- Z# S# ?
<YEAR>1989</YEAR>
3 z' Z* k" r0 j</TRACK>" s9 v1 }0 F- k4 Y8 l
* o7 G0 k% R7 p4 x: U; m) r- I. F9 n
<TRACK> T( L" _6 x& i7 H9 [
<TITLE>Main Titles</TITLE>
0 }8 b" f+ B, @' F; ]% D<ARTIST>Ramin Djawadi</ARTIST>
6 b0 t& p r. {* c% L<ALBUM>Game of Thrones</ALBUM>
# B" o8 Y+ ~% c' Z5 p% g<COUNTRY>德国</COUNTRY>
7 `+ h6 H, m; @' V$ w<COMPANY>索尼音乐</COMPANY>9 d' }0 f5 j3 o% `9 R1 C5 g* u
<YEAR>2011</YEAR>9 m3 @2 U8 R6 Q5 e$ T( [ t" V& A! H
</TRACK>
( r: ?7 n/ w( e- }1 i- a) N" d8 |8 I* y W- Y5 l; Q x* A
<TRACK>
9 i- N. x5 G2 |! k' G<TITLE>传奇</TITLE>
- O3 H( F4 M$ u$ N<ARTIST>李健</ARTIST>2 _4 w! s% X1 a; G$ O$ V, U2 C1 O
<ALBUM>似水流年</ALBUM>
/ P- F5 I- L8 o! y. S; d% a<COUNTRY>中国</COUNTRY>
$ ~- e' ~2 U, M5 C5 f! z- F<COMPANY>北京完美坚持文化艺术工作室</COMPANY>% w( I0 k' @# k
<YEAR>2003</YEAR>
* p+ {* W! v" c O. w( {9 O</TRACK>
$ d4 g5 w- O! u3 R1 Q# S
% _* Y) }6 V6 Z! l/ F/ b7 a n<TRACK>6 d7 y8 y( c9 b; i# C" P2 L6 V! `
<TITLE>完美生活</TITLE>3 Y8 y) F) n+ J
<ARTIST>许巍</ARTIST>
3 X$ S. s( u4 b6 e7 K% D2 Y3 ]<ALBUM>时光漫步</ALBUM>
& `/ l( {7 h+ O1 `2 k% U<COUNTRY>中国</COUNTRY>! A3 a9 V& `1 g4 b1 ?4 H
<COMPANY>金牌大风</COMPANY>
2 ^7 w6 Y! v4 ~7 s7 d$ u) X% x<YEAR>2002</YEAR>' z8 @! b% R. _& O7 f2 [, g8 b
</TRACK>
, l. i7 S; }/ n: `$ S8 y) E</CATALOG>[/mw_shl_code]& y1 N2 O2 B+ M2 Y
|
|