使用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;
- C( m# r% e3 x  table += "</td><td>";+ b8 l, c# C, W' U1 X
  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
! h" \# G+ J; l/ M# v! Y: M4 s  table += "</td></tr>";' u# `0 l1 @0 }
}: l* C" N& l8 W1 Y

2 [- F+ N. j7 ]% _6 v+ }& Rdocument.getElementById("demo").innerHTML = table;
, w2 G' k/ ?7 a& H0 p9 bvar i = 0;
( K& b$ N, s: m/ q       function next() {4 g; ~0 G  o3 X- Y
         // 显示下一首歌曲，除非已到达最后一首) h( b; t8 M4 `
         if (i < x.length - 1) {. o; J9 |. C" n; {- k6 j
            i++;
8 T3 \0 J, Z6 O, ^             displayMUSIC(i);
: ~5 H& m) B' C! m          }
5 N" W: j. J# s' j7 ^       }
7 D/ f$ r3 t! i
+ J( s' w: y* A% u# }; A5 G       function previous() {2 b' A" \0 [1 k9 l* ?5 p4 p
         // 显示上一首歌曲，除非已到达第一首. Y  l; a+ B5 [2 d+ [; U# f) d8 q/ h
         if (i > 0) {
. h; ^( l: j* I; _5 r             i--;* g5 i* G# I. _  y& c
            displayMUSIC(i);, x% \5 I: }& ^9 G& X
         }: j; U4 Z9 s% X- t$ J7 ^& S, l3 z
      }
  o1 [' M7 _$ w& F8 i, u+ o" R6 a1 w# N+ ^+ ~, A, x
      function displayMUSIC(i) {+ y' ^6 y& a: V+ X, S8 d: |" @
         document.getElementById("showMUSIC").innerHTML =
: p- H0 }! f* ?; ~6 z( O. m             "<ul>" +( E. R$ f- W2 l  @- V# s
            "<li>曲目：" +
+ I  \* p; ]5 H' h- @. h             x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +$ F  Q  u6 \$ a  L! @
            "<li>艺术家：" +6 E9 m4 _+ W5 S' E
            x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
4 b6 B& y$ U6 ~; _. p& n/ @             "<li>专辑：" +3 g* |2 O) v2 p2 F) G* p
            x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +, m& W8 ?& v! |7 S) o. ^
            "<li>国家：" +' x8 ^+ ~- N. {; C
            x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
0 \3 ~7 t* M- T5 G7 Z& l$ W             "<li>公司：" +
3 i  \6 _: C3 [             x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +$ X. w( z9 O: h+ Z2 ^: e0 P8 R3 I
            "<li>年份：" +
* R3 `1 x2 T5 N0 e             x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +# Q4 d0 P. f% X2 D" N
            "</ul>";
% Y* y6 v# k( j! z( I1 b       }
2 [! C* V6 H4 d4 \" M, g
% U6 Z# |3 o4 a9 K       function loadDoc() {
- {7 F4 |/ g3 w, a
- ^7 u3 P  c, N9 r          document.getElementById("demo").innerHTML = table;* G7 H( |$ @) E& R  s- M
      }" j- x1 G1 Y" I$ S
- ?1 a9 c. F/ G( ^) D& Q  T" N
</script>- z6 d. m2 b  j+ V( f. ^0 j

) R7 z& d$ }" ]) p* E. e  I8 H! V/ z& x: j* ^
</body>
' F$ x8 S' P: }
1 C# o/ R0 I7 I6 z4 L) ~</html>* m# D3 `' J/ A2 I5 F2 u% S
9 b( m/ p2 v2 i  m- m9 P
* E! H8 [4 F+ `( M) V
[/mw_shl_code]
0 b* |: E& J! y" V2 k  B( I5 \7 ~6 c9 R: N
, y+ b  Q" t9 }' H6 j

! Z2 s; }" ~2 W, x4 }/ gXML文件4 d% W* [& d. L7 ~; s  V3 h/ ]
, \' D+ k. L/ s& G, R. B2 i
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>3 l: f. m2 R! `0 w9 d  t' h
<CATALOG># p1 x$ P! \; J% a) @& E
<TRACK>  Z5 u2 y3 y+ K" H. R
<TITLE>再见</TITLE>1 Z' v  g6 [9 H4 e0 e9 ?- {: O+ j
<ARTIST>邓紫棋</ARTIST>
1 L' I0 I/ E' y/ c! T2 i; s<ALBUM>新的心跳</ALBUM>
$ q8 A2 g4 V$ K3 q- t, g4 @<COUNTRY>中国</COUNTRY>
9 k5 d6 P& _8 `+ F7 H<COMPANY>邓紫棋工作室</COMPANY>
$ ^3 d. z; f# V" a<YEAR>2016</YEAR>! o& `( a( f3 Q9 P$ y& C+ b
</TRACK>
8 j7 Q( f8 |, V* L
+ k9 t* x1 T6 S% l# M& @<TRACK># q' [2 g; Z6 V1 `
<TITLE>All I Ask</TITLE>
) I& J  w3 u1 H  ?7 ]<ARTIST>Adele</ARTIST>  ^- i; P; V8 p& ]
<ALBUM>25</ALBUM>; e8 O5 t- ~$ ]4 i, G0 F
<COUNTRY>英国</COUNTRY>( y- L/ Q9 V6 o" N, P4 J
<COMPANY>XL Recordings</COMPANY>8 W$ I( D" {4 K0 e( W
<YEAR>2015</YEAR>
+ D5 ^' @: r& b$ t3 `3 m2 z, I</TRACK>
( W# H& l* |- ]2 b5 c
% m! ~1 W! N/ b$ I<TRACK>
1 k8 d( I1 X5 F6 K+ @<TITLE>之乎者也</TITLE>; v; F# J( J* B. Z
<ARTIST>罗大佑</ARTIST>
( h6 t% A4 P. V9 o& z3 M1 W+ z<ALBUM>青春舞曲</ALBUM>
9 Q: C: Z) r" O4 n0 N. z3 o! E6 `- a<COUNTRY>中国</COUNTRY>
4 x0 G" d  C* }% z, Y' A% _% \<COMPANY>滚石唱片</COMPANY>
8 u4 t4 |, J8 ~: G<YEAR>1982</YEAR>
0 o! R& i/ f6 S</TRACK>
. U% ~% I$ z  c7 V' `" ]3 ]( ]! k; }2 t# M" n
<TRACK>
' j2 e3 Z0 _0 J<TITLE>Never Be Alone</TITLE>
9 b% j$ z& w$ }$ W<ARTIST>Shawn Mendes</ARTIST>: `6 o7 t" X2 {' R
<ALBUM>Handwritten</ALBUM>2 ]1 D4 \4 ^8 |+ f' S3 z0 z
<COUNTRY>加拿大</COUNTRY>- \8 y2 r* f4 V
<COMPANY>环球唱片</COMPANY>
9 e$ ~/ D. |! o9 c<YEAR>2015</YEAR>
$ a. Z; p: o" x! Q* j. @& e</TRACK>
5 v" ^) k) i: m( H+ a( F: H$ \; f9 e* f$ D; W
<TRACK>
: i! k! s+ s/ ^$ i3 u9 W0 F) O# N<TITLE>慢慢</TITLE>
% G0 ]! m+ }! w6 b# r- r<ARTIST>张学友</ARTIST>: B+ P; K7 ]9 q: I# l
<ALBUM>忘记你我做不到</ALBUM>
. Q5 Q, j' ?: {/ @& S& M: w<COUNTRY>中国</COUNTRY>
8 p8 W' G, A- s# A<COMPANY>环球唱片</COMPANY>
, Y3 a  c( z4 y: _) x9 f6 ^<YEAR>1996</YEAR>6 r0 Z; ]" |8 n( m9 h( H
</TRACK>$ V  ]8 L' q' F) f8 q6 S

8 a$ r5 |3 f: [: j<TRACK>
, |  {9 W% u& U<TITLE>Complicated</TITLE>
& R2 ?, ~' X0 E/ Q<ARTIST>Avril Lavigne</ARTIST>
3 |$ `7 M3 n6 p<ALBUM>Let Go</ALBUM>7 ]& t$ c- a' u9 V" M' c. k6 J) L
<COUNTRY>加拿大</COUNTRY>/ [; p, C( D+ u! J5 A, S. s0 z
<COMPANY>索尼音乐</COMPANY>
) W2 F& G# e* a1 {# i1 d<YEAR>2002</YEAR>
3 X2 s" L4 g' _& ?# Q2 Q. _</TRACK>
2 e# u- |3 ]; v6 k
" T& f" X" K: W0 \<TRACK>  ?* C# l8 q0 y
<TITLE>三生三世</TITLE>  U+ v7 l; p, R( F
<ARTIST>张杰</ARTIST>& v' m% N1 w, x2 `
<ALBUM>三生三世十里桃花</ALBUM>* c' l0 K" [- D( q' f9 E
<COUNTRY>中国</COUNTRY>$ O0 i/ F9 t2 A; C+ B' Q' m, `4 ]
<COMPANY>仁溪音乐</COMPANY>
0 A: r( B, V: S/ C  M0 y" X8 l+ U<YEAR>2018</YEAR>
( q2 P% \5 O3 g9 g9 m</TRACK>
) Y- [, R5 ?' N3 ?) E& g0 l* h. b) |, i/ f1 Y( v- Y% m% ^% n3 q4 t
<TRACK>
; i4 C. x. \* y6 u<TITLE>Five Hundred Miles</TITLE>) d# c7 n+ h3 A6 [
<ARTIST>Justin Timberlake</ARTIST>
% A: a% ~# J8 H" x' Z<ALBUM>Inside Llewyn Davis</ALBUM>: ^8 r; u+ U7 i/ x
<COUNTRY>美国</COUNTRY>
( R6 ~+ K! I. b. C/ v" @, ^, [! D2 A<COMPANY>华纳唱片</COMPANY>
/ Z* R2 A. b! x) y$ {<YEAR>2013</YEAR># f& o( R  d* D
</TRACK>
' ~5 O+ g7 ?1 X1 N* V5 f* }  i- w1 F! ~4 [
<TRACK>
! H& ?' W2 i) O5 k. _8 |<TITLE>演员</TITLE>! a( {  v: b2 r
<ARTIST>薛之谦</ARTIST>7 {! {8 c1 @6 @* E# o0 E
<ALBUM>绅士</ALBUM>: }( t' C' K0 N- A2 U; c' ~
<COUNTRY>中国</COUNTRY>
  V$ I$ z/ {0 L: t& ]7 z" e<COMPANY>海蝶音乐</COMPANY>
# a( w4 j. _  y<YEAR>2016</YEAR>
- [. ~6 i* Z& l& K9 G</TRACK>
8 E" R% t  \1 q5 ]* o3 x+ ?) N8 Y) o& |2 ]3 U6 ]4 ]+ g. F
<TRACK>
2 N% S2 Q) T( Y6 F" S5 C6 P<TITLE>Numb</TITLE>% A% C3 ~. S1 _% C
<ARTIST>Linkin Park</ARTIST>$ A3 f) D( w) s  |( ?8 r; S
<ALBUM>Meteora</ALBUM>( f  Z6 p2 Q* f& X
<COUNTRY>美国</COUNTRY>
1 {! _8 k7 Q6 `# s<COMPANY>华纳唱片</COMPANY>
$ F# I( @- ^( _<YEAR>2003</YEAR>
5 H: r$ X- f0 _1 C</TRACK>) N$ f) Z, n% e8 x+ }1 z; r+ }( L
. D- j2 s, P+ J$ A% C
<TRACK>
5 K7 N+ \* k9 G$ o) ~6 h9 U! e" f3 w<TITLE>给未来的自己</TITLE>
. W6 T; A8 F$ f) T+ B<ARTIST>梁静茹</ARTIST>
, U" o$ L8 h2 i1 `. s) D' k<ALBUM>崇拜</ALBUM>3 c" M; u: x& @2 g  m
<COUNTRY>马来西亚</COUNTRY>
  m6 K8 i* t! S: ~) U7 D5 v& O<COMPANY>相信音乐</COMPANY>
" t9 Y* t0 Y  z1 L<YEAR>2007</YEAR>3 k& L/ w6 p1 B" E+ e
</TRACK>
* P; b8 C  Y! U$ a) y0 {" h. w. h; L$ x3 q
<TRACK>
- I7 L) d( _8 g7 t, L<TITLE>The Monster</TITLE>
0 D0 Y/ I% p1 Z$ s$ f# l( R  ~# _<ARTIST>Rihanna</ARTIST>
! |% E6 ^$ ?, ^<ALBUM>The Marshall Mathers LP2</ALBUM>
* K% P& f  ^3 W" x, U& E7 ^<COUNTRY>巴巴多斯</COUNTRY>2 u7 h, r7 k0 E& Z4 w
<COMPANY>环球唱片</COMPANY>7 B& o1 Z% _( a6 W: f1 `
<YEAR>2013</YEAR>
9 F* _  u! H& _: ^; b( E</TRACK>9 X$ {4 y' }+ @0 m9 e
) @: j5 s* ^( S' o
<TRACK>
, W- w4 z' M( x1 b<TITLE>我终于失去了你</TITLE>
5 R; P% _9 I) S+ B# x: a9 @<ARTIST>赵传</ARTIST>" G1 s7 }2 G  V3 t9 b
<ALBUM>我终于失去了你</ALBUM>; Q$ Y- T' [% C+ _7 T9 E
<COUNTRY>中国</COUNTRY>* t- @4 V0 i! b5 ~: v
<COMPANY>滚石唱片</COMPANY>; c' x" {8 o/ t$ C4 I& w! K
<YEAR>1989</YEAR>
: N! B6 V0 @& x6 P6 j- o. D</TRACK>" v/ y, n- y; K2 v/ Q7 z
1 C4 M6 f3 a9 s' F
<TRACK>+ ?# w6 z3 J4 Q2 t$ C! Q
<TITLE>Main Titles</TITLE>0 P! b) `' f* |4 f
<ARTIST>Ramin Djawadi</ARTIST>2 y2 b! D: W: E" n
<ALBUM>Game of Thrones</ALBUM>
+ P6 L  {& ?/ _. T. _% @, q<COUNTRY>德国</COUNTRY>
5 n/ u1 e' T& z9 W/ B' J& G<COMPANY>索尼音乐</COMPANY>3 B4 @& P1 m3 f# c
<YEAR>2011</YEAR>
3 c* X/ f1 R0 ~0 P& ^/ j1 i</TRACK>
% Y1 H* T8 Z3 q1 Q7 D# Z! Z. a; Q) H7 A% D3 a
<TRACK>
+ G, u, D2 N& t& S& ?) e<TITLE>传奇</TITLE>
7 ]" [5 F0 k3 K& l$ Y<ARTIST>李健</ARTIST>5 N. Q9 E8 d# L0 @/ g+ ^5 n: B
<ALBUM>似水流年</ALBUM>. i0 e3 J7 t9 W* _1 }: H
<COUNTRY>中国</COUNTRY>( b9 d. ~8 {5 x9 q6 C
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
7 h2 [4 J2 I1 Y2 m+ L<YEAR>2003</YEAR>  H" Y  ^6 l& ]3 D; e
</TRACK>: M+ f1 y6 k- z4 N

) a$ Y  D# j# j, @( G1 S) O<TRACK>. `4 O6 P: J" I9 D- {% a1 R
<TITLE>完美生活</TITLE>
' ^- o# m/ V, G* I* k<ARTIST>许巍</ARTIST>" h* O7 Q, w! u0 K( t
<ALBUM>时光漫步</ALBUM>
& t* z; R: H) h" X. t<COUNTRY>中国</COUNTRY>
8 Q. C" q; H/ F9 w8 B) m<COMPANY>金牌大风</COMPANY>$ I( _, r2 O$ m: E' {; ]! P
<YEAR>2002</YEAR>
2 ]# b8 }% d% o2 ^$ |1 s</TRACK>$ O  g+ K: a2 k. [6 d
</CATALOG>[/mw_shl_code]
' ^! _5 l5 x# }9 Z$ S

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

热图推荐

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

admin 楼主

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

发表回复