使用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;9 N5 c3 C" f  i# ]! X$ q
  table += "</td><td>";
0 P! F1 |# n3 Y/ ^; E) s. D3 D% L  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;3 n/ \) e1 z$ ~. v( T
  table += "</td></tr>";3 H% {/ W% ~; w. Z! B# c2 i
}
# W, u% r7 c' u4 W' G% x
6 g( Q& y$ B0 Y. X" G/ b5 ydocument.getElementById("demo").innerHTML = table;
: ~. x7 O5 ]  T6 t3 |3 E/ A- uvar i = 0;
6 x1 r. j3 h# C$ v. Z8 z       function next() {. C: f# y& b. i! D! Z
         // 显示下一首歌曲，除非已到达最后一首, X$ R8 v! r+ S$ [# q- c* {
         if (i < x.length - 1) {2 S3 ^" e9 M: g3 j6 T6 w
            i++;/ A: v9 x: ]# q/ a6 p4 x
            displayMUSIC(i);
" X3 {+ q6 G* S* o5 X( O          }8 [' t, O" i$ L
      }' n& o! u" C( ^1 f

5 O( y6 U: ~( Z6 g9 P) Q5 v       function previous() {
2 z/ ]+ b% r  Q& k          // 显示上一首歌曲，除非已到达第一首
! c/ u) d8 d) |          if (i > 0) {
) R. P" h9 j4 c( B) k$ W             i--;
9 I: K5 E! Y; T% ^             displayMUSIC(i);, R( y# o" b$ d) f
         }
& U+ [$ |: {( H       }. h# J, G. \( Q& S( p

. R- B% J7 F: d8 e       function displayMUSIC(i) {* k2 q! B; B2 {$ A# V8 h; w
         document.getElementById("showMUSIC").innerHTML =
; L% |, J1 Q3 `( f$ c0 t             "<ul>" +
2 z$ o  q+ l4 g( x# `8 |             "<li>曲目：" +- }( \2 O3 _! |: b
            x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
7 r7 Y# S7 h6 N' S# g             "<li>艺术家：" +6 C6 c4 Z& c' M0 r; v
            x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +. Q+ }3 h" g( B$ L% k
            "<li>专辑：" +. b" s& u& D0 Z- y& l8 u. D
            x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
9 H- K9 g5 _4 Z. {3 X# {             "<li>国家：" +
3 G9 E( z7 k/ o0 T: G  L             x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +$ L* v8 ]+ h% C* Y% x2 C+ x
            "<li>公司：" +
, g# M( _/ Y1 H( J6 g/ F( e1 R             x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
2 K7 x1 a1 @8 R6 f: Q: m             "<li>年份：" +& O7 p: W. w& `# f+ u
            x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
3 w, p# S9 o/ E9 Z% q( I1 t4 M             "</ul>";, U& o- v+ w# U6 ~7 L
      }0 a4 }' R+ ]! u1 w, ?
. |; N8 S. [8 k* U2 Y$ C
      function loadDoc() {
4 n# ]- t& {9 g
7 i1 X: m9 |0 s6 z$ k& _          document.getElementById("demo").innerHTML = table;
) r3 y0 ^4 I- |& k. ?( J       }( Z' z7 o% @8 K1 z* ?7 s$ [% {
: i/ O5 H' |. g! M* h0 W: b: K, i
</script>
) ~: E8 l8 T0 b) Z
: S& ~. y' K; o( [% b9 w. X! y7 d4 R' T1 d# n% s" ]9 O7 y; ^. P
</body>
- E; X5 g' k! m! [2 w" w4 N# s
5 I2 E4 g" t, v! _& |</html>
& z5 d3 Z/ R& p2 x3 n  Z' t7 w5 C6 @# _! ]) Y

) n+ P( f" `# D3 G; F, C) i[/mw_shl_code]
# E+ s7 c6 C' ~; M/ m( y) Q( l+ v6 J
5 G9 d: L" r7 y5 E+ [, u
5 ~: u7 Z7 t4 s/ q8 F& u
XML文件1 R" R6 o) `# A& p* D4 t/ e2 w* F

  Q/ b7 r2 l' k% C[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>( W# f+ v$ J4 k$ u5 w+ n- U
<CATALOG>
2 y# q! J5 h* |: R2 U3 t<TRACK>
7 j" M: v- I9 G7 a  ~* A; p) H. t<TITLE>再见</TITLE>" j* b1 x+ G3 M+ S  }
<ARTIST>邓紫棋</ARTIST>3 s! y$ z% Q$ b3 v7 N
<ALBUM>新的心跳</ALBUM>8 N# \! M( K$ M  M9 \
<COUNTRY>中国</COUNTRY>
$ M* l5 V9 d' ?<COMPANY>邓紫棋工作室</COMPANY>& t4 Y1 i) s6 c
<YEAR>2016</YEAR>; {- N, v& g5 j( a8 O8 w( w% Z
</TRACK>! U( H0 \; T% b( I2 ^
8 m+ @& d  H) \- f7 y2 U
<TRACK>
: {0 F" |6 O1 h6 M<TITLE>All I Ask</TITLE>
7 @6 N7 {- Q4 u+ r5 n3 h<ARTIST>Adele</ARTIST>6 r3 T2 f) T1 T% B
<ALBUM>25</ALBUM>
$ A' H3 v% G- m  j* e  g<COUNTRY>英国</COUNTRY>
9 m5 T( j8 P6 b  W5 n<COMPANY>XL Recordings</COMPANY>' I! y* H4 Z7 p9 `* a" x+ ]; ]; q
<YEAR>2015</YEAR>
7 z# ]: P; C" ?9 W) G6 K/ ~</TRACK>
( A$ x% A6 {/ a& E; ?  H- U" L% I' ]( b
<TRACK>
4 R# K' @/ X3 u3 u5 F3 g/ A3 x<TITLE>之乎者也</TITLE>' l) U: L/ Z& d  T' j
<ARTIST>罗大佑</ARTIST>
/ {' T. b4 q: D6 l<ALBUM>青春舞曲</ALBUM>
. I+ X% |9 {$ w3 W7 h8 r* R- k<COUNTRY>中国</COUNTRY>
1 ]. R! N8 m* o2 F3 h% F<COMPANY>滚石唱片</COMPANY>
5 s, H1 {* r! _<YEAR>1982</YEAR>* x: Y8 M2 A0 B/ s( W( ~9 K
</TRACK>
* a$ V/ [9 N5 v: |7 e
9 ]# x4 p1 h% M0 J3 t, Z3 c9 }<TRACK>$ `0 m) p- P6 n1 j, t' f
<TITLE>Never Be Alone</TITLE>
1 N7 r$ b: c$ [2 i<ARTIST>Shawn Mendes</ARTIST>
/ [; A; _. U; J) h<ALBUM>Handwritten</ALBUM>  R: P! R  C0 g$ x  y
<COUNTRY>加拿大</COUNTRY>* I' K6 W- t6 s" }' o$ n( K' Z- f# Q% @
<COMPANY>环球唱片</COMPANY>5 s* \8 {  s/ j  h: {. }/ F
<YEAR>2015</YEAR>- b5 }7 i0 z* t/ n, q1 b. \
</TRACK>
. [" s# b( K$ ^  K* [" N2 _" P  a$ G9 {& Z# r, f$ T; L$ o. P
<TRACK>
/ F% @2 ]: N$ O( q: c/ q8 F<TITLE>慢慢</TITLE># I5 L( n7 ]1 I1 C% F
<ARTIST>张学友</ARTIST>
6 C  U9 ]6 A$ e3 L<ALBUM>忘记你我做不到</ALBUM>6 r& q) L  ]' _) t: _% _8 K
<COUNTRY>中国</COUNTRY>
, v- M! O" t) D1 ]# z<COMPANY>环球唱片</COMPANY>6 F, D6 N& c3 o
<YEAR>1996</YEAR>
. G. @6 G1 w3 g( _* L</TRACK>/ X( O0 ^5 ]9 R, c( R- h0 I
0 u; h* S* H3 e" v, R8 ]
<TRACK>
7 d# `; \, Q+ L# [* a5 D+ Z. I: `# U<TITLE>Complicated</TITLE>0 S) I5 H( u2 u$ u3 c( H
<ARTIST>Avril Lavigne</ARTIST>
* Q% J4 N$ F' o9 i<ALBUM>Let Go</ALBUM>
6 D+ Q* [- z, V<COUNTRY>加拿大</COUNTRY>
6 B( |- C9 v6 O2 u/ K- f<COMPANY>索尼音乐</COMPANY>
: t. ?' T# w" m: L- t<YEAR>2002</YEAR>
! w2 A& J* B( I$ S+ W6 S</TRACK>
0 _7 o, E4 Y. o+ A. j2 u
( ^3 Q- |4 K: ?1 H+ f<TRACK>
+ o$ H* i" a) M. c<TITLE>三生三世</TITLE>9 U6 X0 I+ g' q1 L3 ?
<ARTIST>张杰</ARTIST>1 ^. V. ~: W% K8 \; S
<ALBUM>三生三世十里桃花</ALBUM>/ {- r5 k6 @/ Y4 `( @% L
<COUNTRY>中国</COUNTRY>
8 z5 }2 ]0 F  W7 C  D" X<COMPANY>仁溪音乐</COMPANY>( N1 v# D+ d! H/ `+ g7 Q+ j/ p" ?
<YEAR>2018</YEAR>
" B/ K9 R  I4 a1 H" k/ S4 u</TRACK>' y% y& H/ s5 z5 P1 L. l
: r  k. F7 s# S+ R( Z( L% X/ b
<TRACK>+ D) x5 ~4 M$ U8 U1 @9 {
<TITLE>Five Hundred Miles</TITLE>
4 F/ }( S6 u8 B! j* ~: j/ ^+ E<ARTIST>Justin Timberlake</ARTIST>
* K' G, @4 x! {  @3 E  _<ALBUM>Inside Llewyn Davis</ALBUM>
- V; p, S5 k0 {" D1 ?/ ^<COUNTRY>美国</COUNTRY>* `* V+ u' Q6 r7 ~7 [. Q% V2 J
<COMPANY>华纳唱片</COMPANY>
( J* U) \7 R& m+ B& Y9 W7 E<YEAR>2013</YEAR>5 ?% i, E1 I2 {, B. g4 S
</TRACK>
( r* F: A! g2 d) _6 ?$ U8 r2 W& C! }. d5 O* h3 f* J
<TRACK>
% s, K7 S+ Z5 p0 l<TITLE>演员</TITLE>
# X+ c& h! e& i4 r: f( |9 j0 }<ARTIST>薛之谦</ARTIST>8 ~, V5 b( z1 Z+ q! G7 k- I
<ALBUM>绅士</ALBUM>
- H; L, f/ O" r+ Y, e9 `<COUNTRY>中国</COUNTRY>2 p2 m* h  O/ }5 B- k: M
<COMPANY>海蝶音乐</COMPANY>
+ U: L3 T% B; @. _/ l& p<YEAR>2016</YEAR>+ s/ @) l4 W9 ^1 N
</TRACK>
  L/ L5 M  _! d. ^7 ], V/ i2 u* J( d0 @/ M
<TRACK>
* U8 ], s/ ?+ g$ n9 U<TITLE>Numb</TITLE>, B1 v7 j. W2 E! x! t- R7 d
<ARTIST>Linkin Park</ARTIST>* C. B  {9 f$ N5 _. R
<ALBUM>Meteora</ALBUM>5 j* v; v6 g, `6 D( I# [2 u
<COUNTRY>美国</COUNTRY>+ n( v# D5 F2 b* l( ~
<COMPANY>华纳唱片</COMPANY>% Y9 m+ f' O$ i3 a) {
<YEAR>2003</YEAR>
& U7 j: I+ ]0 f</TRACK>
* y; a1 W0 |& Z* {0 s( @: r2 x+ X8 @# [6 W/ z; J
<TRACK>* ^. Y8 m4 p, T  P$ k, S: _
<TITLE>给未来的自己</TITLE>4 l9 L7 x  Q) R! ?" r
<ARTIST>梁静茹</ARTIST>, }. }* g9 q/ |
<ALBUM>崇拜</ALBUM>9 N6 q/ b) ~5 h. _  s
<COUNTRY>马来西亚</COUNTRY>( Y' f! D- J) G+ H# i3 J
<COMPANY>相信音乐</COMPANY>
1 o$ a) m/ P9 O0 w+ j<YEAR>2007</YEAR>
$ f4 z3 J/ s4 ~- x: [</TRACK>
' T+ L: c& v  @/ z* v2 A  m' D4 S' F/ W$ ?
<TRACK>$ k) e5 L5 X6 s' r2 |
<TITLE>The Monster</TITLE>
* G! E5 C) P# Q/ O<ARTIST>Rihanna</ARTIST>
3 M; k; H$ _( U<ALBUM>The Marshall Mathers LP2</ALBUM>
5 U5 g9 N( `3 e! p7 d<COUNTRY>巴巴多斯</COUNTRY>5 r$ b/ @& N  J5 Q! f
<COMPANY>环球唱片</COMPANY>
& q( E7 j5 H5 N<YEAR>2013</YEAR>: H$ X. }; Y: J* P0 q: P$ b
</TRACK>
5 a- @7 a5 l! f3 p) n/ m6 U7 W% X* K/ P, j' L6 D8 W& d, ]# s
<TRACK>
. t% r5 A5 t& n; d4 ^( d<TITLE>我终于失去了你</TITLE>5 ^* m  u: D$ |8 o, G5 B
<ARTIST>赵传</ARTIST>% @- b$ H* u! Q6 B
<ALBUM>我终于失去了你</ALBUM>5 {/ x# W2 t7 ]( H
<COUNTRY>中国</COUNTRY>$ u3 T5 c+ O' I9 M
<COMPANY>滚石唱片</COMPANY>
; c3 c' n' L3 I<YEAR>1989</YEAR>. `( U6 C; D9 f) r, _  Z
</TRACK>
+ K% t! f$ D3 X: R! k; ]; I
$ O, ~" c$ a9 X& n  y<TRACK>! `- i- Q' f4 h1 O
<TITLE>Main Titles</TITLE>6 [+ x. k/ |5 w
<ARTIST>Ramin Djawadi</ARTIST>
3 m; ^4 g% R# o2 E& |<ALBUM>Game of Thrones</ALBUM>
) H# v) t7 M. _0 ?7 m3 A<COUNTRY>德国</COUNTRY>/ k) E' U$ s# B6 ?8 I: o
<COMPANY>索尼音乐</COMPANY>
; _' E1 _" G% e& z. E  N<YEAR>2011</YEAR>
8 C7 T! Y$ a, u6 I8 U2 R' o- y- i7 G</TRACK>, ~1 N3 Y  e6 ^, a# `
7 R0 M% F3 `) {1 ]! R3 d& L' F
<TRACK>
, H$ {, Q. }/ u2 _* {<TITLE>传奇</TITLE>& p/ x6 ~0 S8 x
<ARTIST>李健</ARTIST>
. {- @5 [" L; [% q$ J8 J% K<ALBUM>似水流年</ALBUM>+ i8 a( r, x* Y+ c
<COUNTRY>中国</COUNTRY>
8 n( P0 b6 A3 ?<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
& l5 E) s3 h) V, g9 V/ C<YEAR>2003</YEAR>
+ M4 W/ @. Q' b0 x; V- L</TRACK>  Q$ ~+ t1 R, a& ]# c4 ~5 }  e

- d4 r6 i2 h9 R* \9 v<TRACK>
; d) L2 Y; @2 B% w4 A3 A<TITLE>完美生活</TITLE>
% Y- c( u8 i3 V7 y<ARTIST>许巍</ARTIST>
, m. s9 S: L, Z; D, s<ALBUM>时光漫步</ALBUM>1 c( k! \) B( v* j( S. {
<COUNTRY>中国</COUNTRY># k4 K+ W5 t% d* @1 N' m
<COMPANY>金牌大风</COMPANY>
# d" w! M7 w! _<YEAR>2002</YEAR>8 S1 U) `; y; U, d9 i+ D4 c& ^( ~+ G
</TRACK>
  R1 {; h( J# [. K  M8 P</CATALOG>[/mw_shl_code]
  {! w: h  m: S- Z9 i# _

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

热图推荐

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

admin 楼主

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

发表回复

浏览过的版块