|
请使用QQ关联注册PLM之家,学习更多关于内容,更多精彩原创视频供你学习!
您需要 登录 才可以下载或查看,没有账号?注册
x
) U! P6 i) c) {% S; F
0 J, t- o9 D3 I& K: |
7 }5 f5 b, N3 y( Z& R+ [2 @[mw_shl_code=html,true]
: x8 m7 r" Z, q( h! ]) v1 M+ ] F3 ?4 T
<!DOCTYPE html>
% N4 [& w. X& p& D+ v% g, s<html>
$ A( v) G+ Y+ c/ R p3 t<header>, p s; ?4 R4 O6 e
<style>$ U1 W& {4 [ c( b
table,' P2 s, Y1 F5 j+ _
tr,7 E' K( e1 A! X2 m
th,
; i \9 U- Q5 P% {6 a4 ^3 S, l td {0 E! ]) |) G: e& P
border: 2px solid rgb(20, 59, 230);
& w0 Y0 G( `% S$ |5 h: \. }9 q' z border-collapse: collapse;3 ? Y/ A8 B$ [' [
text-align: center;
4 y3 o- e1 F, {* | }( e1 i1 }% ~6 U( W
2 o1 ?9 @* `; `$ I, t
th,0 s' q7 H" r' {- q' M
td {# O! B' ?8 i, b& J3 T
padding: 5px;
& ~% F* T: C7 P" F7 B1 i) T% s }
, C) j7 H6 N% m% A! B9 `+ t </style>
( Z* P: E5 Q- O7 ?4 q. T9 S" J</header>
6 V) x# n0 u7 w- L6 q0 m
: O( C) R7 a, ~+ o( M/ @+ ]<body>/ C9 |7 d! P' F. _4 x9 ~
<h1>xml http request object</h1>
. K( a% l: `2 l$ y$ \ <button type="button">Display Music</button>
1 K/ N$ f; \! a. |0 ` <button type="button">Previous</button>
# h+ a3 {) t5 @6 G8 {% X/ R <button type="button">Next</button>6 { m) X7 D- U" B) y$ B$ O6 a- ^
<button type="button">get my music list</button>. U% L8 l5 \* @9 F+ C
<table id="showMUSIC"></table>4 f! l, O9 \- j9 @" O' s$ k
<table id="demo"></table>/ \# i; H, i& `
<script>6 i- R2 k5 [5 f- ~( e/ |9 A
7 W% Y( k C, t E var x, xmlhttp, xmlDoc;2 J/ F$ ^7 c: e# Q: I5 J1 b5 x* [
( v# ^7 b0 d9 X9 G U% [ R xmlhttp = new XMLHttpRequest();
- C1 I1 _; T O1 K0 m5 K xmlhttp.open("GET", "/files/music_list.xml", false);: c0 i( W3 _& v$ q
xmlhttp.send();
, S' [6 m* v+ y" N* l
& a- v* I2 h, n- m+ M, |, W xmlDoc = xmlhttp.responseXML;
- w7 C5 ^* c6 b; H9 n) } var table = "<tr> <th>Owner</th> <th>User</th></tr>"
, P7 R" G9 `9 y1 r$ `% R var content = document.getElementById('demo');- E3 |# h& e& h& t w# b% S' h
var x = xmlDoc.getElementsByTagName('TRACK');
/ k2 T5 U' m- M4 u8 D" w* U for (i = 0; i <x.length; i++) {
9 d/ t- P$ _3 a" I& Y* O table += "<tr onclick='displayMUSIC(" + i + ")'><td>";$ |0 V/ n, \/ `7 [
table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;8 L o6 N/ U. w5 d! D/ H& v3 M
table += "</td><td>";. A9 o1 \/ L" P8 Q) j
table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
) l% x) |1 o# r% Q table += "</td></tr>";& F: ^$ o7 m& J1 e1 {: M& t
}
% Z6 I# P1 Y' w2 Z
, s7 k' ]% K: t6 k1 |document.getElementById("demo").innerHTML = table;. g4 I" b R. q# V3 e7 d# ]
var i = 0;& G) B* c d* ^0 [8 N3 n
function next() {7 ?5 d0 S+ }; F& e( Z$ f& t: Z
// 显示下一首歌曲,除非已到达最后一首' Y' `% o6 G" q1 t) ^
if (i < x.length - 1) {
* Z6 Z' I# Q7 V; m# r i++;6 P3 X( s: t, l W0 @
displayMUSIC(i);6 e* g4 ?# M4 N7 Z: n! I; N7 s0 \, w
}' q# }7 u, u N7 f! w- R
}2 `, F/ }& S# g2 j
/ j: Q( E( H! J# I% e6 K F, W1 b function previous() {3 e$ @6 Z' S: r1 D6 E/ B0 h
// 显示上一首歌曲,除非已到达第一首
8 q0 ]8 h! N5 C' T/ J+ I if (i > 0) {
) q2 R( w* Y9 ?8 Z- E @ i--;
0 K3 q7 |) |. W! ]( {, C displayMUSIC(i);
: t9 l0 U! X" v M4 i$ W2 a$ N }- U9 K+ X6 Y. s% C9 M) ^ S
}
$ a( A2 g2 p0 Z7 a; }: k- m- ?- N3 b8 t+ Z- P
function displayMUSIC(i) {
! x) Z! }! N. l, ?, @3 w* d document.getElementById("showMUSIC").innerHTML =2 ^: j8 h. Y% r
"<ul>" +3 {2 o* _( J& s& p* ?" a
"<li>曲目:" +
6 V% M N2 J9 R$ i/ c& b" y x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
9 s V. ?* n8 @/ O0 E! A "<li>艺术家:" +6 i: r+ Q' `, k* I1 E
x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
. r0 M2 e& ~6 M6 z7 q "<li>专辑:" +
) z, z, _3 ~/ c) P4 B& w x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
: H# q$ Y, g- m "<li>国家:" ++ K. i) ?1 j5 s; S1 Z* U( g T
x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
: Y. ?0 b% S( y% b5 r, W "<li>公司:" +3 A0 o7 z( U! w6 L$ b9 u5 z5 A$ o
x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
. ^0 i( Z" n$ X! S1 \0 }9 E "<li>年份:" +3 s* `4 D# f. g B7 A! ]
x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
! w9 B4 R# C N. \1 X "</ul>";
. a5 Q6 ~0 S; ]! ^$ t }' e4 D' Q5 k1 t. p- i: X
3 d( ]( P; ]1 V4 ~, G( _ function loadDoc() {7 h5 k2 ^. b/ C1 F" o6 x
U$ p' ?0 U p! n, J5 X document.getElementById("demo").innerHTML = table;
: |* B; R v5 S& Q( W5 f+ ]( M }
+ V' G5 ~' X8 r6 G* L! y" U$ N" @, M
</script>
0 k! ]- ^' k$ V K4 X$ t
: J; \/ l3 W. I: F3 ]) x. \6 j2 D( v) h1 F# p/ e" Y1 d/ j3 E8 v" N
</body>
+ b( F$ l; S, E. f d/ c7 _5 x; k* a
</html> _) r6 p8 Y; `+ v% k
! Y0 {: O# x7 b4 T; Y
/ h( l ], L1 A& a. t) |! d& G+ ]
[/mw_shl_code]
. r3 L; [4 M! b# T0 H! _. y% l: t8 T
' k, s: k ~6 Q" k) Y+ B. c, e6 K, r4 j- z( ~" t
. b ~- G: u8 u5 N4 _
XML文件9 s1 h# G/ P: z4 L- D& x1 I/ M
5 S3 {* b6 p$ z4 |' M/ D
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>- c, }2 g: A6 Z% m
<CATALOG>7 [3 \+ a5 t' r
<TRACK>6 A0 ^$ y. r8 }: o0 o2 Z, k+ c
<TITLE>再见</TITLE>
0 G) q; l2 D) b' B<ARTIST>邓紫棋</ARTIST>
9 O/ Z( q; y. V# Q. [<ALBUM>新的心跳</ALBUM>
% J2 n8 c' F5 @! X1 a8 _! e<COUNTRY>中国</COUNTRY>" u, W4 \5 J8 ~6 \2 Z3 A
<COMPANY>邓紫棋工作室</COMPANY>
) U- c" |' A6 @2 d, h" ^<YEAR>2016</YEAR>. N4 I6 k3 O" l& Q3 E1 @
</TRACK>$ x/ [3 {6 g. O" p% ?; |
& ~" i& L3 t6 q
<TRACK>6 M$ d( v# S, {
<TITLE>All I Ask</TITLE>: }2 D0 l: [" k; M& j7 D, v/ e
<ARTIST>Adele</ARTIST>; Q T+ y- B: T. P* Y
<ALBUM>25</ALBUM>
/ |2 F$ T8 P9 j8 w4 d) ]<COUNTRY>英国</COUNTRY>, b: I y$ ?) P. A8 k9 Y. S* x& n. @
<COMPANY>XL Recordings</COMPANY>9 F; X% ?9 Q) _8 L$ n& x8 c1 \ M, z
<YEAR>2015</YEAR>8 X8 U+ Q" ]1 u4 k" P# k5 m
</TRACK>
& n/ m/ T3 e/ K, I& ?3 R
, ?) C1 B5 y3 h6 A( Y) u0 d<TRACK>
+ g- u8 S5 t. B, m6 B# V, I<TITLE>之乎者也</TITLE>
3 H/ |2 K- @7 h, `. F* u3 U<ARTIST>罗大佑</ARTIST>
' w- u! p8 m6 x' W" A0 N<ALBUM>青春舞曲</ALBUM>& C+ T1 C; O$ ?. c" k8 E3 J9 a
<COUNTRY>中国</COUNTRY>- s0 E" R! H4 W
<COMPANY>滚石唱片</COMPANY>* f8 \# D; h' v- ^, _
<YEAR>1982</YEAR>
/ I* B9 s* y: o1 f; c</TRACK>/ b- z+ U( @* @0 w
1 Z* e b0 V3 d# a<TRACK>
% f/ l: w" D8 o- j# ~# K- s<TITLE>Never Be Alone</TITLE>
0 q) s: [/ E6 | z<ARTIST>Shawn Mendes</ARTIST>2 ~6 z, @3 O& j3 T% g. _
<ALBUM>Handwritten</ALBUM>% U5 f% e* G# N* [
<COUNTRY>加拿大</COUNTRY>
% X) }2 a- @5 a6 d. L# i<COMPANY>环球唱片</COMPANY>+ B L) R6 Z0 l. ]# `* \% @
<YEAR>2015</YEAR>$ Z- s! s$ | x, {; u) q
</TRACK>( R6 g, p7 S5 q
' d0 l3 Q( i5 @- T<TRACK>% o" p T$ H7 V ]0 p+ C
<TITLE>慢慢</TITLE>8 _5 ~% x1 R: g
<ARTIST>张学友</ARTIST>4 H- \! P4 l# b
<ALBUM>忘记你我做不到</ALBUM>
5 V6 w( e/ ?3 G D<COUNTRY>中国</COUNTRY>
3 G: x; c+ z3 v& d" k2 T<COMPANY>环球唱片</COMPANY>. K% @$ Y4 U& `- w$ }; {
<YEAR>1996</YEAR>' i3 k( F8 i/ ^) p; y9 i
</TRACK>- ?% V. n, n9 C$ Z, G1 m
- K/ }9 |0 E3 g5 }. n<TRACK>9 ?7 g, ^3 Y+ E8 v( Q5 Z! X3 Q" ]0 X
<TITLE>Complicated</TITLE>; V7 G5 R" q% t, r* V# b
<ARTIST>Avril Lavigne</ARTIST>. R7 d: t: ], D8 K( U0 T
<ALBUM>Let Go</ALBUM>
: B+ w8 [$ T* h* A1 g<COUNTRY>加拿大</COUNTRY>8 R c; r- @- D3 m" ?9 G$ D& P
<COMPANY>索尼音乐</COMPANY>
& B+ n! W e( T$ H& n0 o6 @% ~<YEAR>2002</YEAR>
# m3 Z$ c. B* `% i7 y2 |</TRACK>2 L1 u1 E1 O! Z5 w& U% r4 z! h/ w
" W3 M6 S9 F n7 S1 G4 V/ o
<TRACK>$ X4 \/ O! e" s( b
<TITLE>三生三世</TITLE>
5 F) j; n: H! j) p<ARTIST>张杰</ARTIST>2 @3 a; ^6 f' h5 n1 L
<ALBUM>三生三世十里桃花</ALBUM>
3 Q; u& [) h4 _* _<COUNTRY>中国</COUNTRY>
. S; W6 V& |& C8 s: P<COMPANY>仁溪音乐</COMPANY>3 s8 S( O+ V) V8 s# R$ Q
<YEAR>2018</YEAR>6 o$ x* J! `+ J- W5 b
</TRACK>
3 J7 H- }1 o7 {% Z; {+ @+ V; U% M6 M/ h; F0 t) O
<TRACK>4 a1 ?, ~8 [3 D
<TITLE>Five Hundred Miles</TITLE>, h% g1 G/ ]' N. x5 }9 R( L$ r
<ARTIST>Justin Timberlake</ARTIST>
1 g" W# ~1 q9 [: V8 G<ALBUM>Inside Llewyn Davis</ALBUM>
8 Z" |) d: J& p7 J( b: s& l t<COUNTRY>美国</COUNTRY>
' N* `$ w! ?/ G- M; m7 n3 F<COMPANY>华纳唱片</COMPANY>
) e+ x% n. e. \. o3 D9 l<YEAR>2013</YEAR>4 f# k4 t$ L( ~; ~6 w
</TRACK>5 s# u4 L0 I0 |5 x6 a2 w3 b; ]# m; O
8 ~7 G' f: ~5 c5 Y& p8 D9 m' S+ F% W
<TRACK>1 P6 l* I6 Y2 g
<TITLE>演员</TITLE>/ j1 `" T' Q/ R9 |5 T) g d
<ARTIST>薛之谦</ARTIST>" F9 F" u3 r% {: @- o
<ALBUM>绅士</ALBUM>
4 @8 T1 L# n3 h/ S7 d; J3 w<COUNTRY>中国</COUNTRY>
% L' y3 q5 |' W% r( L1 I: y! U<COMPANY>海蝶音乐</COMPANY>
7 ]# {" z. c' ?; c' d: i- j<YEAR>2016</YEAR>
. t, ^9 W1 ]6 t8 C+ ^- J</TRACK>9 T2 b; {* K% i$ I. y5 s l4 c a8 r4 V
3 T, ` L( Y9 |* J( {<TRACK>1 p( ?+ X( u, M+ F
<TITLE>Numb</TITLE>/ Z# i' P+ |: j+ E7 T. `
<ARTIST>Linkin Park</ARTIST>/ P! y0 E, J) e5 V* n
<ALBUM>Meteora</ALBUM>
' D' s) {' U( l$ ~* K<COUNTRY>美国</COUNTRY>4 G* B3 n$ e2 {& Z& ~3 d: |: V1 s
<COMPANY>华纳唱片</COMPANY>' b) a) g; p' H
<YEAR>2003</YEAR>. c# V, J% _0 b* `8 J% g
</TRACK>
( a$ v& ], X! S7 K- `3 R0 F& x0 W/ u, a/ t) \' ^% S* Q9 d
<TRACK>/ T! B& h; e* F2 p* n# u# |; ^
<TITLE>给未来的自己</TITLE>4 ~, U$ u" l' I4 D
<ARTIST>梁静茹</ARTIST>
7 O* Y/ ?; i/ L9 P+ Y<ALBUM>崇拜</ALBUM>
4 q! L% S' o Y4 }<COUNTRY>马来西亚</COUNTRY>
" V! C* z1 l# b- o7 w' |<COMPANY>相信音乐</COMPANY>* w& a! |; ?' n5 G+ F# w% Z
<YEAR>2007</YEAR>9 q( x5 ~/ Y1 \" s" W; G Z) l: U
</TRACK>
- v* Y- `; u0 z: Y# J: y# B5 f7 Z) t' p/ u: r
<TRACK>. V! @3 U0 [/ C, p( `8 x, v
<TITLE>The Monster</TITLE>
6 M! C R" Y: e0 D<ARTIST>Rihanna</ARTIST>7 L: }* g( z4 [9 |; J
<ALBUM>The Marshall Mathers LP2</ALBUM>- G* L6 o/ R5 q8 W% E1 |
<COUNTRY>巴巴多斯</COUNTRY>. b) m0 o+ f: N! s8 C5 _
<COMPANY>环球唱片</COMPANY>
3 h! j: [; H' s( `( C. [<YEAR>2013</YEAR>+ E- T: ~0 x9 a
</TRACK>
' j: ~$ m0 s' Z, |* }. d$ K2 e# f3 {$ U3 Z1 c
<TRACK>. ?" i' Q3 h8 L5 Q
<TITLE>我终于失去了你</TITLE># k( u* v: N$ _: I
<ARTIST>赵传</ARTIST> b0 P8 W3 { j. t/ G2 S/ ^
<ALBUM>我终于失去了你</ALBUM>/ f# F; P# ^0 u+ O$ p9 C8 {# v' P7 u: m
<COUNTRY>中国</COUNTRY>
' z4 \# |& b. a9 Z, Y" q {<COMPANY>滚石唱片</COMPANY>
5 a$ p1 i) v! T# x N" `2 L<YEAR>1989</YEAR>& V3 A" ^' b( t" M+ \
</TRACK>
5 G) U* Y1 i7 q2 _ |6 k. e M+ [
<TRACK> k3 ~5 a& F& o5 |1 n8 X) {
<TITLE>Main Titles</TITLE>+ ?- {5 x5 V8 s
<ARTIST>Ramin Djawadi</ARTIST>
+ b0 m6 B! T) q1 }1 X9 T5 K<ALBUM>Game of Thrones</ALBUM>
) y2 M7 [0 T' J# C- E' N<COUNTRY>德国</COUNTRY> q D" {5 t1 r- S- n3 o7 T
<COMPANY>索尼音乐</COMPANY>3 u) o) p: x8 }9 A
<YEAR>2011</YEAR>' q# Y! r; T3 l9 B
</TRACK>
- z. `" ^# _# N" K: b% O$ K; e; ?; ^& m6 }5 F
<TRACK>3 b' P# q$ Z' \( b j8 L% K
<TITLE>传奇</TITLE>5 u' ^/ m+ q' B
<ARTIST>李健</ARTIST>$ A4 N, T! `2 E" y" Q4 X! {+ f
<ALBUM>似水流年</ALBUM>
- \# | s9 T8 D% m3 ]" Q<COUNTRY>中国</COUNTRY>4 n: a; b1 r0 K* u$ {) o1 B: L6 ]+ c/ L( y
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>5 E5 F, {5 Y$ Y% H# |' h! }
<YEAR>2003</YEAR>+ T; b! ^) W M9 Q, m. e$ \
</TRACK>+ }- f0 n: h. |4 v3 a; x7 `
9 {- D" L# r5 \; s& p7 n3 Z0 o( U
<TRACK>
' E+ F- S8 R0 M7 H1 @( r2 q0 v- t3 s<TITLE>完美生活</TITLE>
2 S* I. H8 q5 ^0 m: E6 ^<ARTIST>许巍</ARTIST>& S" o+ m8 Z) c% M
<ALBUM>时光漫步</ALBUM>1 v1 \: O- d1 x4 ~8 M4 U' z0 u
<COUNTRY>中国</COUNTRY>- E, g9 d4 B0 @5 B8 ?) i
<COMPANY>金牌大风</COMPANY>
7 N* i$ r' C5 I4 ]# R<YEAR>2002</YEAR>! K2 S, A, O" X: E e7 y
</TRACK>- r, k B% V/ B# l. \+ s% Y
</CATALOG>[/mw_shl_code]
" ~, |- y8 {5 E* P& p |
|