使用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% \& f5 \% ^( M" X
  table += "</td><td>";' L1 U$ `# x! Y* w& V: R
  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;6 [8 v, f0 I) n0 p6 K7 _( d
  table += "</td></tr>";0 ^4 v6 w, [+ E
}
- `- ~! r  C- f5 |6 u
# C8 i% N- d% Z/ w, i9 v5 k. Mdocument.getElementById("demo").innerHTML = table;+ [: n2 e. K) s0 N
var i = 0;, d3 v$ a) V: i" L5 ?1 i4 F5 M2 d
      function next() {
3 K1 P. ]0 b0 G" g% }( Y% @          // 显示下一首歌曲，除非已到达最后一首
8 J/ z6 f  N7 I2 p. d# M          if (i < x.length - 1) {
) T' T4 }6 \- `/ |' @$ w             i++;5 [/ Y+ ?. I( n+ v
            displayMUSIC(i);
; R! I/ W$ h  G$ D8 t) E( F) L          }4 ]8 \3 E% S. T
      }! ?3 M8 D1 e/ S4 W2 t! p

% H0 V1 b( W  H' {! e3 n       function previous() {- Q6 I' u( t9 C$ F6 @- N' F' |2 V8 n# J
         // 显示上一首歌曲，除非已到达第一首
* M8 Q* X1 t! E, a          if (i > 0) {
& m" m$ B# P$ a( j- x% L6 i             i--;
) U0 `' }9 R5 W' |# F5 Y             displayMUSIC(i);
5 C* l" w# H$ e$ w          }9 G. _4 [5 e6 J
      }
( W9 [: H6 @- I2 J6 O; D% T  x- t+ h+ ^
      function displayMUSIC(i) {
9 Z$ L" ~3 n( l! }: V2 f          document.getElementById("showMUSIC").innerHTML =) r1 u$ ^1 \8 r5 n6 P1 Z
            "<ul>" +
+ C/ n- `  d6 W" P+ l) ]             "<li>曲目：" +
# g7 `; `* {7 f( F2 a7 A8 G8 ^             x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +0 A) n% p. B7 D" R* E, H9 `
            "<li>艺术家：" +
& O+ Q; e( a. M* s+ t( W" a- A) g             x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
! U5 x) |" s5 C8 r             "<li>专辑：" +( n% d9 @' \; B0 r+ f8 t8 r& e
            x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
2 P' M% K  ]0 \             "<li>国家：" +
+ m7 T* I3 J1 U             x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +; C* h( D0 u' v2 @4 i9 T5 V+ G% H
            "<li>公司：" +
/ g( @+ @( B/ c9 ]             x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
, }0 H1 u: z6 ?) Y2 i# a8 r( c. c             "<li>年份：" +7 g, L$ d% D3 k! D, @
            x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
0 g0 u7 J2 N4 K5 p! t             "</ul>";0 ^8 u$ \' J/ F' D: A
      }
: y- l6 ?1 c/ e: E0 i/ R8 G/ R  O( z* l1 D3 d" A1 ]
      function loadDoc() {
: Z6 O0 g7 V5 G- t$ O
) E* Y- M8 f; \) X7 y/ k4 H! }          document.getElementById("demo").innerHTML = table;# L& X  R" n  O. P" p* t
      }1 e+ B5 S+ d5 j" r3 t

# p, ^* l: \$ @ </script>
1 ]) _# f* r# B" F- x4 p9 I) f! F3 O( ]% J+ A
6 N1 [  h$ B* Q
</body>
( V% x/ T( Y$ _) G5 c% s5 I7 S+ H2 G$ }6 m6 I: \! m! n# u
</html>, H) B7 m. q4 d$ k" N/ J# x7 S

: U- T3 ]3 g8 e4 ]8 R/ L, }0 f9 [2 r* Y, @. b7 H6 X% ^# B% Q4 ~
[/mw_shl_code]
1 v6 l7 z# l; H! K/ w8 S4 O3 g. q
1 y" Y6 R. L6 V' \. p* H
- Z# B, [  _5 H
0 x0 U. K0 _& A8 u3 b" CXML文件, n1 _* D* a) _3 C" N" e* i

* n0 ^1 f: y* _- g2 c& m5 K[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
9 Y8 g% _4 O' y+ L1 _+ i5 q- c) l6 d<CATALOG>
. K% t+ A+ @$ ]5 W0 z% V3 G3 d<TRACK>
& H4 ]8 J, v% f" m  O<TITLE>再见</TITLE>
+ |  x& O4 j/ B; Y<ARTIST>邓紫棋</ARTIST>
! u" ^0 [$ E' L0 L1 P, l+ {<ALBUM>新的心跳</ALBUM>
+ E$ P& V0 d+ r) p( `$ A( c<COUNTRY>中国</COUNTRY>
3 q. O: s- Q, C; E0 ]<COMPANY>邓紫棋工作室</COMPANY>
" X8 D6 V1 G& M# ?1 U* `+ j- K7 i<YEAR>2016</YEAR>$ I& h. z- h+ f8 L1 [# L% I" W
</TRACK>" C5 j; N) e8 J8 E$ s! t3 x

. {- L7 D  a6 B, y1 I4 z<TRACK>. Q8 ^7 h8 t7 G9 J4 Z. s
<TITLE>All I Ask</TITLE>
: w) T# z6 [) p/ Z! X  _4 m3 N<ARTIST>Adele</ARTIST>6 ^9 ?  Q9 M( S, I: w) m) M. u% X
<ALBUM>25</ALBUM>
# M. v! g3 T0 O/ w* J/ T- r<COUNTRY>英国</COUNTRY>
- u* U6 t3 o7 T, U: b+ R/ @; o<COMPANY>XL Recordings</COMPANY>$ X% R+ _6 Z3 U5 j2 A6 Q  ~
<YEAR>2015</YEAR>
8 V( }+ `; r9 M! y. O</TRACK>
. t4 Z7 K" L6 ?! S' m3 K# I  C" O* I  X
<TRACK>7 |" a: V2 K1 n7 E' e4 p% O
<TITLE>之乎者也</TITLE>
$ |& {- F2 K- t0 H7 `1 t9 q# B<ARTIST>罗大佑</ARTIST>
: ~' ~' J4 b5 D- c' @" ?<ALBUM>青春舞曲</ALBUM>
  p. r2 q. M: c. Z- c, C, o<COUNTRY>中国</COUNTRY>- W5 |; H7 w( ]
<COMPANY>滚石唱片</COMPANY>
( s: t+ d& Z% H+ }4 {<YEAR>1982</YEAR>
  _1 b. M) v* S$ l/ s</TRACK>6 p+ J' x6 K7 t7 c4 n9 G7 m$ `
# z/ p; k. V3 _
<TRACK>+ _6 e0 `+ b3 B( r) C7 I' z
<TITLE>Never Be Alone</TITLE>
5 a) j) J: e4 A: P<ARTIST>Shawn Mendes</ARTIST>
+ c, J7 `+ Y! _+ M7 W<ALBUM>Handwritten</ALBUM>$ ]  ^/ _7 K4 ~/ S1 N3 x
<COUNTRY>加拿大</COUNTRY>1 S8 }) ^$ ~7 E2 T
<COMPANY>环球唱片</COMPANY>6 M  m# P3 w$ R5 K
<YEAR>2015</YEAR>* h& G8 H, Z& {7 g3 _
</TRACK>& ^* @: y7 D) {: N3 J# H! f  y

% X: k/ w. c4 S6 _- B<TRACK>7 \. s$ \% o8 G9 I: @# h
<TITLE>慢慢</TITLE>+ T: R: X( a9 c8 \
<ARTIST>张学友</ARTIST>
2 L* t% u$ o" z( _% ?$ D* G: O5 X<ALBUM>忘记你我做不到</ALBUM>
7 q+ `* R: J. p* }) N) _* U<COUNTRY>中国</COUNTRY>
3 N4 B- G. P" T<COMPANY>环球唱片</COMPANY>% Y3 I: K1 f1 H
<YEAR>1996</YEAR>
) k/ n: k* ^6 T* d. B3 ^4 D</TRACK>
- Z5 u; O2 r) \& [- P& R' t  Q, o1 o! N; F  d' Z
<TRACK>
# ^  Q# z' e( Q<TITLE>Complicated</TITLE>8 g. {$ i- E) E" K( l4 Q. t  v$ B
<ARTIST>Avril Lavigne</ARTIST>: h2 x/ o% a( W7 M5 X* N
<ALBUM>Let Go</ALBUM>+ @. o2 N% ?5 {9 [
<COUNTRY>加拿大</COUNTRY>8 X* S& S$ d: e& Y9 z" e1 a% q
<COMPANY>索尼音乐</COMPANY>, h. @/ Z5 Y  H8 ]4 q! F
<YEAR>2002</YEAR>6 B( o6 m9 S- e
</TRACK>' j& Z' e; p' ~( H. F8 j

% n' O& C4 X/ t<TRACK>
<TITLE>三生三世</TITLE>% f) j  ]  ^/ F7 g1 @6 ~) h. ~
<ARTIST>张杰</ARTIST>: Z1 i9 w! j1 u* h
<ALBUM>三生三世十里桃花</ALBUM>
  i% o+ |' e8 ~4 p$ c<COUNTRY>中国</COUNTRY>6 v/ O$ c  M$ |8 D  F0 K% D
<COMPANY>仁溪音乐</COMPANY>& i- W/ B/ D0 U' z
<YEAR>2018</YEAR>
9 X; U2 q' M1 i5 `# E# i* u! e. ]</TRACK>- r# }, F' W3 o" _
/ f" I# b# q5 C+ _9 v: I4 j
<TRACK>1 m7 Z, R2 T6 f4 z. g$ r
<TITLE>Five Hundred Miles</TITLE>
  D. v1 l$ G( \! N5 S6 ?2 e6 \& h<ARTIST>Justin Timberlake</ARTIST>
  P: y* f" V9 B  }; L" G" {4 ]<ALBUM>Inside Llewyn Davis</ALBUM>
9 O4 }9 y' C; D, s, Z2 F/ I% O* v<COUNTRY>美国</COUNTRY>
& r& P: l$ p. Z# C) s, {<COMPANY>华纳唱片</COMPANY>
/ m" @3 f2 K2 Y2 q8 e<YEAR>2013</YEAR>
$ s, A0 o) T0 n, L, z9 O. p" j</TRACK># i2 k) A/ s) ]" `. D
$ Q# v1 J9 c$ y
<TRACK>
/ q! S8 M7 [: {; _' H: D5 v/ ~9 d<TITLE>演员</TITLE>
  K; T9 {( J! ]<ARTIST>薛之谦</ARTIST>
8 n$ [+ f' W1 r; @; t  C9 Y<ALBUM>绅士</ALBUM>
+ |6 q: o. t/ x<COUNTRY>中国</COUNTRY>+ I' q2 Y, z- d0 I9 N1 ^
<COMPANY>海蝶音乐</COMPANY>. J/ S  J1 P4 s- x8 e- b$ o
<YEAR>2016</YEAR>
8 m, F7 s# s" M# `$ n4 \/ t" T! s</TRACK>
: S7 X# `' t9 H1 b! [7 \4 R- A% s4 y/ S% ^
<TRACK>* s' u4 R# ]+ {; }: X$ z
<TITLE>Numb</TITLE>
. e( J& o4 w$ x, C<ARTIST>Linkin Park</ARTIST>
, W: {" k7 z, w0 Y6 \0 w<ALBUM>Meteora</ALBUM>/ X- H- _! W+ x" [+ Q. l
<COUNTRY>美国</COUNTRY>
7 c5 S  W/ M0 j" }! M7 j<COMPANY>华纳唱片</COMPANY>, a. ~- Y: ^+ A) z3 g- z7 k* v6 D
<YEAR>2003</YEAR>' h. w  A0 x4 l7 l% M+ L
</TRACK>
# M- z5 O  H  u8 t5 r: d
" v; r0 V1 G4 y2 F1 A1 ~- x. R<TRACK>
8 X+ t$ S# V* L0 N<TITLE>给未来的自己</TITLE>
8 ^. v" v( |1 D. P) k/ V* r8 j, Q& w<ARTIST>梁静茹</ARTIST>
- z2 v! |8 Z' R<ALBUM>崇拜</ALBUM>1 U& I/ e: ?2 q4 c# v
<COUNTRY>马来西亚</COUNTRY>7 ]4 g) u/ b. b
<COMPANY>相信音乐</COMPANY>
7 f3 u8 A5 \9 }  Z7 R/ j& A0 H& R<YEAR>2007</YEAR>
# i, G# w0 `9 g1 g! {  H</TRACK>
. l7 m7 R& D2 ^$ c. s2 q8 H( Y% X7 x7 M+ r$ j( i' T$ {/ |
<TRACK>5 x# g6 Q" c1 {8 }8 `
<TITLE>The Monster</TITLE>
5 r% }) a4 b2 @: L1 X0 T<ARTIST>Rihanna</ARTIST>4 ~9 R  i  u0 E+ F/ G3 L+ v
<ALBUM>The Marshall Mathers LP2</ALBUM>
0 I: t0 i* L! c, W<COUNTRY>巴巴多斯</COUNTRY>* T* J  K6 t) K; L# x. O  H
<COMPANY>环球唱片</COMPANY>
2 G& p! A) n1 K0 u9 \% V<YEAR>2013</YEAR>' p$ a" z2 }& z3 y  a2 g
</TRACK>
- z8 D2 I6 o% P& W( C  a3 ?. G- K8 {
<TRACK>$ V, C5 Z3 B' O" h6 K
<TITLE>我终于失去了你</TITLE>* H  Q3 h, m2 N$ ~( u) t9 T0 B
<ARTIST>赵传</ARTIST>
; X' T# ?" r6 l  K4 v<ALBUM>我终于失去了你</ALBUM>
9 ^; v& @) U2 W5 I<COUNTRY>中国</COUNTRY>
0 j& T( C; e7 l2 x# W/ f* Z  J# G<COMPANY>滚石唱片</COMPANY>- A7 u% V3 ^. b3 m+ L9 C/ R0 z) v
<YEAR>1989</YEAR>, w7 q% Z) n8 s: A" t
</TRACK>
, N! J( M$ n- l* U7 V2 F: }  R3 i6 A# c4 K) `% l
<TRACK>, F' ~4 B/ `) o
<TITLE>Main Titles</TITLE>
  s$ X- q' @: x0 Z( P  w. S1 ^<ARTIST>Ramin Djawadi</ARTIST>+ I% N, r/ ]# f, p% v
<ALBUM>Game of Thrones</ALBUM>) C% W7 \' {" H
<COUNTRY>德国</COUNTRY>9 d- Y% n0 T4 @9 z$ k" m
<COMPANY>索尼音乐</COMPANY>; W7 R1 Z* x( {; [- i( h# T
<YEAR>2011</YEAR>9 ^- p+ l5 l- H# L2 S
</TRACK>
# r) M5 f' g, s4 R4 B8 r  |* q2 f- h
* n1 M& l$ r( |<TRACK>9 ^# Q0 X- D& k! V1 v
<TITLE>传奇</TITLE>2 X$ _3 G/ k: w  W2 z4 N
<ARTIST>李健</ARTIST>2 N$ H- l- [; W2 v
<ALBUM>似水流年</ALBUM>
8 N7 \# a2 Z+ A  E<COUNTRY>中国</COUNTRY>' s  P0 b( `8 o7 m' l5 @' v
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
" ?$ ^4 V% F3 f6 y<YEAR>2003</YEAR>
+ N& S9 r  Z% X2 E% n) U% d</TRACK>
6 k+ E* n. T- Y/ E+ o3 d: p
% x0 k4 e( D6 s9 G6 z9 {) l<TRACK>
0 x- ]! A) L2 v<TITLE>完美生活</TITLE>- D: J: O' ?$ U* X$ s
<ARTIST>许巍</ARTIST>+ @6 h- }3 j; g8 Z! x
<ALBUM>时光漫步</ALBUM>$ c3 v, y  \+ U
<COUNTRY>中国</COUNTRY>
) U2 \+ a5 b+ E, \2 H8 c. T$ X<COMPANY>金牌大风</COMPANY>/ o5 \# u4 G* O& j
<YEAR>2002</YEAR>
! G4 l! P) s5 S" ~5 _</TRACK>4 h, ]; t% _3 H' h
</CATALOG>[/mw_shl_code]0 ^( r4 y" B5 g7 ~& A

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

热图推荐

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

admin 楼主

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

发表回复