使用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;
' k  {2 n' o* Z% m  table += "</td><td>";' w& g) h. T( W8 ~( A1 \  H
  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;) o+ l7 t6 `# I3 F% d' B; \
  table += "</td></tr>";
: ?4 h. {$ a* ^5 x8 p' _}  b' d7 e& _0 |0 o* ]0 R' ?

9 A" M$ f# V$ _document.getElementById("demo").innerHTML = table;( C0 K: \( V  `  n" \
var i = 0;
# P- U5 L3 i; |% f       function next() {2 Q+ j$ e+ K: C! a
         // 显示下一首歌曲，除非已到达最后一首: B/ H1 I2 R4 N2 X
         if (i < x.length - 1) {
5 n3 l: m( B- T+ w. `0 X0 J             i++;2 z4 H" R5 l  E
            displayMUSIC(i);
" v  g% O7 J  ^          }  B. h% R* V' x! ]
      }
/ T% ?3 T( ^0 I7 s) s, S6 p  q; M8 X" L5 r1 r' [
      function previous() {
  B9 L9 Y  a) P0 |! D" G) r" X          // 显示上一首歌曲，除非已到达第一首  [2 k' v, K; x
         if (i > 0) {( O; l4 i' T  J# K1 T
            i--;' ^, C8 w- U9 c- z: g$ {
            displayMUSIC(i);
4 U# B: w8 T: W$ }; |: @2 L7 e          }  ~4 H6 a* ?" L. w+ a% a
      }
1 j+ \9 |9 `2 c
6 i4 K% o" [* E" {9 R       function displayMUSIC(i) {6 ~$ V& y/ c5 q7 y
         document.getElementById("showMUSIC").innerHTML =
3 T! l/ H7 d7 U; i( f             "<ul>" ++ k# a8 Z  z9 l6 w- B8 E
            "<li>曲目：" +# f7 o1 M. A# e: B
            x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
5 R! j3 O# y' N# ~3 m0 X& f             "<li>艺术家：" +
* K# z( z% a5 F) v+ m" F4 t             x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
; J- D9 }9 i/ r             "<li>专辑：" +
% A! t( T6 ?+ e2 P             x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
! N" F) O# `6 o1 K  S, j             "<li>国家：" +
9 y2 w2 [: J- W4 G9 f. N9 `  D             x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +5 q+ z: T$ x6 V
            "<li>公司：" +
" x  Q% W$ j' H# _# f             x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
; i0 A) l& K- ~( J  ]  w             "<li>年份：" +
% V' S; y5 M( i             x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
) D4 L9 Y+ o$ W4 v             "</ul>";
- P* L1 k% x' G6 n8 s       }
! f* t5 v% g0 F) O5 E4 |0 l
8 M* I( ]5 I* t" _; g7 |; z' ]7 c       function loadDoc() {
7 k; T6 E2 F. X
, d% Q6 I1 \* E2 p1 ]          document.getElementById("demo").innerHTML = table;& f# @$ ~/ e2 I4 A
      }
) p' I9 ~+ D3 U  r* G. f7 c* o* I3 y$ I# \- y
</script>4 S2 `+ h+ G. m" N" Q

( |! t; C4 G9 v4 Q: S8 H+ b3 j- [" I: ^9 {' m5 _& x& F: F& s0 g
</body>, ]4 j* L1 w  G
# F4 W6 X$ S# [  i
</html>
, c6 A9 H8 x: g! T0 e5 Z; V" R4 G& n  H3 t) o; w' G

) P, j% ?) J& w* O: U/ p' u[/mw_shl_code]2 T: ?  t4 Q% E' S9 x

: @# [0 u, v0 f- u6 h3 ]. t  Z- ^* X2 z

$ D' G% o5 p" u5 _) O% QXML文件- l3 c: }8 ?, `0 \

1 e* P, C( [# V. h$ y' x) o[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
0 ?, V) q% @, H- B<CATALOG># `  {) T( h# d5 K+ j
<TRACK>  @# Q6 |0 Q# s3 l: P
<TITLE>再见</TITLE>
! z4 y) x5 q3 s- z& ]<ARTIST>邓紫棋</ARTIST>- n6 T7 y2 h4 B' S7 w- N
<ALBUM>新的心跳</ALBUM>
! {" p' z/ Z0 G<COUNTRY>中国</COUNTRY>
; m) H' _9 C5 F- S<COMPANY>邓紫棋工作室</COMPANY>0 L  v8 C" g* i7 B$ p1 N& J
<YEAR>2016</YEAR>1 F' p4 V: o1 ?* x# K# s- }) a
</TRACK>; Q, K0 g! F! {5 T4 _

( |' _( I- j  U3 [0 q/ t<TRACK>, _; {+ }1 Q5 A1 s
<TITLE>All I Ask</TITLE>6 [6 X  S* j7 J4 P  H
<ARTIST>Adele</ARTIST>
1 l* s7 V( ~! e' c6 Q$ o<ALBUM>25</ALBUM>
, ~3 e' _0 _& ]  y/ B<COUNTRY>英国</COUNTRY>
+ `+ [) R% I3 b3 N, s& e" W<COMPANY>XL Recordings</COMPANY>
% ?# Z. a' K) {8 Q, \<YEAR>2015</YEAR># I% h: u3 }0 i" E) M' x
</TRACK>
6 {/ i+ l1 A; a, s  I" E' ^0 e, f. h
<TRACK>5 }3 Y8 Q$ I, d9 ~
<TITLE>之乎者也</TITLE>1 m, L7 n5 V3 k. D
<ARTIST>罗大佑</ARTIST>
! i% F2 O1 Y4 b- J% F<ALBUM>青春舞曲</ALBUM>
( g2 [) \. P/ Q<COUNTRY>中国</COUNTRY>
' |% b1 i7 t; `& s$ C' _( f<COMPANY>滚石唱片</COMPANY>
$ y% b1 n; }+ _2 m1 x* E  j<YEAR>1982</YEAR>
9 x" h6 I. \* x2 {9 l" b</TRACK>
* a+ F  D9 }7 _. r9 x* ]* L" H0 T8 y0 d1 h+ Y! d) |
<TRACK>5 g& {% G7 }2 v" C+ B
<TITLE>Never Be Alone</TITLE>8 s- G" {* y. v8 P) F8 X
<ARTIST>Shawn Mendes</ARTIST>) w1 X1 \" l$ Y, }& ]1 a
<ALBUM>Handwritten</ALBUM>3 B% q, @6 A: Z9 _* L9 T
<COUNTRY>加拿大</COUNTRY>2 {7 L7 S. R- b
<COMPANY>环球唱片</COMPANY>
; o  U9 Y9 d/ d1 t  G/ }<YEAR>2015</YEAR>1 ?5 c+ D  r! f  S
</TRACK>, X- B  }( A: F& u: I

. g6 w9 A0 t1 @0 ^6 ]9 x' E) `<TRACK>
4 x: [4 B, Y/ x6 v9 ]<TITLE>慢慢</TITLE>) I, P8 |" O  s
<ARTIST>张学友</ARTIST>8 R1 s" R6 F/ p' `" \
<ALBUM>忘记你我做不到</ALBUM>% a; k* _- f! M4 V- v
<COUNTRY>中国</COUNTRY>. k' V; P2 ]1 A( n! L
<COMPANY>环球唱片</COMPANY>
4 A5 i: v9 Z: a4 ^5 _* w9 R<YEAR>1996</YEAR>
& u( k; k3 b5 @  ]</TRACK>
: }6 s8 r) X: j+ z0 g
$ P- ^! F  _) r4 D, _! u: p; C9 h<TRACK>
" Q! b+ y. h& e* W0 q) I! Y+ w4 `<TITLE>Complicated</TITLE>
: i$ @# l3 [& K5 d9 B. i* b4 s<ARTIST>Avril Lavigne</ARTIST>
; K( ~$ K8 c% z6 t) r<ALBUM>Let Go</ALBUM>
; k" G& u1 X' d, ]<COUNTRY>加拿大</COUNTRY>
0 c3 ~! ]7 Z) n/ X$ {( D- v: L<COMPANY>索尼音乐</COMPANY>9 A; W  J+ r) h4 {5 ^3 u
<YEAR>2002</YEAR>6 L8 ^* S- K( h" S, {8 a
</TRACK>3 u% S: Y  j3 N7 ?
# V5 t% N' T, E( f* }9 F5 r
<TRACK>% v9 R- C2 ^8 w1 e+ {
<TITLE>三生三世</TITLE>
" E2 x; y3 ~/ _$ v<ARTIST>张杰</ARTIST>, ?" ]1 _. t' e( F. k, R1 _8 ~
<ALBUM>三生三世十里桃花</ALBUM># A' N$ s4 E$ F: X
<COUNTRY>中国</COUNTRY>
3 E  M: S7 D2 g5 T5 _<COMPANY>仁溪音乐</COMPANY>
1 A# B" j7 w2 b$ A% i0 ~. q! k<YEAR>2018</YEAR>
' X# T7 ?8 |$ w: g) ^</TRACK>
! i/ ~& p8 b0 V% b
7 e5 v( L4 k; p% _<TRACK>
& I+ l5 w2 C& `! x- J9 k$ ?<TITLE>Five Hundred Miles</TITLE>
6 M! ^$ N7 s' p! F  f# `3 R8 y<ARTIST>Justin Timberlake</ARTIST>4 v" a! [- y4 G" V. W; u0 D
<ALBUM>Inside Llewyn Davis</ALBUM>! a7 V3 x. z( p
<COUNTRY>美国</COUNTRY>
4 c7 D( ?. O: H<COMPANY>华纳唱片</COMPANY>
4 [/ _1 U  y& x- Q1 a3 J$ ]3 y& \- @<YEAR>2013</YEAR>
* o- B1 p" {0 h! c, G2 @+ c</TRACK>
( q$ a7 U' q: \9 ^  i" S
$ m: I2 Y2 Q) _5 G7 R<TRACK>
* f: `2 N7 W) `9 M/ Y5 j<TITLE>演员</TITLE>
; C$ x# K1 C, h6 u' z: a<ARTIST>薛之谦</ARTIST>  @' R5 [8 v/ E: w+ V9 ?: t
<ALBUM>绅士</ALBUM>
+ i! R, a1 ]6 {6 y. F) u<COUNTRY>中国</COUNTRY># w0 q+ W% h& ]! W. J4 B6 \
<COMPANY>海蝶音乐</COMPANY>
, K  d, f) n: ]<YEAR>2016</YEAR>
6 Y  e$ \: |7 H/ ~# M</TRACK>" ^, p. m8 y5 y9 h+ ^/ ?7 _

7 g- @/ i7 O6 a4 N+ k/ b/ W) C<TRACK>
% J' z) ~! p1 o5 v  L, O<TITLE>Numb</TITLE>& o% V! ]) I/ U. t6 h) U+ r+ n/ w( a
<ARTIST>Linkin Park</ARTIST>  [4 Z0 M9 A, X1 u4 ^
<ALBUM>Meteora</ALBUM>
& h8 m+ a: N- A( g<COUNTRY>美国</COUNTRY>
; S, s7 d5 Q0 B<COMPANY>华纳唱片</COMPANY>! f* \3 M' Z( }' |( z/ m# M
<YEAR>2003</YEAR>" k4 Q) `" b) U! B6 x+ R* _% h" |
</TRACK>
) S8 Z/ K* ?8 s( W5 E2 _( ]3 G9 h/ v; O! M) Q
<TRACK>7 ~6 G. m/ M4 i  _5 f
<TITLE>给未来的自己</TITLE>+ ~- d. k% Q8 a0 t
<ARTIST>梁静茹</ARTIST>
! F0 Q7 o$ c+ u7 n<ALBUM>崇拜</ALBUM>( \% m" |5 t  d  Q1 _- d2 q
<COUNTRY>马来西亚</COUNTRY>  H1 j6 K$ |  n! H+ z0 k* U. b0 S
<COMPANY>相信音乐</COMPANY>! G; l3 E+ a# h; n+ W# g
<YEAR>2007</YEAR>3 z; }% V! K+ `  d4 N: O
</TRACK>
7 R1 y! d0 ^) G7 F, _- `0 ?) g
* w" z5 Z$ |' b% O( b6 }1 j<TRACK>1 ^# T3 x$ c& [- f9 z. ?
<TITLE>The Monster</TITLE>
5 m. j2 u* J; c. U6 [<ARTIST>Rihanna</ARTIST>
. R. _% D1 G/ M. j+ j9 t) \8 V<ALBUM>The Marshall Mathers LP2</ALBUM>
7 [' w0 F5 |6 D+ I& m4 g/ T2 B8 i  y<COUNTRY>巴巴多斯</COUNTRY>
& K+ d3 Y; X% L  E. ]5 i<COMPANY>环球唱片</COMPANY>
$ ~3 T/ N- a( U/ t4 r; q  J<YEAR>2013</YEAR>4 R* Z' z# i9 A( e% g
</TRACK>
% G, D5 |4 v# s8 L$ }
+ j4 v  K/ v  g. m, a' L<TRACK>
# D$ J" j; a. }. c% j; B  \<TITLE>我终于失去了你</TITLE>
8 w( P- ?1 X: T. I) }<ARTIST>赵传</ARTIST>1 ^3 _2 J6 b, @& L8 c; o
<ALBUM>我终于失去了你</ALBUM>
3 d5 ~$ K! Q6 P( T5 Q) P# X/ g<COUNTRY>中国</COUNTRY>. l* y& B2 b( O* V, A
<COMPANY>滚石唱片</COMPANY>
) G# v! e0 E: Y/ r0 ^6 O6 M<YEAR>1989</YEAR>7 C5 u+ m) @1 h& m( C/ h
</TRACK>
+ v- {/ `5 J, }4 D$ l' R8 o! Y
. R! e. Z4 k+ U& r3 W; j<TRACK>
! [4 H) A( c1 i% D<TITLE>Main Titles</TITLE>
0 w1 q2 q5 w. a<ARTIST>Ramin Djawadi</ARTIST>
8 b% o& f# i2 H9 R9 ^; }<ALBUM>Game of Thrones</ALBUM>: F% b& K7 S5 N, g* Z* }, i
<COUNTRY>德国</COUNTRY>1 w; {% [# s' C5 S" o  r$ k
<COMPANY>索尼音乐</COMPANY>
" T+ e/ |5 B, f/ _6 w8 Y<YEAR>2011</YEAR>
" w( x8 A: N* `; |4 ]/ \4 v. \</TRACK>
6 }7 y8 @8 S: |5 u; }. r
! x9 w! G! ]3 H( v" g. t  _<TRACK>
/ ~% A( m' w9 d: w- }- f<TITLE>传奇</TITLE>
; B) b. k/ j* h4 u  i; L<ARTIST>李健</ARTIST>+ r* O: r! [* y  u/ L  Y
<ALBUM>似水流年</ALBUM>
& Q; v* E4 o) x7 `/ t& T  I<COUNTRY>中国</COUNTRY>! p1 B( T9 F% f* @( P! G
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
" Y; @; Y0 F: W5 W8 d: A<YEAR>2003</YEAR>
9 A9 @/ R# ~; z" E1 ]( g4 ~# O7 _! S</TRACK>
6 Y9 a1 j# ]4 u  x3 f2 T+ ~
1 a. \  y( _2 ]5 l<TRACK>
- L. ^  `* z3 H- O1 q0 Y/ x. ?<TITLE>完美生活</TITLE>
# K/ N- j. f7 ?+ d! W<ARTIST>许巍</ARTIST>
2 d; U1 X! A' d0 e8 e) T<ALBUM>时光漫步</ALBUM>
+ N* n' O7 [/ F. |+ u<COUNTRY>中国</COUNTRY>
5 s5 T) |6 ~# N<COMPANY>金牌大风</COMPANY>) K% E( W7 v9 @
<YEAR>2002</YEAR>
* t4 A. N+ A  D- K" m9 p+ L</TRACK>+ K: J& {. W9 ?* w0 K
</CATALOG>[/mw_shl_code]. B$ n+ G+ G& Y0 _

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

热图推荐

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

admin 楼主

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

发表回复

浏览过的版块