使用Ajax读取xml文件

admin · 发表于 2019-10-29 20:10:50

请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！

您需要登录才可以下载或查看，没有账号？注册

x

[mw_shl_code=html,true]

<!DOCTYPE html>
<html>
<header>
<style>
      table,
      tr,
      th,
      td {
         border: 2px solid rgb(20, 59, 230);
         border-collapse: collapse;
         text-align: center;
      }

      th,
      td {
         padding: 5px;
      }
</style>
</header>

<body>
<h1>xml http request object</h1>
<button type="button">Display Music</button>
<button type="button">Previous</button>
<button type="button">Next</button>
<button type="button">get my music list</button>
<table id="showMUSIC"></table>
<table id="demo"></table>
<script>

      var x, xmlhttp, xmlDoc;

      xmlhttp = new XMLHttpRequest();
      xmlhttp.open("GET", "/files/music_list.xml", false);
      xmlhttp.send();

      xmlDoc = xmlhttp.responseXML;
      var table = "<tr> <th>Owner</th> <th>User</th></tr>"
      var content = document.getElementById('demo');
      var x = xmlDoc.getElementsByTagName('TRACK');
      for (i = 0; i <x.length; i++) {
  table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
  table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
) f& Z, p; ^: j3 y# L9 `  table += "</td><td>";
6 U, m( \! P, y; B& N% `+ A& O. i  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;, a2 c4 ?0 |4 C# w* V* Q
  table += "</td></tr>";
4 [4 a" O* \1 ~}% D1 F1 p. }* f( F9 W

% j+ }* F2 H7 A. z" T% M" jdocument.getElementById("demo").innerHTML = table;
, o, T! T! _/ ^9 S/ h, K4 x! [var i = 0;
4 p% I% G  I0 a3 Y& n! n" x( h9 f       function next() {6 ~4 {& a% x- z! x8 K5 B
         // 显示下一首歌曲，除非已到达最后一首
9 a3 q' \# q# D3 m          if (i < x.length - 1) {) C5 }6 X( V* H
            i++;
4 x' S; f  k0 v% O             displayMUSIC(i);; ~! Z) o  F/ ?
         }
; u! P5 u- e# x' Z+ g8 G       }" I3 k, H% X+ }! v

: V. L& n" f2 J, d& e! C+ t6 {* J' C       function previous() {
+ m9 c  ]6 a. A, T7 C          // 显示上一首歌曲，除非已到达第一首( k0 K+ P# l- }6 C0 o! L% ]. s2 ~
         if (i > 0) {
2 r& H1 \) p: y  L0 ?! j; R             i--;
2 G8 ]) _; F* E' M             displayMUSIC(i);9 `1 O: c9 r5 G  [& u- G" }
         }
7 z* o( y7 N" |" F+ q       }
! |" w6 \/ }# w- l+ d. c7 W8 x3 V6 f2 d6 P$ u( e
      function displayMUSIC(i) {# s" a- B! k9 g8 \8 N
         document.getElementById("showMUSIC").innerHTML =
4 l, p) L* h  G& _' \1 x# X             "<ul>" +! Y  \6 G0 o; x7 m7 l
            "<li>曲目：" +3 ~$ ^4 c( X# [
            x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
' W4 f) `$ F3 T- M3 d3 A             "<li>艺术家：" +
1 {% F! o# X1 v3 X( O: \5 ~             x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
% g2 B! p" i$ b  }             "<li>专辑：" +5 `+ z$ ]7 Z3 W# o( h
            x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
- k. |$ [* J8 _  Z- W& y! t1 J% D             "<li>国家：" +
3 c! y! J; Z  d7 s7 g             x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
! m( y1 X, w3 T5 q             "<li>公司：" +# I# n' w! K" b
            x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" ++ K6 z+ k, _, M. V+ K# g4 [0 j
            "<li>年份：" +
# F5 Y: F( r# `/ t             x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
+ L: |2 X6 u5 O             "</ul>";1 @# p. Z) D1 M  A5 h6 s8 o- S" O8 M
      }
  B8 r! ~1 e0 p: R5 k1 g8 m9 a" X$ j) j* Y9 V: \# F% g8 S4 p& n% t
      function loadDoc() {
6 j7 C9 p+ j5 W+ m: {/ b9 Z6 n& @# I% C5 T
         document.getElementById("demo").innerHTML = table;
3 o$ V& N# y# y9 |       }
: ~3 J0 O3 e2 {: E- H
( _. d6 C; B7 K6 z- m6 I </script>4 `" }# e% S. A8 d
% ?, \+ r. l0 e
/ L* g4 ]( B5 }/ q7 O( R* a1 |& [3 H
</body>" G; X! Q, k1 M$ ]: e  W

7 R1 T! q* o* J, u2 r& X, W</html>
" e: x8 U, @! ~7 [" J! k8 s% C+ \3 A0 I9 h8 W% L; D4 y+ N
# f, q. Y" I' A8 U* R4 o
[/mw_shl_code], k8 m+ q) L" p% {

  x9 t( {/ A! y* v$ g
; I4 b- `- f! p3 C
0 r5 i* `$ ]' k- ZXML文件
: l- R4 L) [/ b0 f6 z% p" D2 F! A4 W& k6 R/ L
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>) d! j' q8 h" r' H, G
<CATALOG>9 ^; x" T3 r  \1 i- ^
<TRACK>6 \% s, v9 e& u
<TITLE>再见</TITLE>- V# l+ x8 T8 \5 K5 z5 w
<ARTIST>邓紫棋</ARTIST>
8 e2 y/ F  W7 r9 p0 g- g<ALBUM>新的心跳</ALBUM>
9 r4 |: F, a( U1 D3 d2 g. e<COUNTRY>中国</COUNTRY>
/ x3 a7 v$ \" {+ Y' m$ k<COMPANY>邓紫棋工作室</COMPANY>) V3 b. C3 P7 |! e
<YEAR>2016</YEAR>
# V. f" B! j1 W0 |1 |2 K& S</TRACK>" R  d6 r5 U9 f2 U# |% z+ E3 a
6 ^1 r  x6 }3 U- K+ ?1 O
<TRACK>
9 e) P0 [: m4 {<TITLE>All I Ask</TITLE>
/ O- X0 L/ f$ B5 `% J* |<ARTIST>Adele</ARTIST>
1 F# R+ X' q  f+ S2 \4 ]<ALBUM>25</ALBUM>
7 C' ]9 K4 C: m9 r! V( v<COUNTRY>英国</COUNTRY>
, m% ]6 r2 a' g& V# D3 n8 i. A% R<COMPANY>XL Recordings</COMPANY>
4 ]$ o6 w1 ]6 _2 N$ Y<YEAR>2015</YEAR>
$ S3 W5 C* f& z! J</TRACK>4 a2 \3 j8 E4 n6 b/ W
: A+ X0 o1 R/ o. c/ X4 ?+ Z4 n: A
<TRACK>
8 \  d+ E9 R, N  d) W<TITLE>之乎者也</TITLE>
8 V: G' o1 Y  ]0 }# q4 ^! Z<ARTIST>罗大佑</ARTIST>
, i9 [2 x( ~7 [- a% r8 Q7 V: f<ALBUM>青春舞曲</ALBUM>
6 j  y) v" Z$ a& @4 G<COUNTRY>中国</COUNTRY>. ]5 C: f0 A# X9 d; c
<COMPANY>滚石唱片</COMPANY>+ g* i8 [, X- X  h/ I
<YEAR>1982</YEAR>
- O9 y+ V. @( G( y</TRACK>3 y& A  G7 ?/ i' |1 x* ~0 W
' X0 z7 H" D: V) w  ?
<TRACK>
" Z1 R. S% _- ^. t$ Y8 U& e<TITLE>Never Be Alone</TITLE>
: a- U; `9 ~1 Z: D, j0 |) w<ARTIST>Shawn Mendes</ARTIST>
7 V: U8 E1 u& ]<ALBUM>Handwritten</ALBUM>7 Y6 V' y" ^+ C- L* n! a
<COUNTRY>加拿大</COUNTRY>  m3 l, D$ Z- y( B! ?
<COMPANY>环球唱片</COMPANY>
. s+ p3 T5 l9 `9 ]- c7 H/ P& |<YEAR>2015</YEAR>8 ?2 T6 w! N. r
</TRACK>
7 Y5 ?! r9 @1 Y, A: j/ w
# ~! w! f) u2 _5 \<TRACK>& ~) o. A3 W/ z* R4 O
<TITLE>慢慢</TITLE># X7 i, z+ [- p% E. \( o
<ARTIST>张学友</ARTIST>, O# T4 Y5 n4 n1 `* F( z' t
<ALBUM>忘记你我做不到</ALBUM>2 q7 q0 J9 C) c) M% _$ X( Z6 B/ h, D
<COUNTRY>中国</COUNTRY>
$ Y5 [6 _/ a+ \<COMPANY>环球唱片</COMPANY>7 H) P  O- r3 y1 D& x# P
<YEAR>1996</YEAR>6 p; o* Y" }& R( l) k
</TRACK>
$ m, n; D9 L) Z4 _. ^& a( |; ~0 }: v5 {; b7 g
<TRACK>5 R+ _4 C' E4 ]
<TITLE>Complicated</TITLE>4 }5 g7 B, H7 r+ P8 }. ~8 [# t
<ARTIST>Avril Lavigne</ARTIST>
! b* |" R7 r! T  g4 P& J8 k<ALBUM>Let Go</ALBUM>
# n1 l8 c+ P9 S! [* w$ i<COUNTRY>加拿大</COUNTRY>7 P" y9 Q, b; t. j$ a; O! `
<COMPANY>索尼音乐</COMPANY>' g4 W: E. ?- G# I
<YEAR>2002</YEAR>
/ y) h' `9 z) @+ l, F</TRACK>
; i7 ^9 Q; I& ]4 \( F) P% q
5 _3 b5 C. ~- ^6 u# W<TRACK>4 g2 S( k4 Y5 e
<TITLE>三生三世</TITLE>4 j* L$ @) T/ W3 M( M9 m& @
<ARTIST>张杰</ARTIST>
/ A* @' [6 w! P/ K% C  J+ I<ALBUM>三生三世十里桃花</ALBUM>
  C. J- F# L" o& I9 k# }<COUNTRY>中国</COUNTRY>' Z( R% }, X4 H0 n  C- K
<COMPANY>仁溪音乐</COMPANY># K2 r% f  I& z* I
<YEAR>2018</YEAR>
* H  z/ o$ d7 {  r: T</TRACK>/ ?, T$ n% b% B/ S* e  O
) Z" @- {  R, \  d7 X  Q
<TRACK>
1 c- `+ H9 ^* l<TITLE>Five Hundred Miles</TITLE>
7 e. l3 D0 L0 G- W; g<ARTIST>Justin Timberlake</ARTIST>2 \4 F. b, K$ Q" J) v
<ALBUM>Inside Llewyn Davis</ALBUM>! Z( f& e: j% ]7 i/ i6 S7 H
<COUNTRY>美国</COUNTRY>
+ x9 l5 B5 ?# `<COMPANY>华纳唱片</COMPANY>
; m: U1 ~% b& V, D, P: i<YEAR>2013</YEAR>
' N; F0 Z9 n( a</TRACK>$ E% m) K. V2 z/ k

: H4 |. X( |9 u5 }# W( i6 Q6 `<TRACK>" B; S% I7 U. D/ L% |
<TITLE>演员</TITLE>
8 \$ C( B9 J! d  ~# Q<ARTIST>薛之谦</ARTIST>
% D9 b* w" K% s; \. U<ALBUM>绅士</ALBUM>6 J( X# C: B' c- d+ t# y
<COUNTRY>中国</COUNTRY>
! ^$ z5 a1 j9 w) X<COMPANY>海蝶音乐</COMPANY>5 a9 W  H+ ]4 P- ?; c) N3 j
<YEAR>2016</YEAR>
9 @7 D/ G) y% ]& K# g! E</TRACK># _  r- k  @9 D* Y$ d* `
0 a* w  `# ?9 z
<TRACK>
; w! V5 X; r; ?9 [<TITLE>Numb</TITLE>
" ]3 R: T7 k2 z<ARTIST>Linkin Park</ARTIST>
8 V6 z0 y' E  Q! @6 l: T6 T( D<ALBUM>Meteora</ALBUM>6 n6 i8 \! S  l9 K6 I; p7 i
<COUNTRY>美国</COUNTRY>& ^+ ~) w; C' I  p
<COMPANY>华纳唱片</COMPANY>
5 W5 @3 m, T! x, K9 n' E<YEAR>2003</YEAR>
# q6 I$ i: y; V* ~7 ?  x5 X</TRACK>
$ C. z2 b8 T. I- g
5 C& s. d1 @, D' G& _7 \; W<TRACK>  n% {/ }: G7 e; u
<TITLE>给未来的自己</TITLE>' h1 o, \4 O8 R# T/ H
<ARTIST>梁静茹</ARTIST>
$ [3 Z2 o0 t/ _* d3 w2 P! V<ALBUM>崇拜</ALBUM>, D& D% G- K$ k% O3 U
<COUNTRY>马来西亚</COUNTRY>* ~6 _: U, A6 U4 R" P
<COMPANY>相信音乐</COMPANY>% Z1 ^, v/ i% r9 G! ], F4 e
<YEAR>2007</YEAR>6 X6 x, H: @: x$ E- {1 u; A' d
</TRACK>
0 v8 j1 I" N  O/ h9 q( d  f; x2 Y) H7 c, Q
<TRACK>/ w* q0 B1 {) W- I( m
<TITLE>The Monster</TITLE>
0 H1 e' x4 U1 D3 w; h( r/ H<ARTIST>Rihanna</ARTIST>
, U0 p: N2 d; p$ g  m4 A<ALBUM>The Marshall Mathers LP2</ALBUM>, V5 z. I! d, X* [! Q( \
<COUNTRY>巴巴多斯</COUNTRY>; R  x& M% U  j" f+ S( g% B1 L/ m8 `
<COMPANY>环球唱片</COMPANY>
8 C' T6 Q" I# `/ W6 k2 r<YEAR>2013</YEAR>+ ^2 O8 T, z+ D2 t6 M
</TRACK>+ K; E( ]6 c0 }5 O6 o) t

5 z8 F# B# H% H: s<TRACK>
( Q, a$ D# f/ s! y, c/ @<TITLE>我终于失去了你</TITLE>9 e6 |% l" b/ Q% `
<ARTIST>赵传</ARTIST>4 f7 Y* H8 A0 {+ Q
<ALBUM>我终于失去了你</ALBUM>
; Y' l  w6 j, w5 [( G  b  B<COUNTRY>中国</COUNTRY>. k& b4 n# ?6 s
<COMPANY>滚石唱片</COMPANY>
! R) k& O8 [1 |6 L<YEAR>1989</YEAR>
1 s: P; X4 @9 e7 V8 O</TRACK>+ t5 k2 V, j. y1 v" P

$ ?0 m! X, K0 ~( G. a1 E3 `8 f<TRACK>! R5 ^7 Z. k+ R% Z7 u8 h
<TITLE>Main Titles</TITLE>; h6 A! \( }) C  C. h2 v2 R: y# Z
<ARTIST>Ramin Djawadi</ARTIST>0 ?$ X2 M, N0 t7 x
<ALBUM>Game of Thrones</ALBUM>2 t7 x5 s: L% d( ^
<COUNTRY>德国</COUNTRY>
  n0 G1 t, A, |# P/ _<COMPANY>索尼音乐</COMPANY>$ \- @8 N. B0 g- y
<YEAR>2011</YEAR>
3 j. [$ F2 r! G! p8 d- S</TRACK>; k" ?; C8 l8 [' A  z9 @
( Y9 D& x" b1 t- N# z
<TRACK>
6 y' G* ^; ^" t6 j, G<TITLE>传奇</TITLE>/ X; J2 H0 T( P5 N4 @
<ARTIST>李健</ARTIST>; _7 ~/ F5 ~( \3 Q+ I9 a
<ALBUM>似水流年</ALBUM>
' r& c. N& X7 x<COUNTRY>中国</COUNTRY>7 \: ?# c( D3 v" {& K+ L
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
$ g: H' J" A2 A+ k<YEAR>2003</YEAR>5 S' f8 B! c2 x: ?
</TRACK>, N8 M: X. s3 k/ g% O
9 G* W! @& X) z* k4 _
<TRACK>* x, f; z$ I3 |
<TITLE>完美生活</TITLE>  n; @' m  D: p6 A4 |! K
<ARTIST>许巍</ARTIST>7 j, \/ D! j1 ]- m
<ALBUM>时光漫步</ALBUM>1 n- Q( j& s: e! i* W+ _
<COUNTRY>中国</COUNTRY>1 j% }+ `% Y" g3 E8 z
<COMPANY>金牌大风</COMPANY>
" A" o) N2 ^4 @8 k/ E' X<YEAR>2002</YEAR>+ F8 p2 z. P" y* i% ^
</TRACK>
+ e9 Y4 ]- X- Z; Q</CATALOG>[/mw_shl_code]  V  [1 R1 e) C2 T# S4 m

PLM之家PLMHome-国产软件践行者

热图推荐

[前端框架] 使用Ajax读取xml文件

admin 楼主

请使用QQ关联注册PLM之家，学习更多关于内容，更多精彩原创视频供你学习！

发表回复

浏览过的版块