使用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;
+ o1 m5 Z, p/ ^( u  table += "</td><td>";7 g, V; u9 g5 k
  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;1 m5 q( j  P* _$ c! |( ?0 c
  table += "</td></tr>";4 Q3 d  m5 y$ u2 O
}+ J6 w) s3 v3 g# A2 e0 m

% h1 `( e* ]- C7 Rdocument.getElementById("demo").innerHTML = table;2 O; {" I0 K4 f( j8 T+ Q4 g
var i = 0;
% J1 }( v$ h, |1 Z* Q7 e       function next() {/ R3 V3 r- ^1 q/ U" f  X& z
         // 显示下一首歌曲，除非已到达最后一首4 x" x4 y3 s  x/ p1 C' s# _
         if (i < x.length - 1) {4 H2 q8 _! A' T/ |
            i++;' V; p8 A7 ]4 j/ Y, B8 c
            displayMUSIC(i);* `+ S; S' k  f: \
         }
) e# d! A) E! R0 i) S+ ^/ J. d       }/ J% v- f/ }3 O4 G7 K; O* b

9 R/ P5 s' j; T! |       function previous() {
2 x7 w+ }! a- ]6 o1 Z3 j# ^* l          // 显示上一首歌曲，除非已到达第一首
  i$ z# u3 y& k/ F- a$ A7 J          if (i > 0) {! }, w/ m- T$ T- Z
            i--;
, r0 a8 P/ b, v: c1 r             displayMUSIC(i);
3 h9 n* v$ u( Q/ Z          }
! d% b) R; `- m, g0 _9 s" `" V; I7 x       }$ V$ }% u8 B. @" |
) e- R( g6 k8 V6 ]; t: m
      function displayMUSIC(i) {2 j0 A, s$ ~( t1 e
         document.getElementById("showMUSIC").innerHTML =
- S1 ]2 j; E% K! k& V             "<ul>" +
. k4 J1 t: D+ h3 G( P/ x9 q1 m             "<li>曲目：" +
3 ?  u8 k; a/ L3 i, `1 p) y: Q             x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
; C5 O% i, S. W) [3 U- ?; j             "<li>艺术家：" +
& c) m' `. U' e# h4 @# h             x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
" t# @, X) t: ~6 x! {( A  a             "<li>专辑：" +8 B- G' D- |% }: n4 O. L
            x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +% |+ I0 Q& i4 m
            "<li>国家：" +
) A& ^% D8 M( b2 o- _             x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
$ L* c$ p% g* H* b% c# R2 u# D             "<li>公司：" +
' c: w" n6 V$ a2 S' F( K) G: }             x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +- y! u( i' Z5 F6 j, X3 z
            "<li>年份：" +
$ a) _# l3 Z' Q3 J             x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
6 |' W/ ~0 w7 i" @( A             "</ul>";
# Y! A% e, H2 |7 U- V. b       }
  B9 k4 ~- h$ \3 U' [: ?2 O
$ f; }8 C0 ^7 W       function loadDoc() {
, b$ V$ h2 `9 l5 X9 g( _8 m
         document.getElementById("demo").innerHTML = table;
3 k! t  M# M& q" o: q; K+ N       }
8 Y9 e. }2 G! d- q6 [7 {
; {( g: `' f' S0 R </script>, d$ f5 K  X/ O% h3 V- ^, O

" L: @/ L9 w% l& r  g+ s# B  Y. G; O+ ^% v) d  |& H5 |$ i! C
</body>
' }0 a% X: L: Y7 {" \1 F8 z  f
. ^3 W3 r/ U! u! y* G9 K- F: A</html>$ z6 t' C: b! e3 A6 X

: p( d5 p: n9 p* Y/ N8 ^: `4 \5 J/ K) d' _8 k
[/mw_shl_code]8 I- o& H; g4 L& }* @$ x4 G
7 D8 p, O: L& o( a
# E5 K% C; L/ \& j8 t: U* ?' I

5 S0 B' L' P+ lXML文件
3 b7 R1 C* O$ d* \  {! D3 k, j. ?# ?" h2 y9 @
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
- _1 h7 w' K3 ~8 _<CATALOG>
1 H- y( |, k4 U% @% z3 G8 K; `<TRACK>; b) W+ Q' N5 q' P, T' e4 b
<TITLE>再见</TITLE>* B) v( a# O4 N" H8 j9 z/ Z2 b
<ARTIST>邓紫棋</ARTIST>
" y: X' g- t+ o6 O; @<ALBUM>新的心跳</ALBUM>: o+ B8 I; v$ y- }" D  F* [
<COUNTRY>中国</COUNTRY>7 G% J$ c9 W1 d( u2 E$ V" k
<COMPANY>邓紫棋工作室</COMPANY>
! T$ X& V" f5 b. |<YEAR>2016</YEAR>4 H2 @( X& x# g& m1 Z' H
</TRACK>
! E8 _% E: U( B: @/ A( H5 l# |8 F$ z3 f% o) a
<TRACK>3 e3 q( f0 w; R0 V% N) u* O
<TITLE>All I Ask</TITLE>1 z) H  m8 _+ o/ K8 E  R, D
<ARTIST>Adele</ARTIST># C" I1 q+ b+ x  }) e2 s; g
<ALBUM>25</ALBUM>/ |; [2 A) D( o+ `  H
<COUNTRY>英国</COUNTRY>
; j* j( g( F2 r: s# H) V3 A<COMPANY>XL Recordings</COMPANY>
* T& o) c) @2 X; r4 o* }<YEAR>2015</YEAR>
: {5 Y9 J6 M) G& c- W</TRACK>
1 n7 c6 C8 X! O  o4 T0 W8 D/ z# Y" N0 t- L6 U  G2 A/ F% D) @
<TRACK>
! {6 |# ?( Q$ M, Y( M, s0 e<TITLE>之乎者也</TITLE>( U2 M2 P9 v) K
<ARTIST>罗大佑</ARTIST>
0 g- u- w) p+ l) S  ?( G<ALBUM>青春舞曲</ALBUM>$ n0 Q4 K# W) D
<COUNTRY>中国</COUNTRY>
8 \7 L7 t: s. c1 q<COMPANY>滚石唱片</COMPANY>
+ Q: S5 c4 K8 F  E<YEAR>1982</YEAR>3 G4 _# f- Y. j% ^# D0 g
</TRACK>; S# Y; c1 e+ t3 e- H( V

1 i: y9 i- x* x1 M; F3 T<TRACK>% x) e# O- O& b* c( i
<TITLE>Never Be Alone</TITLE>
7 [+ j% n# K  Y1 A: U7 K<ARTIST>Shawn Mendes</ARTIST>0 ~3 ]& ]$ T( q
<ALBUM>Handwritten</ALBUM>9 m5 T9 ?6 z4 v" A9 G/ d, _  H9 d
<COUNTRY>加拿大</COUNTRY>
! J& n5 P6 {! G<COMPANY>环球唱片</COMPANY>
) H! K+ X6 @7 U/ M: g% Q, P<YEAR>2015</YEAR>
1 q( u$ H  M9 v9 {& L. {</TRACK>6 o2 N- u2 m# |4 C* c

$ W" A+ q4 `& y0 Z. S<TRACK>
* H  A/ v4 `1 c<TITLE>慢慢</TITLE>; w8 j! Z: U  R
<ARTIST>张学友</ARTIST>0 {6 N4 U7 Z6 P* c5 n
<ALBUM>忘记你我做不到</ALBUM>
4 s% @0 @. p7 s7 ^3 X<COUNTRY>中国</COUNTRY>4 f6 N2 S5 ^& q" ^1 u! r- e
<COMPANY>环球唱片</COMPANY>
$ y  q" d2 a; n  c+ U0 v<YEAR>1996</YEAR>
1 }! q- j6 G3 L* e</TRACK>8 g( J# B( K4 F. F

; `6 k. A7 b- [9 g( s3 s<TRACK>" [. A8 C4 m; W: @( _
<TITLE>Complicated</TITLE>
$ p. l7 O" T, [: p: Y" E+ `<ARTIST>Avril Lavigne</ARTIST>
2 h/ H3 C# \, }0 x' s: C7 t<ALBUM>Let Go</ALBUM>+ x1 ]# _& \+ ~! I+ M* i
<COUNTRY>加拿大</COUNTRY>
" I' ]# N5 n' u9 z7 ^& X8 S<COMPANY>索尼音乐</COMPANY>
$ f+ b( X. @( B9 {! ~' K# u<YEAR>2002</YEAR>
9 W( {# @) q9 _! e  F6 O</TRACK>  N. w3 B3 n+ O, h
( P9 N$ G5 E0 G
<TRACK>
* M. Z' S* F1 _1 e<TITLE>三生三世</TITLE>
, R- R2 {2 \+ X; A<ARTIST>张杰</ARTIST>5 f7 ]& C, ]  H9 b6 n% @: a- t* |
<ALBUM>三生三世十里桃花</ALBUM># ], o4 x! U% x# N  z% g. ^
<COUNTRY>中国</COUNTRY>
: W5 y& w  y) ^<COMPANY>仁溪音乐</COMPANY>$ C0 Y, H4 N* D* _2 q$ y% |
<YEAR>2018</YEAR>
+ T: T  o0 t8 @1 b</TRACK>
5 @% }! |1 W3 n2 _- A0 W
0 `: ^, r, G$ {# B<TRACK>% V5 w" H/ J$ y1 L7 L3 ~3 A7 h
<TITLE>Five Hundred Miles</TITLE>
. k3 B' V3 T. ?, x% V9 U7 {) W<ARTIST>Justin Timberlake</ARTIST># d& _0 x& @1 ~
<ALBUM>Inside Llewyn Davis</ALBUM>
2 g+ g# C7 N0 L6 V  K) ?<COUNTRY>美国</COUNTRY>
4 F5 r: p# k* g' n<COMPANY>华纳唱片</COMPANY>0 M5 G# I" C+ v8 P0 I4 z
<YEAR>2013</YEAR>
+ d* k* F8 T" h, c& }</TRACK>
3 o2 d1 V+ o* n; p7 W  o
+ Y( G$ B4 `5 l4 z9 Q7 y<TRACK>5 r" ?( H7 ~! d0 a5 p5 B
<TITLE>演员</TITLE>
, A5 ~& P- ]: G5 h1 p% e<ARTIST>薛之谦</ARTIST>
9 ?3 Y$ Y0 o! u  a<ALBUM>绅士</ALBUM>" Y! X# c$ Z% {4 G) H! H
<COUNTRY>中国</COUNTRY>
1 s6 ~- n8 F# _% v% _  m<COMPANY>海蝶音乐</COMPANY>
% @; `: y2 A$ v/ F- v0 L<YEAR>2016</YEAR>+ H( {6 _: [  X! T* K
</TRACK>
( w" N6 T" J0 K0 ]
  |: A) ~/ H; b1 E- S, r5 c<TRACK>+ O$ N) k. O6 z/ y9 V
<TITLE>Numb</TITLE>
$ Z$ @% ?0 P/ Z% ~<ARTIST>Linkin Park</ARTIST>1 m3 }& m3 X6 ~& z( ]- R! P
<ALBUM>Meteora</ALBUM>2 t/ {' {8 e' K* [
<COUNTRY>美国</COUNTRY>- T! B0 v5 Y+ j8 B) `# v# F
<COMPANY>华纳唱片</COMPANY>
+ B$ T0 G5 L9 m' |<YEAR>2003</YEAR>
# ~/ k$ `7 S/ E7 @8 N5 O( |3 W</TRACK>$ B* O1 U8 F# o" b; y" L

; W" T6 b5 m% L: y<TRACK>
: [: b* x3 a3 v9 u+ y<TITLE>给未来的自己</TITLE># o2 B2 Y, O6 j' Q
<ARTIST>梁静茹</ARTIST>
. u& k3 ^" x" |5 m6 S7 O5 D8 @<ALBUM>崇拜</ALBUM>- w7 t! M/ X9 A) R: @3 x
<COUNTRY>马来西亚</COUNTRY>) T9 X' [6 V) B) o* y" l
<COMPANY>相信音乐</COMPANY>) _4 w7 v$ [; b' R& _5 q4 z3 R
<YEAR>2007</YEAR>8 W. P1 ]2 k2 L
</TRACK>! ]) _6 o+ G" V. h: b+ m  c; W
) D5 ]$ v' {. f, @1 f
<TRACK>' r, f  V4 p% O
<TITLE>The Monster</TITLE>
9 T! H' `# E9 U# {1 j<ARTIST>Rihanna</ARTIST>& M2 q+ Z: l. S, J
<ALBUM>The Marshall Mathers LP2</ALBUM>
+ z" p1 z& J% J% W6 r<COUNTRY>巴巴多斯</COUNTRY>) f) B& s* `8 F  @' Y5 p
<COMPANY>环球唱片</COMPANY>5 e* z. e9 S2 ]$ A$ \  [2 @% C) E
<YEAR>2013</YEAR>
/ C. o# x1 \: ^7 o1 u3 m# O</TRACK>
2 O' {8 [0 x; g/ t/ ^
, o, B& b/ t  y- r7 t) f<TRACK>
5 f- Q6 ^1 j7 r) x* X+ O4 m6 J<TITLE>我终于失去了你</TITLE>
& C/ ]- ], D3 c<ARTIST>赵传</ARTIST>
* ^8 C2 V6 F9 J3 _3 u' U$ v. U<ALBUM>我终于失去了你</ALBUM>" d* G) k7 h6 z; K
<COUNTRY>中国</COUNTRY>" v, _2 {5 F# }5 q( `6 |4 j8 P
<COMPANY>滚石唱片</COMPANY>
; I$ e$ v8 F8 x5 V, l- J8 C<YEAR>1989</YEAR>
. Y% K/ U7 {* b  F- R- n' Z6 A: U</TRACK>
, W) G2 w: [2 S1 ~8 Q9 _6 _8 V/ o" m- }& B- e/ `
<TRACK>
  r" G- T2 J; j! X8 x<TITLE>Main Titles</TITLE>4 ?6 H9 T6 ?1 \0 ]
<ARTIST>Ramin Djawadi</ARTIST>
7 ?; ~1 `# V  u" ?7 W<ALBUM>Game of Thrones</ALBUM>
8 P+ a8 \& c3 @+ a7 e, h<COUNTRY>德国</COUNTRY>2 F$ `) u& V" M5 @/ O: h
<COMPANY>索尼音乐</COMPANY>, s5 A; d" w, K
<YEAR>2011</YEAR>
0 Y5 D) w4 x& l9 I: ~</TRACK>" L/ y' l: S' `8 o& Y8 p

3 W/ o# T, g" C1 M# d& \% F2 V<TRACK>
: I; ^, [" ~2 I6 c<TITLE>传奇</TITLE>  E: N1 f7 Y& J3 B8 ~
<ARTIST>李健</ARTIST>7 ^7 X( ?7 P1 t/ F( M
<ALBUM>似水流年</ALBUM>
  v  ]  ]- e% p  [4 ]! _<COUNTRY>中国</COUNTRY>
2 L* M& y) H4 ^7 G<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
% J# }! N9 T% r2 L<YEAR>2003</YEAR>
9 s6 u7 q' ]8 @. [; I, N0 w$ o" v</TRACK>. g1 i: o/ q3 X7 U: r8 k5 F( m0 e
5 J) t$ U6 s. Z0 X) O* R
<TRACK>. L5 M% B8 I% F. h4 l: j, n  \
<TITLE>完美生活</TITLE>* x7 W1 M! T, a) Y% A- u
<ARTIST>许巍</ARTIST>
# y) J9 i# C* v8 }- }  z  _7 i<ALBUM>时光漫步</ALBUM>, u2 x3 K% u, ]7 E5 h, R: w
<COUNTRY>中国</COUNTRY>& K5 z9 w, c/ p- T6 n
<COMPANY>金牌大风</COMPANY>
+ h0 d: ]9 x: I- @/ v<YEAR>2002</YEAR>
6 e/ m# S  M$ Z</TRACK>3 ?$ ~% e% c, w( M
</CATALOG>[/mw_shl_code]
5 a+ u7 _/ ~* |

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

热图推荐

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

admin 楼主

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

发表回复