使用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;
- R! w* e! v/ t; E: _  N( L  table += "</td><td>";% |: F+ v5 x6 b) H+ J8 J* O+ z
  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
- t, }' ^+ V! a$ c  table += "</td></tr>";
  F3 D( \2 T. z3 t1 m" f6 u( d9 A}
4 s3 f" S2 N1 X* k& X1 q: K. P" `4 U# a0 R1 J, {1 M
document.getElementById("demo").innerHTML = table;5 c) M1 E' M/ g1 J0 q
var i = 0;
( I' I+ U, l- d4 g6 {/ }8 F% @       function next() {6 L( g  U6 d7 |8 I2 v- b# k
         // 显示下一首歌曲，除非已到达最后一首
8 l% ]0 h; i: a& m          if (i < x.length - 1) {
4 `3 a% W# I; P/ g# U* t: [             i++;
  A. [* N( H0 }. w: Y7 q             displayMUSIC(i);
0 w- r1 A+ P7 r. I          }
/ v( x' E* C4 l: c9 H/ A       }
! k/ o1 J# L6 Z/ A/ r$ z  @7 ]4 Y" h) m4 U
      function previous() {3 P( v( M$ g/ U
         // 显示上一首歌曲，除非已到达第一首
' ]5 Y# z9 W9 K8 x          if (i > 0) {/ H1 y5 c; R& I" j% c' H; ]. Y
            i--;
' l  L% X6 ~) O             displayMUSIC(i);* ]+ e; q9 i1 d& h
         }
- O. a7 `; h# i       }
" }% Q" b, e3 A
/ Y% ~$ E9 o. n8 o       function displayMUSIC(i) {
1 u9 S4 _5 M5 @" p5 ?# A7 E5 X! r          document.getElementById("showMUSIC").innerHTML =6 O- M7 _; t! H: S5 x9 E) w
            "<ul>" +5 S  Z' b. Y3 e: T2 |' h2 w* E
            "<li>曲目：" +
* ^& Q3 X, J5 W6 J             x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
7 O* Y+ Q& A  M/ @9 n, p0 H( I' F             "<li>艺术家：" +- @  d9 @9 R! C
            x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
6 |% m7 X' \6 b% }! y             "<li>专辑：" +
! T& h) ~# ~* e' J3 c             x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
- q+ ?; S/ [, ^5 |$ W7 l9 z             "<li>国家：" +; G6 ]/ q+ l  s4 r1 f2 J+ V% ^
            x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" ++ q$ v4 p" g  f0 n6 V# Q* J( j" q  d3 M
            "<li>公司：" +, @7 }5 `! M& V
            x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
- l& @* h! `( P' _0 w  x! I" r             "<li>年份：" +
* X4 J6 N; [0 h" m. f             x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +; q7 P& _4 ]9 w; n, j$ {! `
            "</ul>";0 M+ K$ c  _4 ?1 K
      }
  C" m) b6 v: k* p
6 h* D: U5 c& A2 P' U  c       function loadDoc() {
5 [! |7 m8 r% W/ ~& D! a" c5 U- i3 @, J; e
         document.getElementById("demo").innerHTML = table;; r* k& ]+ }, t2 c3 N
      }+ ^8 W0 m; d2 [+ n$ [+ r* C- c7 h

, S  G1 I' e9 S# A4 y# i0 U </script>& b1 u1 @2 m1 K3 }% k% P1 {7 b1 H& ~
7 e( N1 _0 [6 D+ A( x
- b( R! }- z- o# \$ w- o0 c
</body>" p5 `- I4 g( K$ j/ `
+ |- B( l: x8 g# }. K# f
</html>( W% M; ?* t2 D/ Q
, `$ B  b  Q, S5 b. F9 n
+ n- F- K- }* b7 w
[/mw_shl_code]
5 n( g, M0 s7 L5 z  O. Z* K! O+ U( k1 y

/ a1 t2 f% z0 P7 X3 R+ T/ ?+ s. w$ ~3 w
XML文件+ N7 s9 |! O; i2 l' ~: s
! k4 B' [& G' U$ f/ e
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
" B: [; |, Z) w1 |; m$ |6 j8 @1 }<CATALOG>
$ e9 |* c' o# j. q$ }3 \* O, P; m<TRACK>! r$ M" z& q( G. R% S1 V+ A
<TITLE>再见</TITLE>6 x) t4 C* e0 m( q
<ARTIST>邓紫棋</ARTIST>
6 f0 ~' f# ~! K" ]: A9 h<ALBUM>新的心跳</ALBUM>  p$ {5 b, P- t
<COUNTRY>中国</COUNTRY>% A" v3 V3 }* ?& W7 M
<COMPANY>邓紫棋工作室</COMPANY>* W% Q$ i" [" [' |! t
<YEAR>2016</YEAR>. Z: }  Q( H  M4 L
</TRACK>
( K3 c" z0 `9 p) T# U% [
6 {' j- a; J+ @. \( c1 @<TRACK>; }% Q! i7 Z6 h  {; k1 X
<TITLE>All I Ask</TITLE>
; p0 L# f9 H" i& a<ARTIST>Adele</ARTIST>8 ?  P4 E, ], e1 \2 T4 V
<ALBUM>25</ALBUM>5 ~  m, d" c3 c6 i& B4 m$ {) o
<COUNTRY>英国</COUNTRY>( X6 V) U# b0 S; x
<COMPANY>XL Recordings</COMPANY>
# e* X. Q9 P- ]3 t<YEAR>2015</YEAR>+ h/ g0 ~# x0 c( C' q
</TRACK>  i, X& @8 w, p$ n/ F

. M3 r! p1 j( G: \# O! O8 T! w<TRACK>
1 X' P$ \: g& A7 L$ K- b<TITLE>之乎者也</TITLE>8 s: v+ V+ o# D0 Z) b3 I4 j3 d
<ARTIST>罗大佑</ARTIST>
+ Q  g+ d" l3 R5 B0 @: i<ALBUM>青春舞曲</ALBUM>7 L7 G+ r6 J" t' K7 f1 _  w8 B& \
<COUNTRY>中国</COUNTRY>
7 B) m/ |, k5 `& F<COMPANY>滚石唱片</COMPANY>
+ A7 V9 k& S' Z- S<YEAR>1982</YEAR>6 B: K+ Q* I: a1 n* p8 j$ E
</TRACK>* ~- ~1 k( O3 L" k

$ [% T" T( G5 {0 l) V<TRACK>
4 r5 Z' O' `& ]: H9 n) v  a8 @<TITLE>Never Be Alone</TITLE>" J, E1 b9 v6 H4 f$ R; e/ N( H
<ARTIST>Shawn Mendes</ARTIST>, e- y! @: Y) C  e. ?
<ALBUM>Handwritten</ALBUM>" z' S; r, N8 X5 ?/ @- ^
<COUNTRY>加拿大</COUNTRY>
. P4 X& h; t4 Q' _! m+ p<COMPANY>环球唱片</COMPANY>/ D$ P' L. A: p' Q4 Q: V7 x( Y
<YEAR>2015</YEAR>
& c5 p& ?# O1 `</TRACK>
- ~7 W+ a% w9 Q& ^- J. x! V, y6 t4 r, `2 D
<TRACK>
3 n  s$ Z5 x/ x<TITLE>慢慢</TITLE>4 I( w/ K4 [# i4 h0 d
<ARTIST>张学友</ARTIST>* O) o4 e) J# a; k* I
<ALBUM>忘记你我做不到</ALBUM>0 l( T! G& j" i& c4 z
<COUNTRY>中国</COUNTRY>
% k& K# I. y  K! |. A<COMPANY>环球唱片</COMPANY>
) R2 I+ G' {" l4 p9 K! D& R$ m<YEAR>1996</YEAR>
# S& S4 z* E' n  X, _) p</TRACK>
: j  b% S, g5 X3 I) ?+ Z# g' A2 G3 l. m" H- A# [, U9 I
<TRACK>
! z) j8 H" p1 M1 @; \% C<TITLE>Complicated</TITLE>1 j8 E: N& X, k5 m7 y9 \
<ARTIST>Avril Lavigne</ARTIST>
8 h. U' O1 F1 a( a. b<ALBUM>Let Go</ALBUM>% s+ w8 P1 A$ J3 l  M4 b
<COUNTRY>加拿大</COUNTRY># d! \' i$ }% f9 J8 r; n
<COMPANY>索尼音乐</COMPANY>
) T; {, e4 j0 H# X2 _% m" Z<YEAR>2002</YEAR>1 a; `' U0 _4 x
</TRACK>
# v# |3 u& F! K( _- w3 h
# p4 \7 E5 L3 @<TRACK>- l* U$ j" P: F; m1 Z' u  N3 D
<TITLE>三生三世</TITLE>
! ?2 L- m9 `8 j- \- U<ARTIST>张杰</ARTIST>
( f2 q# f9 W% \8 m# c( J<ALBUM>三生三世十里桃花</ALBUM>
# ]! ^! O) T8 a5 N<COUNTRY>中国</COUNTRY>
5 P6 A( `3 W/ T  l' x+ Z3 k: g<COMPANY>仁溪音乐</COMPANY>
+ o+ [" ^) R' I+ o<YEAR>2018</YEAR>
5 w! f! g5 E: Y! S+ a* U" ]/ g. ?</TRACK>1 z& ~8 X% C9 p

1 R* d7 j7 \% M0 n) r  Z. b+ O<TRACK>
: [3 ]( i5 `& m3 P( W+ U<TITLE>Five Hundred Miles</TITLE>
; l( b) p7 l9 Y' {" X# q<ARTIST>Justin Timberlake</ARTIST>1 p; }9 ]' I) Q" A. j( u& V2 U3 r# y
<ALBUM>Inside Llewyn Davis</ALBUM>; ~( X( d9 @- h1 G" a0 f
<COUNTRY>美国</COUNTRY>  M6 t  m6 z2 {0 W2 s
<COMPANY>华纳唱片</COMPANY>
, E, }" [8 u8 R1 L" r* H- l) ?<YEAR>2013</YEAR>% m* ?( r+ \  G" ]/ P5 ?! b9 {
</TRACK>
2 o* P* o9 U1 _# l! L- a' f' [- `. J5 Y* d+ J  H9 K8 s
<TRACK>$ ^  y  p# I* r0 ^( m- S
<TITLE>演员</TITLE>! d8 l& [6 q! O9 {4 s" R. W
<ARTIST>薛之谦</ARTIST>& b* K, a( d; K
<ALBUM>绅士</ALBUM>
$ Y3 V' G( T" @' u3 U; z<COUNTRY>中国</COUNTRY>
: ~! n4 r, x& C- E! F4 R+ L6 G<COMPANY>海蝶音乐</COMPANY>
1 v. S( x1 v% E% `. S7 {0 E% b7 I<YEAR>2016</YEAR>* K" U2 H  `% O1 f
</TRACK>5 y* J; P% f2 ^$ t" ~/ i$ S  {
0 a% l  K( t) k; b6 j4 g* {
<TRACK>! S2 M# R/ j3 f% j- O% }% U4 m
<TITLE>Numb</TITLE>& d( R3 R! h0 n6 t/ J  p
<ARTIST>Linkin Park</ARTIST>
2 I! J# ]2 k  ^& v) g0 _& H% U" G$ F<ALBUM>Meteora</ALBUM>: X' u' Q8 |# o. E9 w! r
<COUNTRY>美国</COUNTRY>
! |( i& w! z, M! ?2 m2 O<COMPANY>华纳唱片</COMPANY>% w4 w8 C1 ^8 g6 c
<YEAR>2003</YEAR>: y: u/ Y& @& d
</TRACK>
; U) S# d5 y. D; Z# K( R7 I
; r9 }$ u* t: z3 p' P1 O<TRACK>+ n% o3 @2 |2 ~' X
<TITLE>给未来的自己</TITLE>8 S) p4 ?+ d( T. h  K. @
<ARTIST>梁静茹</ARTIST>
% u( f5 _$ ^9 y$ }2 K9 d. i+ v8 t<ALBUM>崇拜</ALBUM>
3 K- ]  X6 y. R- F& M1 I<COUNTRY>马来西亚</COUNTRY>; o0 X0 M6 O4 H2 J
<COMPANY>相信音乐</COMPANY>0 Z" p" e. f8 k
<YEAR>2007</YEAR>/ E$ j. G7 n& N* m' n& [
</TRACK>7 W' u' n9 _! U
+ ]2 _) m% k5 s4 s0 D- h* I
<TRACK>6 @1 L: t7 J  _* m8 e* z: V
<TITLE>The Monster</TITLE>' h1 L0 W: p7 w* J  q( t3 J3 d5 O
<ARTIST>Rihanna</ARTIST>7 C3 z5 b4 e8 a: c
<ALBUM>The Marshall Mathers LP2</ALBUM>/ ~0 \. _/ o0 c9 [& `- Q; N
<COUNTRY>巴巴多斯</COUNTRY>3 j" j, k% }  L
<COMPANY>环球唱片</COMPANY>
. r, t! P4 y% r<YEAR>2013</YEAR>
: g' ~2 S* u5 n1 ?0 P</TRACK>
4 Z* J( ~: N- A4 h4 q# L  `0 A+ B( `0 Y, C
<TRACK>5 Z7 F2 h9 d3 @# b
<TITLE>我终于失去了你</TITLE>
7 i7 s8 g2 J/ `/ y( U<ARTIST>赵传</ARTIST>
0 q9 A# k. t, n8 Y<ALBUM>我终于失去了你</ALBUM>
- g: N' F( g: l$ [+ Z" Y9 N<COUNTRY>中国</COUNTRY>1 s* W; R4 F1 V2 J
<COMPANY>滚石唱片</COMPANY>
) N# ]' h- }; \( m8 q<YEAR>1989</YEAR>
7 U: c5 ]3 i# {( x7 C</TRACK>- W; w6 A! _' C* v

0 t  a) d/ ?3 }3 x; x. B& ?# d<TRACK>
* T6 O# b' w, V+ H, B, L9 l. b<TITLE>Main Titles</TITLE>
1 G7 ~. E. X0 f' w7 Y. @<ARTIST>Ramin Djawadi</ARTIST>, e- F. R' Z- E" r
<ALBUM>Game of Thrones</ALBUM>: x! V/ F5 V  G: p% S
<COUNTRY>德国</COUNTRY>
) B% h( e2 D: I& }<COMPANY>索尼音乐</COMPANY>
! |9 ]7 Q& U  T# L( i# D  N* q* P<YEAR>2011</YEAR>
+ k# y3 ^' A! S" E" c</TRACK>
( K, C, C1 B0 L2 y3 C# x+ x
% l% \' ]0 v* w" ~( ?3 H; r5 ^<TRACK>
  f9 Q, d7 u+ [$ I<TITLE>传奇</TITLE>, j  y1 M5 u' Q( S" |( w6 g
<ARTIST>李健</ARTIST>* I# G. s) M; @
<ALBUM>似水流年</ALBUM>
2 A' w+ x9 B9 U0 ^# w<COUNTRY>中国</COUNTRY>% B9 J. n; L$ D* t  L- E0 G7 _. y
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>5 N5 q! f3 \" h. c% p
<YEAR>2003</YEAR>" q& G( n, u) x: l2 X" l
</TRACK>
/ y: L3 N! o9 A8 z
& D" E  ~# \, C' k0 p: a<TRACK>2 h0 L7 t# H# }( ^
<TITLE>完美生活</TITLE>8 r* ^' E6 x( F4 H$ {
<ARTIST>许巍</ARTIST>
$ D& M2 q2 p0 R<ALBUM>时光漫步</ALBUM>) m, }: Z% M7 c/ A$ |( e
<COUNTRY>中国</COUNTRY>
+ ^, U' \% V5 p6 e# B<COMPANY>金牌大风</COMPANY>
1 E" y) W1 }" \$ r5 R9 z) {* n<YEAR>2002</YEAR>: X: Y% ^$ x! G/ s9 w9 p: U8 S+ q
</TRACK>
+ I% y4 M3 e8 ?5 ]  W, |# a+ g# z</CATALOG>[/mw_shl_code]
4 U4 t2 L$ U- W, P4 N# y' L

PLM之家PLMHome-工业软件与AI结合践行者

热图推荐

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

admin 楼主

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

发表回复