使用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;4 D- L7 R0 G: D/ Z% B1 \
  table += "</td><td>";
6 R6 V- O; S; J8 m- p2 z  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
. |9 f8 ^9 W) \7 S! i  table += "</td></tr>";. R' R5 X7 q3 T
}* |3 i) v# W' y0 Z8 A

0 w. @5 @: e9 idocument.getElementById("demo").innerHTML = table;3 z2 J( ^  G" |. l& f2 O' V
var i = 0;
  Q6 u- n' l: D; n# C( }0 w2 g       function next() {
- B3 ]$ L5 B7 x# t; V" L4 J' ^          // 显示下一首歌曲，除非已到达最后一首
0 q* W$ P7 Q$ l' I* F          if (i < x.length - 1) {
6 O( M8 R  |8 _! i8 x8 p7 ?# M             i++;9 A5 j$ `% `1 r5 ]
            displayMUSIC(i);
8 d8 l3 r7 a! P7 u$ U8 i: A% G          }
' z, t9 t  T$ t; c& i       }4 ?* M- T* U' j' y* \

. h7 s$ E" a+ D. [. O1 l- @& @       function previous() {$ _/ K/ s, n0 I
         // 显示上一首歌曲，除非已到达第一首
" k* x- e; i5 ~$ C5 r' i+ g3 [          if (i > 0) {
2 r6 S, A4 p& w9 f' B6 Q) K: N             i--;4 D( g8 o6 t3 E& ]5 d
            displayMUSIC(i);
; V3 ^" b4 @! \+ l% J          }$ [8 s$ i" Q; `  n$ L
      }
# [0 v8 A# k/ t6 _, @7 Z3 Z( J) y5 r5 O% @$ h% ?4 Y) O; k. a
      function displayMUSIC(i) {7 p& ~9 K# C4 B4 F- T
         document.getElementById("showMUSIC").innerHTML =9 x2 ?( y  r; k4 K8 ~) |' b& }/ l
            "<ul>" +/ b; E' ]( K4 o6 o
            "<li>曲目：" +- t  x! {8 x: j3 V! e+ q
            x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
" G) b' \0 p- A8 e; j9 u             "<li>艺术家：" +
# S5 Q" A+ v4 w2 C( w( M( r             x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
, z( m1 }: H, Q7 ]' M$ n             "<li>专辑：" +
& _" ~4 g/ V" s" l; j/ ^' A             x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +& I6 Z$ s: y0 M# f- d
            "<li>国家：" +
# [. J8 P6 n' r9 d+ A6 I             x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +4 w$ \: n: ^% A$ @
            "<li>公司：" +) T, c+ X& q: n6 C2 I/ A- s1 f
            x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +0 x2 j; s* x  [$ T1 Y3 c* N
            "<li>年份：" +& k  j" l( U1 |  R
            x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
  x' G; Z! e9 e1 j             "</ul>";6 J- [  g# z; z$ q8 A9 O& k
      }
; ?3 q! |1 q$ i# }" r8 }
* W5 W, T7 Q; {$ u6 t       function loadDoc() {! }: u1 X, w# h6 U5 a4 A+ C# ~

' \' y5 r. D. J" M          document.getElementById("demo").innerHTML = table;" j9 h/ B: {( @8 r
      }
; }6 E/ v) U! @' H& Y3 m7 L
6 ^3 g) E$ x/ ]8 J1 T </script>4 g* b: _* U/ I4 J/ D8 c  i: n
( e& N# {* Y0 F$ p8 v, ]2 h

* j( v( R, y1 |</body>
0 _; [/ S! c& ~& z3 Q+ Q# h3 G9 b! |& V4 }
</html>
( N- W9 `9 p' X0 S2 Q9 C8 a3 M" R

4 M/ ~4 k7 \7 G/ Q[/mw_shl_code]
- s6 w. K; D$ @5 @5 i* w2 H( ^6 b, Q2 r: W7 ]$ T1 _: e) Y

9 Y1 |, @4 P  E. U  W7 l! G1 w9 u+ \! Z( _( ~( B& p
XML文件$ R/ Q- K1 h2 `" j
" q! T" k! ^1 w
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
7 |8 c9 c* U) Q: o' |+ b<CATALOG>
9 A- S$ V& x7 m" q<TRACK>
" |3 B! x+ Q2 H8 g) u- P8 k* @<TITLE>再见</TITLE>
& b0 ]) g7 B( h6 F$ d% ^<ARTIST>邓紫棋</ARTIST>. y! L5 S+ _: K9 p' K) u. z0 k. l
<ALBUM>新的心跳</ALBUM>" ^( B0 E, o0 {) s
<COUNTRY>中国</COUNTRY>8 g% m& k9 Y9 {- R+ f0 {
<COMPANY>邓紫棋工作室</COMPANY>4 ~8 Z! T0 j8 Y1 Z9 `; n
<YEAR>2016</YEAR>4 U! A  `& K% q& j6 ]! t
</TRACK>/ Z2 N6 r6 h  D# `' j

' D  |) N( k5 s<TRACK>6 H* C% D8 {7 u
<TITLE>All I Ask</TITLE>
; N" I' E1 A2 k( M3 x& x<ARTIST>Adele</ARTIST>! }% z" y( }) W
<ALBUM>25</ALBUM>
3 V3 Z/ U4 {2 B  G! N7 v8 y<COUNTRY>英国</COUNTRY>
: _2 W' |2 @. f+ u8 c6 N% ~, J<COMPANY>XL Recordings</COMPANY>* S' F$ s! k, u' @! K
<YEAR>2015</YEAR>' p. c+ F2 L# e/ s- m: j2 K  M
</TRACK>
* p9 W) g3 D( ~% |" C3 j7 x
( t4 |# w- N# x  z  ^<TRACK>
( b9 X3 z' V% k<TITLE>之乎者也</TITLE>
% w" \9 y* x: V5 ?<ARTIST>罗大佑</ARTIST>% ~* m5 p' E$ z/ P/ e
<ALBUM>青春舞曲</ALBUM>
0 U2 }7 ~% Q: ?' c. L; E% u; W' C<COUNTRY>中国</COUNTRY>
' `) [& V$ N2 o/ x<COMPANY>滚石唱片</COMPANY>- |/ U' X8 \* R8 y6 _
<YEAR>1982</YEAR>
- W; b3 V5 u& {& A( K</TRACK>+ k& _5 t3 _6 U7 n( f) S0 C) l

: l/ O) _9 P$ k<TRACK>
- |+ k  o8 l  b0 _9 t' k: Z<TITLE>Never Be Alone</TITLE>
1 |; B5 r8 ~) d  N7 a# f' m<ARTIST>Shawn Mendes</ARTIST>
6 ?- n2 X! y+ e8 X<ALBUM>Handwritten</ALBUM>) J% u4 ~. z2 C: `. q% C; ~$ S" q
<COUNTRY>加拿大</COUNTRY>% Q0 B. T! @- |( w. R
<COMPANY>环球唱片</COMPANY>
: C" y7 i& [) k" S7 _# c<YEAR>2015</YEAR>
# ?$ L% c  q" N0 L0 i8 {3 Y- O% q</TRACK>
: V  f1 S2 p9 l* M2 L6 _& A& n6 D
<TRACK>
4 ~+ |7 o5 o6 b" _* F% W6 H<TITLE>慢慢</TITLE>
& w( @! ?4 m, P( M) M3 A9 Y' q. ]<ARTIST>张学友</ARTIST>
7 B+ u! j4 e2 D' y0 F3 P<ALBUM>忘记你我做不到</ALBUM>
+ o. t; t7 T4 h1 G0 L<COUNTRY>中国</COUNTRY>: ^) q$ t6 w9 w$ i6 H3 D
<COMPANY>环球唱片</COMPANY>! o1 p/ K; ]& t) P1 ?" Y* x
<YEAR>1996</YEAR>
* n8 v" W2 o. y1 R5 M</TRACK>& o0 x( Y; h: Y! m" E1 T

$ _) v+ y) f3 L3 Q) x1 i<TRACK>
8 h, l/ v4 `, q, m2 ~<TITLE>Complicated</TITLE>
  g% g8 ^0 |7 J7 L& r+ {/ n<ARTIST>Avril Lavigne</ARTIST>. ?; H5 d  p9 m$ H) X7 K  k! d
<ALBUM>Let Go</ALBUM>& R6 Y* h1 O/ ^% ~4 {4 ]
<COUNTRY>加拿大</COUNTRY>
' q, S! t+ e& U2 E% n<COMPANY>索尼音乐</COMPANY>
  P3 i' ?( h6 ~+ w" T1 [<YEAR>2002</YEAR>
: H1 Y# y/ i8 J& N+ j3 G</TRACK>
3 Z& k& B0 l% L4 |; A
& @0 n3 M7 P" P8 t: ~<TRACK>
% @& p3 N- r8 o9 d<TITLE>三生三世</TITLE>
5 z+ {' c, U4 G; ]- F+ v# H1 O<ARTIST>张杰</ARTIST>
& k7 M, Y4 q, M<ALBUM>三生三世十里桃花</ALBUM>& T2 i& n7 B$ t# I- k2 i5 N9 X
<COUNTRY>中国</COUNTRY>5 q$ e  N7 y0 l
<COMPANY>仁溪音乐</COMPANY>
7 E& y# @0 s& \- {  T! e<YEAR>2018</YEAR>
: s0 ]' p- C5 k3 D* |/ l</TRACK>
4 S9 g9 A$ P. E5 t$ X8 v
+ w; s+ O; I1 V<TRACK>, ]- @3 j# u+ H' s4 _
<TITLE>Five Hundred Miles</TITLE>
0 J. f, @: M4 ^2 d4 p$ V  L- v3 r/ i<ARTIST>Justin Timberlake</ARTIST>
$ h" ]; w; \  Z' W9 P<ALBUM>Inside Llewyn Davis</ALBUM>
# [& O& z" ^% A9 d# l& O4 ~<COUNTRY>美国</COUNTRY>
# E( S( H% @  W% w; k+ k$ |& J' b+ P<COMPANY>华纳唱片</COMPANY>
3 j  d0 i7 n3 r* J( |. }<YEAR>2013</YEAR>
7 H" |. [9 _, Q; d</TRACK>4 w% }% Z  k7 M% ^+ C
! t; I3 R* t  z* F) L: p
<TRACK>( a6 f! J4 Y4 E1 w, {
<TITLE>演员</TITLE>
# n9 X* O  U8 `# Z<ARTIST>薛之谦</ARTIST>
: Q5 X* p1 ^0 U7 U5 _6 o5 |& O7 ^<ALBUM>绅士</ALBUM>
" N& H  j0 e3 R, j<COUNTRY>中国</COUNTRY>
0 ?# q9 j. M. E0 Q<COMPANY>海蝶音乐</COMPANY>
. q% R; x+ M1 i, C: ]# `$ @<YEAR>2016</YEAR>" K1 M2 ]9 ?; [4 j& l
</TRACK>
. \$ W# l! |1 m6 K* U- P
' L! ~7 ?* f6 {! O<TRACK>! X8 J9 \. Y8 X2 E6 ^% T8 _
<TITLE>Numb</TITLE>
0 Q# R. ?& C  k( c) m<ARTIST>Linkin Park</ARTIST>' b4 ~  E6 Q$ p* J6 K9 Q
<ALBUM>Meteora</ALBUM>
% a2 D- c" \8 ?$ s1 W<COUNTRY>美国</COUNTRY>( p0 N. l! a: i6 T5 E
<COMPANY>华纳唱片</COMPANY>3 Q  ?: F- l. m0 b9 t" r
<YEAR>2003</YEAR>) m6 x2 ?0 p1 G$ F
</TRACK>2 z1 y9 ?' v. E) x; E
7 y* w# o9 y! v, P2 W4 ~/ G- l* o7 Z) o
<TRACK>1 J4 B1 I' P5 E( k9 W7 _* b
<TITLE>给未来的自己</TITLE>
0 C' @$ g2 b+ ~/ \9 T& T0 w<ARTIST>梁静茹</ARTIST>
# I8 x& Z; Z# [2 x<ALBUM>崇拜</ALBUM>- z. L: @/ F8 v" V* l
<COUNTRY>马来西亚</COUNTRY>
$ g  J2 L; W0 Z: Z$ n* r, j0 K<COMPANY>相信音乐</COMPANY>9 s7 K( o: _: H  H
<YEAR>2007</YEAR>
: f- J. m) a% @1 e/ d$ u2 n</TRACK>
; A* y1 N9 G: x' i/ Y
8 c0 b3 ^& J+ d0 Q5 |, S<TRACK>
1 F& l5 v3 n: b' t! k7 y# m! m<TITLE>The Monster</TITLE>: k, S' z; y7 B( h8 ?
<ARTIST>Rihanna</ARTIST>* i, R- c5 \6 ]) y1 r- i% t4 i
<ALBUM>The Marshall Mathers LP2</ALBUM>; `1 r4 r* r. }9 \5 u
<COUNTRY>巴巴多斯</COUNTRY>6 @$ L6 t# N1 w4 K3 q, |
<COMPANY>环球唱片</COMPANY>
9 y) a9 c' @$ K4 p3 C. L<YEAR>2013</YEAR>( y  D1 b1 c/ X4 u$ `
</TRACK>
6 }! \! S7 }/ a+ }5 G5 k) |. c% C, k1 p9 ]% w) ~
<TRACK>
* I8 p! B  \. [2 m; n<TITLE>我终于失去了你</TITLE>0 D9 O! Z: Z+ G2 D% B
<ARTIST>赵传</ARTIST>
* c+ c/ U; w! p& R# D+ J8 n1 P<ALBUM>我终于失去了你</ALBUM>
4 H3 {3 i/ s: V<COUNTRY>中国</COUNTRY>
; u' H/ @3 N: g1 b9 S<COMPANY>滚石唱片</COMPANY>4 h8 U1 |/ {, c- |" G5 l
<YEAR>1989</YEAR>9 _  L* s4 p. v3 w' c8 Y
</TRACK>
3 f( Z, |4 h% M+ w+ l. ^- g( {7 X7 D5 X, W$ c
<TRACK>
- H' h5 y4 Y8 R5 G6 A<TITLE>Main Titles</TITLE>
3 _6 L0 G  T3 Q, M3 U! k<ARTIST>Ramin Djawadi</ARTIST>3 P9 j! ~# n+ h4 ]6 m% ~$ s5 q* W
<ALBUM>Game of Thrones</ALBUM>
& r4 [7 M" U/ x9 m  c+ j<COUNTRY>德国</COUNTRY>
8 Y: s7 a. L) v- G<COMPANY>索尼音乐</COMPANY>
; z0 d& b- W6 s7 W9 u# E, T* F<YEAR>2011</YEAR>: [1 h3 J7 n- k
</TRACK>2 N4 g; _, X8 h0 y

8 j- ~. s! j9 V0 F<TRACK>0 t9 l8 {6 u) {0 c5 i- f
<TITLE>传奇</TITLE>3 @- x& ]' q( e& h
<ARTIST>李健</ARTIST>
! h5 }" M, ?, Z& p<ALBUM>似水流年</ALBUM>
6 O5 e6 j. P0 T0 N! O<COUNTRY>中国</COUNTRY>* c% N* \! k2 M; S2 i! A3 S' \
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
# K8 _) d6 z. p; _<YEAR>2003</YEAR>
: U  t0 p+ P6 \5 f$ p: z</TRACK>
3 h* W* C, k! k8 y; _, i7 u: G: M% P& ^; P7 `
<TRACK>
& ~* N) e( A$ _4 n& |$ L<TITLE>完美生活</TITLE>3 ^9 ^7 [1 U* K+ o
<ARTIST>许巍</ARTIST>  g3 g$ J! K; K2 ?. s* \. g% K
<ALBUM>时光漫步</ALBUM>
+ K) k$ ^" h' ]( |+ O<COUNTRY>中国</COUNTRY>' x# \7 x7 N& q/ h: w0 P9 D5 w  p- ]
<COMPANY>金牌大风</COMPANY>! p0 ?# \# z! e/ b+ p
<YEAR>2002</YEAR>( @3 k4 s. r* ]8 x( E$ a9 i3 c
</TRACK>' F6 F! Z+ i( w( ?* U6 z3 X
</CATALOG>[/mw_shl_code]3 _) J: w/ r" o# G7 @

PLM之家PLMHome-工业软件与AI结合践行者

热图推荐

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

admin 楼主

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

发表回复