|
|
请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！
您需要 登录 才可以下载或查看，没有账号？注册
x
3 ~' r1 w: @( F0 [
9 i; c2 X0 g6 R& [) l7 O
+ ?& H. F' z& M: ~4 Q[mw_shl_code=html,true]
) _$ q, N0 h- ~% z8 N$ D( r- [; ^7 g# V5 J! z
<!DOCTYPE html>/ W6 y# \: ?$ ^- h# G
<html> a' u; k V6 }9 Q. x
<header>6 M8 H& z9 x) _/ L) f J w
<style>
# B* O8 I T* Q: ?9 }' b) Q# } table,
& |' |5 m; G6 O B; t+ B tr,3 V, _ |0 O3 F0 I' I) ]$ ]: H0 X$ n
th,% V9 m6 m% T( v
td {9 h$ S" d4 v' g1 I9 k* y. D7 t
border: 2px solid rgb(20, 59, 230);
. n3 l) t1 S8 `6 r( {: f- G% | border-collapse: collapse;
- C) i2 u' Z$ v- n. q5 O5 K text-align: center;% p5 ]- T& k3 G$ X% N
}2 r5 k$ a, F- S+ F$ N8 x/ a6 c
- y8 L' |: ]1 v. U7 g th,
5 o8 B3 n) _0 h v+ W" }$ S td {* M1 V1 H& P# w! b" p3 j- `: g
padding: 5px;
- Q" @) n. ` @0 @$ _+ |) Q! x1 d }
2 f- e1 w, m1 E </style>4 J# V: ~% A. k' Y" `
</header>4 e2 F0 `. C+ V: K4 c7 M+ Z( }) l
' ~( \& Y" ? \( S# s* l1 t+ ?<body>
. @! L9 ^! t [. M/ @ <h1>xml http request object</h1>$ V1 n3 j$ x: A, _1 X1 W$ x
<button type="button">Display Music</button>
\5 n0 u) p4 g6 E! P <button type="button">Previous</button>5 Y6 R' ~) Q9 O' P, o) m
<button type="button">Next</button>( w% c7 ^3 g: R" ]
<button type="button">get my music list</button>" V, D8 S/ b: h! I
<table id="showMUSIC"></table>9 r- s3 m9 ?) u: P
<table id="demo"></table>
2 q1 f' Y, I5 V, ]9 @ <script>) A K: A* ~' _* r3 \
+ T6 g) t0 }! H, ]8 ^/ r var x, xmlhttp, xmlDoc;" _ A5 V% `) c; H/ R* y! H
2 R, r7 f) O: @. |% y xmlhttp = new XMLHttpRequest();
3 w! v; B7 i. |0 [: j xmlhttp.open("GET", "/files/music_list.xml", false);
- j- S' o( o+ V$ x. y6 D$ Z xmlhttp.send();: P0 x) y A0 l0 w b
1 W4 [0 G3 v6 x4 D8 p xmlDoc = xmlhttp.responseXML; 5 C3 c8 P9 Y6 x) F; j5 f
var table = "<tr> <th>Owner</th> <th>User</th></tr>"& a. Q1 ^* E& u6 a8 H
var content = document.getElementById('demo');0 B& p+ N- Z' O6 m# }
var x = xmlDoc.getElementsByTagName('TRACK');- g' z; S7 R0 }. ~# s$ a$ ?; A
for (i = 0; i <x.length; i++) { , ]$ Z8 O0 O9 Y
table += "<tr onclick='displayMUSIC(" + i + ")'><td>";" \; `( ?7 w. X
table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;; ?% M o8 s) P1 u# z. t
table += "</td><td>";
, J; U& I6 ]& w9 a table += x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;+ p* t: u V2 E" N3 L" h
table += "</td></tr>";! j3 U1 }9 H a( ]; W p1 a
}) H' e. j- i5 j0 ~( D
1 G5 h9 E% s c0 U
document.getElementById("demo").innerHTML = table;
$ J, {2 k' B- R+ Zvar i = 0;/ i3 A: a0 j9 ~6 m& _8 `% c9 G
function next() {
* p Y0 G; ?$ y0 c // 显示下一首歌曲，除非已到达最后一首
$ _4 V- d8 E+ ?. s! T( V4 T if (i < x.length - 1) {
% u) U( Z. z* L" X! g! w1 x( i i++;
+ {( u( \5 [$ J. A$ m0 f k displayMUSIC(i);- i( ?+ F( w" U. d* a3 {
}
! u( R5 i% X. F7 _ }0 ^9 w5 g. }4 v9 o% x4 p
+ z m+ P" u9 w. j6 M9 r$ D* E+ x9 J0 ~
function previous() {! j; |9 p3 `" z
// 显示上一首歌曲，除非已到达第一首) T8 y# }8 g* D4 `
if (i > 0) {
# N' k/ p& G- R; F8 I/ k i--;. [. ^9 \- x) f8 j
displayMUSIC(i);% D4 E! d, u* R3 j0 u
}$ k. L+ [; }, }% J8 _
}
* ~2 e, V2 C5 n+ I* l" d8 Z
: ?% c) y n0 U: P" ?6 I function displayMUSIC(i) {
/ l: {5 i9 ]# F# S6 @# d document.getElementById("showMUSIC").innerHTML =
$ u+ r& M4 @! d Q; r "<ul>" +# o& [, Z6 Z" F9 X& W
"<li>曲目：" +( W5 I9 @" S( o7 t
x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +& G7 Y/ V' l$ H: A
"<li>艺术家：" +
0 y! ^3 v( @/ S6 p v) A4 s3 w x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
; B" V' j* {$ O3 a, H5 C% T, `: M P "<li>专辑：" +
/ J$ `4 T: _! j3 Q; C; n x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
; q$ V5 N+ U' j8 z$ x7 F( C "<li>国家：" +
+ Q0 T+ `8 K7 u1 A x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +- E+ U" d8 e9 h" h. R0 \; G
"<li>公司：" +6 N5 R$ [# f) [% P" v8 G& a% H
x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +/ }* Y( ~. M( O* _) F# k
"<li>年份：" +( l0 N& U d: g
x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
+ R# m+ z& R% B9 [. u9 N "</ul>";
, D" K' \; p3 F; I* ^6 I }
& y0 [& Q# w" V: Q, i0 I* ~5 O9 F, r% o8 Y% W; e& f7 y+ W" d
function loadDoc() {
r5 A9 ^5 |+ O, o1 M; u E2 d$ p
- E' N4 }- A! v6 R1 H2 F document.getElementById("demo").innerHTML = table;
6 ?- k8 {9 B, s8 [. ?) u }
; E; ?# o0 L2 S7 Y6 w3 K9 D8 t# p" ]9 e* d7 F" g/ c
</script>; h- A# r3 i: @, ~; I/ t
H8 U' ^ n. u' I6 e$ v- d8 J t- r% w/ J7 j+ j: t! b
</body>
$ E! j" o+ W& ]) j6 C, j; X0 R, f( x! \4 \% ~) C3 {
</html>. ]. y! Z L# l# J/ s, ~1 J
7 e' {$ P2 M* ]) J" w4 M' N
) I/ D2 r/ @5 N4 [8 T' e/ S$ H/ y! p
[/mw_shl_code]* X9 I0 K2 I( [$ u- P
, N$ [ }' a- A
4 I5 m! i4 f6 G- {7 W0 f6 ]& j( U2 \4 V; s5 Y F; E
XML文件
3 ~! p. x. {. W. t$ N1 i' N) S9 m- Q1 e3 K
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
# p% d P, \# N( E8 J7 N<CATALOG>( y0 g4 g0 A/ Q! |3 T
<TRACK>
( l* x0 u7 Q4 y `4 w% O [+ d<TITLE>再见</TITLE>
8 U3 ` \! R$ f+ @3 h6 r<ARTIST>邓紫棋</ARTIST>- B# G9 m' @' Z. n5 l' K
<ALBUM>新的心跳</ALBUM>
8 Q5 o; U* \2 ]# ]<COUNTRY>中国</COUNTRY>$ M) A8 R, b( M
<COMPANY>邓紫棋工作室</COMPANY>; c: l$ l) a- p2 S' e
<YEAR>2016</YEAR>% @. D v* A2 n8 ^" u/ E4 p2 C
</TRACK>& u7 u$ u0 l! I3 K' z" J
0 F. L; L7 l4 \) P. l8 ?& h) H
<TRACK># }2 o, l+ B l3 n
<TITLE>All I Ask</TITLE>
1 g: O7 y }7 Q& H1 A" d( Q<ARTIST>Adele</ARTIST>' A9 E) N1 q8 d5 F. O" n
<ALBUM>25</ALBUM>
5 w4 _# i# {" {5 f2 D( Q<COUNTRY>英国</COUNTRY>
+ s! w2 y) d w5 c0 `: q<COMPANY>XL Recordings</COMPANY>4 A$ D3 y; s; X$ E( k' W# Q9 _
<YEAR>2015</YEAR>
o/ ?. M# U- C</TRACK>- N( X) b$ N+ a+ ^0 a
2 U, p* K8 b( P, K0 U& I/ M<TRACK>
0 C/ q+ F6 h" o# U: X- Q/ b<TITLE>之乎者也</TITLE>
; L% E/ ?# z# F0 x/ S<ARTIST>罗大佑</ARTIST>, v4 a F$ p3 f0 i
<ALBUM>青春舞曲</ALBUM>* h" a, ~+ `' \1 k) Y
<COUNTRY>中国</COUNTRY>
* Y, r7 j' M; z( I) V<COMPANY>滚石唱片</COMPANY>) H! q0 g* H' w3 y; O6 v& F: j
<YEAR>1982</YEAR>
5 t5 [: _) z. v- w3 ]</TRACK>- H1 d( N8 Q1 e# C2 _8 n7 f
. P" M# c2 G& T! O! n1 t! F, M
<TRACK>& s1 i4 {' \# `8 ~6 D
<TITLE>Never Be Alone</TITLE>
) n* A! S% y0 J- |: q b<ARTIST>Shawn Mendes</ARTIST>) M0 P$ T; `, B8 m# Q! }
<ALBUM>Handwritten</ALBUM>
# U: \$ V2 G! m2 V: s* c8 _! b. O<COUNTRY>加拿大</COUNTRY>
0 E7 `! ^$ B% h; E' Y T<COMPANY>环球唱片</COMPANY>
5 }+ y" _1 K# b<YEAR>2015</YEAR>
& Y( I* `- \2 R! }. q4 G</TRACK>/ D4 K8 o# j) v, L
8 K5 u2 Q1 j1 ?
<TRACK>
) K9 a! f P# w$ s<TITLE>慢慢</TITLE>; C& Q! n3 |2 U8 R+ L7 U
<ARTIST>张学友</ARTIST>; i! m; q; ^- @& a: M9 B/ |- O
<ALBUM>忘记你我做不到</ALBUM>+ J+ b5 M, }, d# f
<COUNTRY>中国</COUNTRY>. ?* S5 |" ?' }$ l V6 ^! k
<COMPANY>环球唱片</COMPANY>
8 M* j& `7 J* _. s) p<YEAR>1996</YEAR>4 j7 c7 N) }4 ^3 L6 e
</TRACK>
6 _: j( {4 B. |# ^3 T6 k/ y$ l* H, \) k: T5 X0 y
<TRACK>
. } d5 t- [& T* `5 }! k+ B4 r1 s<TITLE>Complicated</TITLE>
1 [0 E; Q* ^ r! h. |1 ^<ARTIST>Avril Lavigne</ARTIST>8 [. V/ T. Z- m; U$ I
<ALBUM>Let Go</ALBUM> m0 n) r# a. `& q1 z: g
<COUNTRY>加拿大</COUNTRY>
( D2 S4 ?. W: i: W; L9 X8 Z<COMPANY>索尼音乐</COMPANY>) I0 `9 E9 l2 Z9 t' c2 C
<YEAR>2002</YEAR> P- {7 }7 N% b! u* J* L
</TRACK>
: n; x6 U9 r9 o
! [2 n* P: i, u; U1 r5 k<TRACK>
: o" {4 A* z( h& V9 N- l$ n<TITLE>三生三世</TITLE>
. G! B4 G# |6 o9 k0 X8 `# h2 p L<ARTIST>张杰</ARTIST>; Z$ G' }) p* C T, Y; C9 t
<ALBUM>三生三世十里桃花</ALBUM>. W* z9 R1 {2 E1 ~# t
<COUNTRY>中国</COUNTRY>
2 o: O% B, `) y4 G) t<COMPANY>仁溪音乐</COMPANY># [% a$ V# l. c, E2 E
<YEAR>2018</YEAR>
% r* I, X6 o$ I7 {+ _2 R8 M5 j</TRACK>* f! q- o; Z' X' i
1 U6 f8 Z5 P7 n( R1 D, Y: ^6 F
<TRACK>+ v* J6 L, d/ C0 ^- q M
<TITLE>Five Hundred Miles</TITLE>5 c( C% k6 P5 O2 X9 i& B
<ARTIST>Justin Timberlake</ARTIST>: T' a* y0 O2 F& M
<ALBUM>Inside Llewyn Davis</ALBUM>
K8 r7 Y7 }; w<COUNTRY>美国</COUNTRY>
3 m1 {' k# Q, F. f0 G<COMPANY>华纳唱片</COMPANY>( ~" [5 f" g) ^
<YEAR>2013</YEAR>
& ?3 Q1 G' f1 W' {2 s</TRACK>
& I6 N5 G: U+ D8 _, h5 {& F
' c+ r& z2 d/ U% u( p<TRACK># E8 F9 g% T' ~: m% }9 T3 M% d& O4 s
<TITLE>演员</TITLE>6 E1 v+ }& K: {& O
<ARTIST>薛之谦</ARTIST>
# Q% Y$ _8 A+ j. s c) X. H<ALBUM>绅士</ALBUM>
7 {' C. @/ Y: q9 K2 K; ^. a<COUNTRY>中国</COUNTRY>, B7 f5 F- [4 k# T
<COMPANY>海蝶音乐</COMPANY>% h: |$ t' s; V# ^& S4 F- c
<YEAR>2016</YEAR>
" u1 E" P" G" {* r" t- v [: @</TRACK>$ F9 N& J/ c$ `( Z
: {% H1 b/ N8 L. m0 C& P<TRACK>0 A5 S7 f S [! x) r! f# ]
<TITLE>Numb</TITLE>
: ?1 {5 V+ F6 E<ARTIST>Linkin Park</ARTIST>
% ~: F1 t a# O9 \) @ N<ALBUM>Meteora</ALBUM>' S9 ?% r2 d9 @" }1 `0 `
<COUNTRY>美国</COUNTRY># U9 p2 d5 t) B& M$ R
<COMPANY>华纳唱片</COMPANY>
6 U. v' A- k" m9 m" Q<YEAR>2003</YEAR>
! m+ ^' Q% m2 a9 a. b& [</TRACK>! P& Q3 E7 ]$ w
- `3 z s/ f) N) O# o<TRACK>! g- D0 D9 f6 ]
<TITLE>给未来的自己</TITLE>
/ N5 o' P$ Z4 m d+ a( K<ARTIST>梁静茹</ARTIST>$ D1 k U; Q$ V. I
<ALBUM>崇拜</ALBUM>2 l: N, w2 Q& |. J0 `* p. @
<COUNTRY>马来西亚</COUNTRY>
0 E: W3 z5 n9 E9 h h<COMPANY>相信音乐</COMPANY>9 ~7 f- m' _. C7 t5 l
<YEAR>2007</YEAR>- Z f' @; J" P! w
</TRACK>% E4 D6 k. y5 ~4 x1 U- c
, v2 U# V# w3 z0 |5 V i& K<TRACK>6 g$ r- i! Y2 K; ]$ P
<TITLE>The Monster</TITLE>1 G s$ ?# I5 ]: z( _' h0 E6 M
<ARTIST>Rihanna</ARTIST>& t8 T( g$ V+ E8 k" a" [
<ALBUM>The Marshall Mathers LP2</ALBUM>
6 Q4 i4 _9 g9 A$ j7 b<COUNTRY>巴巴多斯</COUNTRY>
* h% j0 e$ g' w! Q<COMPANY>环球唱片</COMPANY>) E6 B! J- O' h2 H+ T9 z! N
<YEAR>2013</YEAR>' M8 M0 D% U& x9 u
</TRACK>' c. P: W( a4 G
- n& a* @: A; L A# R! K" v
<TRACK>: ^% i3 `) G# W
<TITLE>我终于失去了你</TITLE>
' G' L: w( N2 v! t3 R<ARTIST>赵传</ARTIST>
6 Z# q; u M( y( D i7 M$ l; U<ALBUM>我终于失去了你</ALBUM>/ i7 r) N% w: R+ t9 ]2 D& j
<COUNTRY>中国</COUNTRY>
' N" x# X) y/ ^* s8 h, w) v. w<COMPANY>滚石唱片</COMPANY>
% h" A) L' e6 f7 k3 J- W) ~- @<YEAR>1989</YEAR>/ W8 ]; J( L' N8 U& r6 @+ X
</TRACK>, s! P: i$ r& }/ N! q$ ]
; m* r% e' d. T: A<TRACK>
+ _- J$ U% j' M% ?0 o4 T! w<TITLE>Main Titles</TITLE>
) o8 W, p/ t! f. N) [<ARTIST>Ramin Djawadi</ARTIST>) \3 A0 v6 o' C5 Q# l( w* b
<ALBUM>Game of Thrones</ALBUM>3 }# T% e2 t9 L! b4 |0 h
<COUNTRY>德国</COUNTRY>
3 C+ C @' n/ N2 @6 w) H<COMPANY>索尼音乐</COMPANY>* V( q4 J% C# D7 A/ j7 N' z# [
<YEAR>2011</YEAR>
& ]& j' a2 c6 l) \% E9 ]8 d</TRACK>+ q8 v" `- e* g3 O5 r, P
5 X' E% k# a2 {<TRACK>$ r$ {2 [; ~) H; c; y# Q4 P4 S
<TITLE>传奇</TITLE>$ g/ w& e: M/ i' @
<ARTIST>李健</ARTIST>
. g/ p0 l4 }; @2 | f1 K5 q# \<ALBUM>似水流年</ALBUM>$ b* f6 Y$ a: G4 Y1 S
<COUNTRY>中国</COUNTRY>7 I2 W8 n# N+ z$ w% i
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>( [8 Y7 T; j# |
<YEAR>2003</YEAR>) H6 {/ _2 y9 Z
</TRACK>. V2 \: \, K: h! p
9 h3 i5 ?# \7 J3 Y& Z/ ?1 U<TRACK>
; e+ I3 ~4 G" m, @8 |0 Z<TITLE>完美生活</TITLE>2 A# k! f* k, Z+ ~
<ARTIST>许巍</ARTIST>5 i# a7 R) O% s3 h! C3 R
<ALBUM>时光漫步</ALBUM>
$ N, V, H# o0 l+ o6 d4 x: ?<COUNTRY>中国</COUNTRY>
" H$ ~6 R2 ^) C# W% J. C<COMPANY>金牌大风</COMPANY>
0 X {& e5 D, r# h5 a5 N<YEAR>2002</YEAR>
. ]! O2 t- ?8 i</TRACK>
0 B( E& `. l- t% E" e$ V" r</CATALOG>[/mw_shl_code]* X2 S6 L7 ^. l
|
|
|小黑屋|手机版|PLM之家-企业数智化转型工业软件学习平台
