使用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;) v' t; x+ V1 q: \# k% P6 ?" G
  table += "</td><td>";
- n3 n2 M0 |; s, J  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;- @" b% u" V) w. X% _2 I
  table += "</td></tr>";8 l  G' P* j* P9 S
}
9 ]/ R4 U5 B2 c/ t- K& d6 `: A  u4 E" ]! x* ]8 W: i' ?. V; G
document.getElementById("demo").innerHTML = table;
& T. [: y1 x! E+ \1 Y% C, l" g& `& xvar i = 0;
; o) B8 E3 N3 P1 d* E! l       function next() {7 y6 d9 ~% R) \7 I( c) J/ f
         // 显示下一首歌曲，除非已到达最后一首
4 S  T- H8 V& @: n. C6 T( i5 @          if (i < x.length - 1) {
8 Y3 I5 {4 B! P" J- H             i++;* A, s- ?% u, }! q+ F
            displayMUSIC(i);
8 @" F. `/ Y  ]9 B% H          }
8 |+ W0 p# c7 p       }7 a% ^. v+ Z; B! B/ g
5 s+ f' @4 z! X" @2 Y+ Y" N
      function previous() {
9 c0 Q. c+ Q; I0 f% R  r7 V          // 显示上一首歌曲，除非已到达第一首
' L  }( ?( ?7 Y2 L+ w# y. [          if (i > 0) {( g( g0 L& U6 _% @; g+ [
            i--;! p) I' G9 B& }$ O: s4 t2 b
            displayMUSIC(i);
& @3 B) C* @1 L9 B7 I          }
5 b9 y$ z8 K' g) G+ b( U( U       }
* \: [6 [& l( d# R3 O) u# R" F$ ~6 z! d* G
      function displayMUSIC(i) {+ r- o% P2 ~  p) v/ d+ h
         document.getElementById("showMUSIC").innerHTML =
4 J' G2 Q/ j2 e8 }             "<ul>" +6 Y/ D  f7 a# Q& I$ p; l
            "<li>曲目：" +
+ [! N+ e: z& Y$ R             x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
( L, M7 c6 z4 k% P% F6 r             "<li>艺术家：" +
% D3 P0 T# L# n             x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
1 w4 {  l6 w  l3 w             "<li>专辑：" +
3 @# x+ y- H9 R% j6 U3 N+ R             x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +2 C1 @6 h# S* t: ]
            "<li>国家：" +
1 @+ X* Y5 d0 N7 e5 c             x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +' R7 B4 K. ?, b5 w5 b7 V9 |, h/ I
            "<li>公司：" +
# z' i$ f" u1 Z$ e: A# G9 ~             x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
' w! z4 s+ D7 U& Q# T             "<li>年份：" +3 A( S, m0 ^9 ^6 J
            x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +  I+ X2 R, C2 Z. `; @% r" L
            "</ul>";
* J: Y, J: u7 V9 s1 ?       }1 `8 o0 h) E1 {9 L3 a- W

. x4 @1 h; ?, I/ S       function loadDoc() {" ^* k- N) p1 U) |% T( b
, F; C1 s  S8 I/ a; K' S
         document.getElementById("demo").innerHTML = table;
: V8 f+ g# h2 s- w" u9 k       }
; M2 a+ I0 S3 R1 Y. f5 R9 H4 ^
) y& V% O1 V2 H% A' g  U </script>, \0 ]8 Q0 w( H" \0 N

; D) v  G$ E2 q( e% I# a( r, r$ P/ M1 R3 U
</body>
1 b! k/ u5 Y, I4 M2 H0 A% o0 @" t. v% a2 E: J
</html>& F& K9 P, {/ {) y4 v

- U. ]; e* z" }- V! I
* O) L# x$ ~1 r[/mw_shl_code]# n+ b. t5 o' |- ?

' A, |' B  t$ ^5 ?# K
" o7 t* ]! |7 f& f2 u3 R$ f: Y8 g. X1 r  E7 @7 X* M, f* Q- V
XML文件
) z- g1 g7 i# Q$ f5 m0 V! N6 x  F% F5 }; k. g4 |  m1 ^7 A
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
9 h. ?, |1 V: {0 A# d$ V<CATALOG>) |, @& z( }( h; B
<TRACK>
( l) X; K4 {$ b/ n6 s<TITLE>再见</TITLE>
+ W" Q8 s; d+ w) S" e<ARTIST>邓紫棋</ARTIST>
7 j- E. N+ e) R- T$ p<ALBUM>新的心跳</ALBUM>, M4 r+ z% ~8 T. d/ E; I
<COUNTRY>中国</COUNTRY>9 |( W/ K; P: d1 u, q
<COMPANY>邓紫棋工作室</COMPANY>
+ K" J) e( B: q- ]* g% l<YEAR>2016</YEAR>
: @- ]$ d/ @* {& C! d3 u0 a</TRACK>
' r6 T8 k6 s- Z- X% t% n& k0 x7 S! W& Q# j1 [. T6 s
<TRACK>
2 ~, c& e9 |; a) C  ]4 ^; S/ s2 B<TITLE>All I Ask</TITLE>
' E0 w3 X+ H" M& ~<ARTIST>Adele</ARTIST>
/ r+ m" S! O+ V( k! \4 K5 Q& z% v<ALBUM>25</ALBUM>
6 h( i4 g" Z$ r6 j; G8 o<COUNTRY>英国</COUNTRY>  K' b& X0 C% _) Z7 j
<COMPANY>XL Recordings</COMPANY># Z# O# n) v$ Y* A! w; _6 `
<YEAR>2015</YEAR>
( Y* k& w; }4 ]. k& q</TRACK>
; J- ]: U" ?: i. e, \
! l1 {$ Q& K' k9 C<TRACK>& }$ ~! _8 S( I7 Q
<TITLE>之乎者也</TITLE>
; g: s6 ]0 j& j" m) t$ t3 L. F<ARTIST>罗大佑</ARTIST>
7 y+ _- l9 b6 _$ A! V) Y/ b<ALBUM>青春舞曲</ALBUM>9 x* U: J& {) W& T& Z! j3 v1 N, ]: J7 I
<COUNTRY>中国</COUNTRY>) `( w; p. l5 }# {/ s7 g/ L
<COMPANY>滚石唱片</COMPANY>
+ ]! @% }1 n4 |* m1 @<YEAR>1982</YEAR>! E+ V* f. L8 R! Z/ V. M' M- P2 c) v9 V
</TRACK>
; @6 C' @1 v7 \4 y" y2 G4 z/ y4 Z: e, D* d* D
<TRACK>8 n+ i2 S8 O# D" l( c- c7 M
<TITLE>Never Be Alone</TITLE>0 i' R4 m0 c* R2 u8 A2 u
<ARTIST>Shawn Mendes</ARTIST>! o* W# i7 ~, A& u: l0 Q% Y5 n3 u* X
<ALBUM>Handwritten</ALBUM>  T8 s/ V, N3 k$ K8 Y
<COUNTRY>加拿大</COUNTRY>
/ Q8 O) Z6 `) I* ^* ?<COMPANY>环球唱片</COMPANY>
5 E6 x5 L9 o6 \<YEAR>2015</YEAR>; e6 H2 K' X9 R; E8 T2 D8 s$ |
</TRACK>7 T5 x/ F) X2 O) H2 r0 R7 m7 _. `
8 G6 P3 m4 ]$ h, |
<TRACK># w! ]- O9 |9 X* t
<TITLE>慢慢</TITLE>
: c' t+ Z# b- r8 v5 J<ARTIST>张学友</ARTIST>
  m% O0 d! y1 f  i! G2 j/ h& C<ALBUM>忘记你我做不到</ALBUM>
5 u1 Y4 i% F3 x! }) a<COUNTRY>中国</COUNTRY>
" @& F- |; q2 E: a<COMPANY>环球唱片</COMPANY>6 M& E2 d/ _" Q+ p3 G
<YEAR>1996</YEAR>, K2 \" \3 }6 Z% s( H
</TRACK>
& g8 K  M( g. ?' z4 T" j
7 U6 F4 u0 l) J; G% q<TRACK>
6 j# M8 R% m) M( g& Y9 x/ f<TITLE>Complicated</TITLE>
0 @, |9 i: b; E. G<ARTIST>Avril Lavigne</ARTIST>
- i0 i7 T- H% O% Z, }( ^<ALBUM>Let Go</ALBUM>" _% L3 N3 c0 B5 p" t* m0 r
<COUNTRY>加拿大</COUNTRY>
+ C/ ^. t% r% C. y3 O2 s<COMPANY>索尼音乐</COMPANY>5 J5 D9 ~6 l8 a% K9 X  T! y7 P- M" ?
<YEAR>2002</YEAR>9 ?- G. l( s5 x6 v) m0 _' G6 K
</TRACK>
( l. s* W6 J3 C& O% d
' O2 U3 i" O3 ]3 N; h6 c' ]<TRACK>
% g  r; r- t* V5 [& w* K<TITLE>三生三世</TITLE>
5 y8 X; _* X) @1 f) I<ARTIST>张杰</ARTIST>2 c; S. d# Q5 U" x/ d4 |7 s7 z8 S
<ALBUM>三生三世十里桃花</ALBUM>
  G4 ]4 |( }4 E) r+ h' [6 b<COUNTRY>中国</COUNTRY>
& h0 e8 x# ~4 U1 ]/ C0 A- C: W2 e<COMPANY>仁溪音乐</COMPANY>  I7 D; w7 {, j9 F- B+ a* N9 P
<YEAR>2018</YEAR>
1 F5 q! n2 q- C! U</TRACK>
3 P5 E2 |3 P5 F8 q" ]  H; l# c: v+ s+ o) Y7 F6 s+ z; n/ S' y& I
<TRACK>
7 b) E* `5 s9 D2 M( P<TITLE>Five Hundred Miles</TITLE>. O; v9 X: X" d( V, v, b; l% x% f
<ARTIST>Justin Timberlake</ARTIST>
/ b6 ~# _! {4 }8 ?- C" d<ALBUM>Inside Llewyn Davis</ALBUM>
1 S* ^7 b6 V) K0 p, |, k( V6 q<COUNTRY>美国</COUNTRY>
4 Z6 h2 F0 Y0 t0 u. R<COMPANY>华纳唱片</COMPANY>" O0 S" ], b2 c5 M9 t
<YEAR>2013</YEAR>
5 m: f$ Q' k2 r! a6 r- ^</TRACK>* ]) R- w8 X: M/ Y
/ w# A/ ?/ m# H
<TRACK>
& C# l2 o1 Q9 z. \" m  ^<TITLE>演员</TITLE>
# F8 b( M' ^/ D& O- n+ N% |<ARTIST>薛之谦</ARTIST># n( H. S6 ^! C1 ^$ k
<ALBUM>绅士</ALBUM>
1 v0 G* V; J( J: b( |/ D& d<COUNTRY>中国</COUNTRY>
8 w; o/ ?/ [' V: @# `<COMPANY>海蝶音乐</COMPANY>0 X7 F) V, `6 e2 q
<YEAR>2016</YEAR>
) j& ~, U' Z- g( c1 R% I& S3 l/ `</TRACK>
/ i! q1 `7 o' G+ h( V! h4 l  c: h/ Q% p
<TRACK>$ A) ~: U9 W: b/ e$ U2 e
<TITLE>Numb</TITLE>
+ f6 I8 a3 F' A" Q$ v  K4 f1 a7 x<ARTIST>Linkin Park</ARTIST>
5 Y7 b& p6 Z3 N4 m( }( Y3 @  @/ P<ALBUM>Meteora</ALBUM>
" g1 ]& ]- t$ O& a* f<COUNTRY>美国</COUNTRY>
7 u" i2 J: c1 s! V. s<COMPANY>华纳唱片</COMPANY>0 _0 A$ `% F. `% L$ p# x
<YEAR>2003</YEAR>
! H" c7 \! _9 k2 ~2 M' W# S</TRACK>- u: |; q* Q6 \4 r/ \
0 s0 X; \3 o9 H4 I$ C
<TRACK>
, A0 t3 Q7 ?3 o7 j, p2 c& P5 h* P<TITLE>给未来的自己</TITLE>
) s" W2 O( w/ n: }" y, Q" v<ARTIST>梁静茹</ARTIST>  V1 {2 |' u  G( ~2 M4 c& T6 T
<ALBUM>崇拜</ALBUM>: }* [  Q# C: I+ ^( C; h4 I
<COUNTRY>马来西亚</COUNTRY>
" t% D# b8 d) h& R4 `% U3 G( v# q! r<COMPANY>相信音乐</COMPANY>
' n6 N# I) Z/ _1 _& h<YEAR>2007</YEAR>! ?* n5 n) _3 x
</TRACK>
7 z5 X: h* f! I2 X) c, k$ a# b1 v2 b! ~4 |- {6 n5 @* D
<TRACK>( g. s8 O- N4 W
<TITLE>The Monster</TITLE>$ M% y, v2 A' t% w
<ARTIST>Rihanna</ARTIST>
( k' k2 B) |3 J( e1 C<ALBUM>The Marshall Mathers LP2</ALBUM>9 _2 v9 Q% h' G% ~! i. T
<COUNTRY>巴巴多斯</COUNTRY>
" h2 l1 ]6 H; J2 ?<COMPANY>环球唱片</COMPANY>
- D  u- u/ n+ ]2 s' j<YEAR>2013</YEAR>! [& u% e, S! o" L
</TRACK>( B  c3 X' P. Z
: w  F" U  f) w% E
<TRACK>
* E! @8 L. K) r6 u! [1 d  Q7 L  t<TITLE>我终于失去了你</TITLE>
3 @/ A' \& r0 M7 W! D' _<ARTIST>赵传</ARTIST>5 S6 V3 M; Y/ |
<ALBUM>我终于失去了你</ALBUM>
( v+ F1 ^( g+ V/ m, ~6 B<COUNTRY>中国</COUNTRY>
+ x( h# ^2 l# A8 }1 t$ N<COMPANY>滚石唱片</COMPANY>& c+ X- q+ D7 R4 X
<YEAR>1989</YEAR>6 T+ g2 ?( |# t
</TRACK>
+ U9 w! C: x6 o5 O' `0 V
<TRACK>
, g4 z7 S7 l' A, ?$ f<TITLE>Main Titles</TITLE>
4 ?+ r2 B$ R9 J8 H<ARTIST>Ramin Djawadi</ARTIST>9 Q# M+ c& t! h
<ALBUM>Game of Thrones</ALBUM>1 P$ F+ s9 h' K: l! B% V
<COUNTRY>德国</COUNTRY>
- s! P) S# L( q9 P<COMPANY>索尼音乐</COMPANY>5 }. q% ~- c$ x8 M# h6 q3 }  A
<YEAR>2011</YEAR>' g! O  }; I* v
</TRACK>
' ]: r- |: ?8 F) @. ~* p6 Z3 h+ M8 w1 U6 d0 R' R; p5 P( ]
<TRACK>1 {2 T5 e6 c# D. q) p
<TITLE>传奇</TITLE>9 _# m/ y; v2 V1 v0 |7 {# w
<ARTIST>李健</ARTIST>  ^7 j6 H" w, e6 }5 A+ v
<ALBUM>似水流年</ALBUM>
% B9 g3 O( S# j0 e6 d1 r7 q+ z% s0 A<COUNTRY>中国</COUNTRY>' d3 g4 ?  m, z# u. n# y+ p( f
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
5 W1 b; q: M+ z/ Z' X9 t<YEAR>2003</YEAR>
2 O$ z8 s/ z* h4 i</TRACK>
+ C$ u6 ~5 s5 Z7 K$ v% ~
! P7 P: a2 b4 x* _- y- ]; [$ D/ X<TRACK>, z9 R1 J! K! \$ X8 J3 l; m9 q, w
<TITLE>完美生活</TITLE>* s# {/ c# k1 _
<ARTIST>许巍</ARTIST>( s/ j. y5 ]  q# R
<ALBUM>时光漫步</ALBUM>6 A# R8 \& g# q: \8 w
<COUNTRY>中国</COUNTRY>( h0 d% O+ e; I& {/ y7 F8 s) I
<COMPANY>金牌大风</COMPANY>
; l- ?1 g; d1 C<YEAR>2002</YEAR>' b$ E1 V! ?& b9 n# B- W; w, W4 B) F
</TRACK>
; Q4 z$ u: C3 S0 ~, ~# `, K</CATALOG>[/mw_shl_code]  O% y" y4 D6 q7 s* g

PLM之家PLMHome-工业软件践行者

热图推荐

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

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

发表回复