使用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;
) U, m; l3 g# A  table += "</td><td>";
" T& U4 @$ d1 f" D) v  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
+ o5 H3 f# U/ ]  table += "</td></tr>";6 }! _* ^+ ~) K! x, n' P  R9 ], F* b8 ^
}
$ I" `" H# ]5 v5 U) g8 q: q% j: O3 G0 A) r
document.getElementById("demo").innerHTML = table;
' x. V/ |5 C( \4 w* ]$ Dvar i = 0;8 ^9 \: a, _' Z( w# _, R% u
      function next() {( p1 k2 v+ r( ~, X/ i
         // 显示下一首歌曲，除非已到达最后一首0 b9 ~# W  o& u& r0 t+ o2 L
         if (i < x.length - 1) {; ~* |2 |$ _, D6 n2 |( D
            i++;
8 m+ F" H; z, v# o             displayMUSIC(i);. H/ a9 h5 `4 h/ u1 q" f, ?
         }9 A5 k. q# j( T1 [, h: V
      }; L5 }, Z* }; z1 h4 w7 ?

7 m$ h# p- Q0 i- V/ ?, }       function previous() {' }( l6 ~9 B: L
         // 显示上一首歌曲，除非已到达第一首8 Y/ C: X3 U5 y3 k8 H3 w( Q
         if (i > 0) {- e; B, A9 L. U
            i--;2 }0 H3 B8 e# {& e& [' i
            displayMUSIC(i);& b$ W/ n: e8 i8 r9 D9 y6 ?
         }. Z- P( a% L: l7 s6 e1 Y* _% X
      }& j6 `- f6 k5 l$ W0 R9 l' Q
8 B8 ]0 B/ F+ {* l" z
      function displayMUSIC(i) {3 Z0 E* g: t/ `1 `
         document.getElementById("showMUSIC").innerHTML =8 f* C1 y5 Y: B! n) Y
            "<ul>" +8 ]- M! w: {* r& T* d1 F0 v# H
            "<li>曲目：" +3 W, _  k" [& k# [% V
            x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +  C9 ?! t5 _7 {- A! R. D- v) ?
            "<li>艺术家：" +7 P; c6 E. `( ~4 I% |8 P* `
            x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
/ X$ _4 a6 r9 o( q2 v/ z             "<li>专辑：" +. J5 A4 c! C" @! h( Q$ \
            x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +* ]: |* D5 s3 d2 x
            "<li>国家：" +, {, B& S  o$ U2 g: R
            x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
7 O: L! i7 J. s             "<li>公司：" +* W& n& g- b: X% F
            x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
, Z5 _  {" {, q  \             "<li>年份：" +6 F3 K* e9 g' O7 `) ]  p
            x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +3 ]  Y3 h, [" @) S4 A" G# j
            "</ul>";
7 P2 x: J& B  o       }' O; F- P% x# D: ?

+ O* ~. E+ N" ~( G0 R       function loadDoc() {
: _+ O: L( B) e7 X2 H. @& F0 G" E8 ]& m3 l; Y6 n4 Q; Y
         document.getElementById("demo").innerHTML = table;7 k6 T  y' L* B
      }
8 o9 V- O3 E3 P  ~6 v, H- D
: W; G6 |) D1 D$ \ </script>
5 R( ]. T9 [) R7 \" }4 R5 z0 Z! ~  i$ G( {, W  B

9 V* H$ R& ?& d) K+ I8 m3 W# S% L</body>
2 u. C- G  \" B+ B. V  U, K
1 V3 W$ h* n! h: N9 d( ]: [</html>
; I! U, M; V! K+ m1 S& T  E2 q5 |/ c& }  }& y; f

( A4 \) q1 M  O; W5 B0 R[/mw_shl_code]5 B% i4 t5 |  C  e4 P

1 K5 ?3 {, s0 K6 I, T% N, d8 `1 l  t* \( G) c! x
" T" v1 p# u1 h4 U5 }
XML文件
' }; ]0 [8 S7 g5 G" p6 s' @1 S3 N
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>  O# ^1 J/ ^# G% ^( O" k- V
<CATALOG>
- d! |+ X7 ?1 }3 g<TRACK>: ?) n, [( C0 P; _9 _* e0 e& h
<TITLE>再见</TITLE>
* ]8 _9 n& i+ l6 p7 C: ?<ARTIST>邓紫棋</ARTIST>5 }. {5 L9 Q) S, V
<ALBUM>新的心跳</ALBUM>- Z% W: X% G- Z! D3 r& K0 H
<COUNTRY>中国</COUNTRY>
9 h2 }* G1 E) V* _<COMPANY>邓紫棋工作室</COMPANY>* `' t% r' t  g! W
<YEAR>2016</YEAR>+ s& [' I5 D( U
</TRACK>
. w/ n" c: k6 x# R6 Y" V; Z
) Z4 `, }6 K$ o' h( Q; b2 j6 k<TRACK>
* |0 G6 K' V5 ^+ B9 |8 a<TITLE>All I Ask</TITLE>
5 U- x2 W! j& l6 Y<ARTIST>Adele</ARTIST>
0 J5 a9 @+ q: F' f6 Y3 ?! n<ALBUM>25</ALBUM>3 K2 w9 E. l: U4 U# P2 g% K! @- Q) ~0 @
<COUNTRY>英国</COUNTRY>
' G' S3 C4 R# J<COMPANY>XL Recordings</COMPANY>
  k$ A0 r7 T; d3 \* j<YEAR>2015</YEAR>( A, U/ `# s; L  V2 v
</TRACK>
( j% p4 A1 I- n7 x$ Y& A# v; e) W/ ^8 @6 O
<TRACK>) q, p. `5 f1 r) w3 h4 ?% J; R+ X
<TITLE>之乎者也</TITLE>7 r1 s6 G6 D( w7 o( R" O. F
<ARTIST>罗大佑</ARTIST>
  i/ a8 z& q# [<ALBUM>青春舞曲</ALBUM>; Y, N2 f& p6 m0 n. T
<COUNTRY>中国</COUNTRY>& w9 d9 q/ A) H5 _( e3 W
<COMPANY>滚石唱片</COMPANY>2 u: ?, x) i3 {
<YEAR>1982</YEAR>
& m" E/ ~: Z: {3 R4 X/ c</TRACK>
8 a' U, e4 S7 }; r; B  J# ]4 o1 o! d; D# U% J3 S- Z8 G  I
<TRACK>" M9 K, H. F$ s8 D- k
<TITLE>Never Be Alone</TITLE>
4 d, T- d3 z8 k7 A* F: l3 e; {<ARTIST>Shawn Mendes</ARTIST>
: K! ^2 F* W  Y<ALBUM>Handwritten</ALBUM>
3 I4 x/ Q. H% {: }* k- T8 B- q<COUNTRY>加拿大</COUNTRY>0 T4 h2 _( }0 E( Z$ y, `, H
<COMPANY>环球唱片</COMPANY>6 Z- {$ r8 z  Z/ s1 C- L
<YEAR>2015</YEAR>6 O; N/ C" O6 I3 |% ]9 }; u' _
</TRACK>" P+ {; T; ~0 d! [6 p

9 S+ z! Y5 F$ O4 W. G$ p& b2 @) M9 m<TRACK>
# F1 j5 @: k1 x% Z; f0 [8 Y<TITLE>慢慢</TITLE>
& o7 P% R- t6 y<ARTIST>张学友</ARTIST>
/ W) _+ S4 N" e0 ^- }$ z" |<ALBUM>忘记你我做不到</ALBUM>
' H8 F3 k1 f0 a7 T5 R+ Y! Y0 Y<COUNTRY>中国</COUNTRY>
8 K1 J& u) [0 b4 N5 ?1 q2 W# Z<COMPANY>环球唱片</COMPANY>2 s8 U/ l1 ~6 F+ i9 Q
<YEAR>1996</YEAR>( G4 I5 E& _* O! e: C" [
</TRACK>
8 `* W% w( f9 B) l( }$ _2 M9 q+ Q* y
<TRACK>
- z& d8 x# |* C' ?# f9 l<TITLE>Complicated</TITLE>
2 }. h7 ]4 D* a" L5 u; N# E' U/ y<ARTIST>Avril Lavigne</ARTIST>  V" U. a* f8 Y7 z; v5 r
<ALBUM>Let Go</ALBUM>
) e% S  r+ [( b. A& z$ v& @- P* g8 A<COUNTRY>加拿大</COUNTRY>6 z+ m/ Y) Q3 S! x8 y2 L4 j
<COMPANY>索尼音乐</COMPANY>8 P. x1 f' u# q$ A; p' w/ `
<YEAR>2002</YEAR>
# j) l0 W' j3 J' ^; `</TRACK>0 _& Z+ a+ q. L/ B) ?$ R
9 K& U' ~/ t) X: v+ [  e
<TRACK>! y- P6 y$ r9 b' g
<TITLE>三生三世</TITLE>
1 a) c, o5 y/ z4 J. j: {3 M. g# G<ARTIST>张杰</ARTIST>) J+ c1 \" G3 u
<ALBUM>三生三世十里桃花</ALBUM>) _0 j( H0 K  C9 d2 X" J. l
<COUNTRY>中国</COUNTRY>- Z3 S0 e+ x: Y/ z5 ~
<COMPANY>仁溪音乐</COMPANY>: ~8 U# p# k; B5 u( W8 o
<YEAR>2018</YEAR>
: C/ p4 w, R3 ]+ \- U</TRACK>
: Z1 I1 v3 L6 j1 j& ?7 o5 Y4 c* S, O
<TRACK>
$ K) U( J6 q, W<TITLE>Five Hundred Miles</TITLE>
  f" u! c+ W7 U. E& i3 j% p. R<ARTIST>Justin Timberlake</ARTIST>5 P/ Y; A& Q6 L- l% R7 H& m
<ALBUM>Inside Llewyn Davis</ALBUM>0 o" Z2 m: F* j- m5 z
<COUNTRY>美国</COUNTRY>
! |' k4 y6 R+ o! j7 e- B/ b<COMPANY>华纳唱片</COMPANY>
, N: C/ O1 t" X+ j& `! u! T, N9 b* P<YEAR>2013</YEAR>
* D4 T( z1 a+ ~" z& p' B' y</TRACK>
9 p* P2 P0 O9 A. K- }  }* G3 K3 L- z; p* u) R- L
<TRACK>
; D( R! B: }  A0 l+ M<TITLE>演员</TITLE>3 Z% B' g. i( Q" C- A
<ARTIST>薛之谦</ARTIST>) r/ ^; ^; [- d% R$ _0 ]
<ALBUM>绅士</ALBUM>- \4 d8 ^! @) ?2 ~4 P- |
<COUNTRY>中国</COUNTRY>/ L# [# l1 j2 D3 @  y2 t
<COMPANY>海蝶音乐</COMPANY>
' [" \" x, J# D$ s<YEAR>2016</YEAR>( P2 P  O/ H* z: F* m
</TRACK># O2 u* }4 U. Z4 Q3 G$ G) U& i1 r
2 a; I) q" ]5 m+ {# J0 ~
<TRACK>
3 X) \4 k5 a1 ^; _) K<TITLE>Numb</TITLE>. t" r7 T7 i/ A0 L& O
<ARTIST>Linkin Park</ARTIST>
7 E& t+ j  p" r* [0 L( N1 d% g<ALBUM>Meteora</ALBUM>3 p8 U* w3 d. F2 R% ~" @
<COUNTRY>美国</COUNTRY>
5 q8 {3 r( d7 k+ n<COMPANY>华纳唱片</COMPANY>
( E  n4 e( d9 D7 u! g<YEAR>2003</YEAR>' t! p! E5 Q7 b) o( Z
</TRACK>& l& ]9 t% N' f$ ~7 h2 d& ]
7 p  K! h% ~. {; O9 ?
<TRACK>
: K6 ^4 T" h9 \% W; i- l! d4 n<TITLE>给未来的自己</TITLE>
7 v$ y6 C' s: q( ?2 E<ARTIST>梁静茹</ARTIST>3 G# ?) m' \2 s. Q1 c' X
<ALBUM>崇拜</ALBUM>+ p$ z9 J8 v7 `( v1 ^
<COUNTRY>马来西亚</COUNTRY>
3 ]1 ~0 o3 l1 m. F3 k<COMPANY>相信音乐</COMPANY>
& u7 Z+ a: ]9 B. d<YEAR>2007</YEAR>  I. `; F- @' q; l) `) x1 ~
</TRACK>
* e2 W" m5 ~, u1 W0 ]0 ^# s
  b' F& v8 P: t4 K1 Z# ]7 g* I<TRACK>
3 d/ z. s% f) Q" r1 c, \4 ]4 g<TITLE>The Monster</TITLE>
$ J7 I) W- S) s. {7 y' q6 Z1 V$ k<ARTIST>Rihanna</ARTIST>
6 o+ b8 K' D. R0 I3 j! N, A8 O<ALBUM>The Marshall Mathers LP2</ALBUM>
) E4 v4 b9 h; j: y% q7 P<COUNTRY>巴巴多斯</COUNTRY>0 C# t% _6 V( ?( P
<COMPANY>环球唱片</COMPANY>
2 W, N- g1 w3 |) k, ]<YEAR>2013</YEAR>
5 }; v8 d% u9 X1 p</TRACK>7 Y! Y! W/ G) D% Y2 v: @: X
- v: |2 d1 P5 x. N6 F. |
<TRACK>5 [3 O7 t2 c! c, Z" y0 C
<TITLE>我终于失去了你</TITLE>
; M  i/ r& d# Y& p, l<ARTIST>赵传</ARTIST>7 Q  Z! H' u: A, U  ~
<ALBUM>我终于失去了你</ALBUM>7 F. ~& Q; q5 W) [" q7 P; u' ^! Y
<COUNTRY>中国</COUNTRY>5 D8 L" ?2 V5 k; l( Y2 k
<COMPANY>滚石唱片</COMPANY>$ w8 `3 c  O! r- ]: [
<YEAR>1989</YEAR>
0 j, M% k. z4 N' ]. p</TRACK>6 P8 Q' P( o3 k6 j: t% i' \/ ]
8 \8 f% u, H  U# u1 x
<TRACK>
0 A) ^) X( m# ~% |<TITLE>Main Titles</TITLE>
. Q% Y- j8 X% D1 x, W" |* l+ z<ARTIST>Ramin Djawadi</ARTIST>
  H: H, `: Z0 \, M2 X<ALBUM>Game of Thrones</ALBUM>
2 @& z2 `7 r& o" Y<COUNTRY>德国</COUNTRY>; w1 `' a2 T5 K  [: _, g- A, c" r
<COMPANY>索尼音乐</COMPANY>
8 F: p% H5 k5 E# F" b& B: V<YEAR>2011</YEAR>
+ J) v! L+ D. j7 s4 d</TRACK># F* J9 i$ \: G9 X; X/ a

' A+ z, |: J7 m3 E) X7 k<TRACK>7 _% i! D% O" L& G. }: w$ C* J
<TITLE>传奇</TITLE>
  q6 I- Q6 w7 n3 U, u# `<ARTIST>李健</ARTIST>
8 ]. j. B7 V$ L* t<ALBUM>似水流年</ALBUM>
) P; F# ~  I* A0 V4 m# ]<COUNTRY>中国</COUNTRY>
% |/ w, W$ S! T( Y/ Y* K, a) T; N<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
! c$ h, {; o' r1 B$ |<YEAR>2003</YEAR>
  a/ H" u% u, V5 r  o8 `% I7 q</TRACK>
0 V7 y( x: {- }+ H2 C9 X
3 H* F2 y! s4 b% E<TRACK>
% W" i' Y! o' p3 I0 f, K<TITLE>完美生活</TITLE>
9 I3 i1 w$ T  s% Q<ARTIST>许巍</ARTIST>; H; _7 j4 f4 ^
<ALBUM>时光漫步</ALBUM>
& K4 ~7 p* L. ]$ G<COUNTRY>中国</COUNTRY>( n' [/ U" O1 r( n* o% o( I5 B
<COMPANY>金牌大风</COMPANY>
, i" u7 X7 n/ ]  ^6 o$ H8 v9 @<YEAR>2002</YEAR>
. B: c3 d: Q% O6 G</TRACK>
2 `" m# D: m% C6 o) D' X1 u, ]# I</CATALOG>[/mw_shl_code]$ A3 e0 ^/ O8 V0 b: f

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

热图推荐

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

admin 楼主

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

发表回复

浏览过的版块