使用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;
4 {4 a; j$ W- g& Z3 [' c9 |+ T  table += "</td><td>";
! S# O; B  e: ~0 A) t: v# `  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
+ z) m# u( Y# b& D8 p  table += "</td></tr>";: f; [7 Q- u) n9 h" J
}
7 c0 U# d7 j. y. p8 g: G  H/ H- H- C+ o. e, B% \) r
document.getElementById("demo").innerHTML = table;
var i = 0;
# ?5 C) t  z" l! m  g* T       function next() {
$ X" T0 ~3 ~! `+ z  [3 q          // 显示下一首歌曲，除非已到达最后一首
" U1 w+ |: X3 k+ _" G7 j          if (i < x.length - 1) {
% q# N; a2 K5 X* f  F6 @. `4 r             i++;- p' u3 n( s7 L9 y) |/ N: s2 A
            displayMUSIC(i);
9 U; w" O6 x# D+ U8 S          }$ I& {' L; ?! t& j: X- M' w
      }
5 g0 ]3 z8 l7 W  f$ v- [! G' z6 _! V8 \3 N' I$ C7 L3 m3 }
      function previous() {
/ n  ]/ R  I9 s/ U          // 显示上一首歌曲，除非已到达第一首( b: D/ S8 Y5 S& p/ x3 b/ K) E, q
         if (i > 0) {, Z0 p7 g# I( Z; N( ~* S
            i--;
  [0 o% o  e3 E4 v             displayMUSIC(i);
9 i; ~& Q8 w7 J6 _7 @, e          }
/ {8 `1 ?& j% c5 C       }" \8 i9 O4 T) t" t( u+ B) b
3 q2 `/ s* o6 F7 N$ W
      function displayMUSIC(i) {5 i1 o9 Y% F. R: T  T9 a+ F
         document.getElementById("showMUSIC").innerHTML =0 I" l2 H5 M" l3 s9 }$ v1 {. P
            "<ul>" +" f* y) _2 @+ f
            "<li>曲目：" +, P% R% F- L0 p& P* T
            x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +. |% a  t* p; y; D
            "<li>艺术家：" +$ m* D6 N# ~6 z5 B2 ^4 g
            x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
0 M8 V- Y+ ^/ l2 Q( s9 p  w             "<li>专辑：" +0 ~4 V! A  T5 h4 Z( t
            x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +" ~7 J6 Z( @6 ]
            "<li>国家：" +8 J: H5 h# T) o! |. ?4 f, s6 g
            x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +) J2 e! ^0 N5 B' _+ k9 F; g
            "<li>公司：" +; A9 M  N0 i$ k! e
            x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +. F% r9 U. m: j) N
            "<li>年份：" +% Y3 k7 B* ?: s6 H% w  y/ G% @+ n
            x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +( {5 P* o% A% n; J  p
            "</ul>";: s/ }7 }% N* [8 a7 h) ~2 ^
      }. T: t1 F& `. T

) J/ j6 o/ |/ _- J* s       function loadDoc() {! g; G; M" a6 R( I

" ^3 ]; T" d+ I/ W          document.getElementById("demo").innerHTML = table;( n# L* A2 ~- a( a
      }( F; S0 ~; I" ~& b0 a$ y3 s
. e" ], E& h" J
</script>' w% c) `6 E' h3 q- E

1 K( {7 K, h8 b6 c5 C1 V& h% W: V- b) v- Z& L5 J' t
</body>3 t; f2 J9 x2 {% I
. c9 E9 s8 I  r: J) F
</html>$ ~' n2 ^5 G# p! I% T0 i
, E3 A( U* j/ u! t! ~* Y# z
9 z/ s$ ~& w1 s$ q
[/mw_shl_code]
! J+ D! L5 D" C! C, |7 |) V
* }- x! k  U4 W1 @) C/ w' C/ _# H5 m3 l# U/ Q$ m
. K6 m; ]& Y  d0 r8 H
XML文件
9 q, ]; J6 H0 V4 \) ~0 J
* f- U' i$ e( t/ b  r/ L[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>9 C0 N+ ?, }1 [% H  k7 ~" r3 K
<CATALOG>  V9 q9 ~. i: S: b
<TRACK>
( h6 c0 q7 V- b: A- X! w/ R1 M) L<TITLE>再见</TITLE>
4 m* l5 r6 N* P3 m! ~<ARTIST>邓紫棋</ARTIST>
! b' K$ w+ S+ w/ P8 d  ^<ALBUM>新的心跳</ALBUM>* m% w) \3 e" N0 j! @1 E& a6 H0 C
<COUNTRY>中国</COUNTRY>
* ^+ F8 M& ]: L' U% E<COMPANY>邓紫棋工作室</COMPANY>0 Y* m2 ^5 }( @- Y0 u7 A4 q% h
<YEAR>2016</YEAR>
) m; U' O8 J4 N6 i</TRACK>& P0 J0 \8 c) F! F6 o0 d

3 m$ X: X7 E2 N2 l6 c0 t! h5 X<TRACK>% o" |& Q8 L6 t! t; E
<TITLE>All I Ask</TITLE>
' t: m0 |1 R: o8 L+ w% y<ARTIST>Adele</ARTIST>8 ?. k6 D& G# t6 ~: u7 L" w
<ALBUM>25</ALBUM>% d" C1 _9 A  ^5 b5 |) i1 l
<COUNTRY>英国</COUNTRY>
. _' q* H( f0 n5 j+ c, O<COMPANY>XL Recordings</COMPANY>
$ K* H( T1 z2 y; w$ {<YEAR>2015</YEAR>
  {2 f% E' @9 {9 t</TRACK>' J& i0 `$ {- _* b6 \' \$ f
  J7 e$ R" R! e. w1 d
<TRACK>7 t' j/ [. A8 D, v% U  U
<TITLE>之乎者也</TITLE>
+ w; Y$ B1 `& l8 H+ J2 l! W<ARTIST>罗大佑</ARTIST>) |/ ]4 R! B" L% o0 J& T
<ALBUM>青春舞曲</ALBUM>) M3 u6 i4 `% Q& H& b6 ^
<COUNTRY>中国</COUNTRY>
8 ^" u7 {, _! {<COMPANY>滚石唱片</COMPANY>: ^4 C/ y$ @! S
<YEAR>1982</YEAR>; [+ p5 K+ W; _7 g1 ~
</TRACK>7 t6 S" u9 q1 F9 g
6 T' c$ z: f7 B1 y: T& ^3 l
<TRACK>
<TITLE>Never Be Alone</TITLE>
* [$ U) ~5 a8 C' [- W. m. B2 O: U" m( R<ARTIST>Shawn Mendes</ARTIST>. X2 r5 m/ [$ I8 s
<ALBUM>Handwritten</ALBUM>
) j: s$ ?1 D6 a2 Y$ L0 [( i, f<COUNTRY>加拿大</COUNTRY>% Y1 y3 L; j* _4 Q: I6 [
<COMPANY>环球唱片</COMPANY>
3 z  y8 O* B9 k2 a<YEAR>2015</YEAR>
# F  p, Q+ n$ w. y</TRACK>
+ X7 y1 F, z8 A0 v
# _1 Y" W' U+ M! i" u<TRACK>
# z( C, \- M: f) e/ l8 Y7 c<TITLE>慢慢</TITLE>/ G, l# \) X$ b* r
<ARTIST>张学友</ARTIST>
( L8 g9 z$ a* l* ~8 H<ALBUM>忘记你我做不到</ALBUM># U8 z$ `" R6 E4 y3 b6 l
<COUNTRY>中国</COUNTRY>
8 x1 w4 B* ]. B) k/ U<COMPANY>环球唱片</COMPANY>  c% p- t1 R' [" [0 x6 B
<YEAR>1996</YEAR>
' P& p2 c" T$ y3 f' L& {</TRACK>
  C" m+ y) k  W. e
3 W1 x4 c. {5 S8 ]<TRACK>2 H6 Z6 Y0 V+ d; n( _0 m3 E
<TITLE>Complicated</TITLE>
8 D( K) a( s' C6 f0 ^<ARTIST>Avril Lavigne</ARTIST>
) Z  f6 ?! S. g! T) p  L% _<ALBUM>Let Go</ALBUM>
9 P1 `' h$ _$ E* d' D) y$ m<COUNTRY>加拿大</COUNTRY>
& y3 T5 l! I3 |2 s8 t* [" X$ `<COMPANY>索尼音乐</COMPANY>
+ U# O: `. u; q% p2 l8 E$ G<YEAR>2002</YEAR>
- T# B; B' @3 `2 i: d: [</TRACK>) u9 J, m# I5 b9 E) A
+ a6 @! K* h3 A& `* a% f
<TRACK>
3 Z8 d( t' j9 C" {8 W<TITLE>三生三世</TITLE>% ~9 a" d' G# {* `3 [$ q' Y
<ARTIST>张杰</ARTIST>2 z- \3 T; O" S! n8 E/ H+ V
<ALBUM>三生三世十里桃花</ALBUM>' U' T- o; O- {$ {5 K
<COUNTRY>中国</COUNTRY>
0 e0 e2 Y7 I* w0 t/ h0 l& x<COMPANY>仁溪音乐</COMPANY>
! T0 Y" F; X9 V  \2 n% Z( P" J<YEAR>2018</YEAR>$ @. y  A+ E( v  P; u+ {
</TRACK>
8 w% V( e0 s6 ~& J% j- h, m' J$ u  j( l, ?3 x8 a5 k
<TRACK>$ J& C2 I# z9 [! J
<TITLE>Five Hundred Miles</TITLE>
& `4 N4 r! U; M<ARTIST>Justin Timberlake</ARTIST>" e6 D9 l7 o( U7 {
<ALBUM>Inside Llewyn Davis</ALBUM>
; H8 ]1 ^* Y; d) q<COUNTRY>美国</COUNTRY>" ~. i, T1 Q& L2 F" V
<COMPANY>华纳唱片</COMPANY>$ g0 `* |% S8 X! Q. u  M1 V# F
<YEAR>2013</YEAR>
. f3 `  X1 G$ i, }6 Q</TRACK>( m- d/ I4 w+ K$ c

8 j) J) Z3 ]+ |2 d; H<TRACK>
- Q8 K/ u7 A! s+ I<TITLE>演员</TITLE>
; S! _5 K& p) h% w+ D& f<ARTIST>薛之谦</ARTIST>) T8 K( B/ b/ E1 L5 Y, V% q, y
<ALBUM>绅士</ALBUM>
; T6 {, n& H1 z5 S9 d  J, y- y5 x<COUNTRY>中国</COUNTRY>3 i, h1 X4 p5 O; B
<COMPANY>海蝶音乐</COMPANY>
& G& A9 c+ t: ]! ?<YEAR>2016</YEAR>& D6 u, E, Q& N4 e
</TRACK>
9 Z0 l1 R- l- }' o# L# W* ^( X' `# P& l& c
<TRACK>7 ^3 e; a- o- j) e  _: [: l
<TITLE>Numb</TITLE>
/ O- b# k) N( g0 @) R1 T+ t<ARTIST>Linkin Park</ARTIST>
2 T1 H$ S8 K! g1 X/ w) f/ Q/ Y<ALBUM>Meteora</ALBUM>
$ r4 }5 C- B/ t# }: C) k<COUNTRY>美国</COUNTRY>5 r4 H6 ]5 M9 ~) l
<COMPANY>华纳唱片</COMPANY>* G# y! w8 _  q% V
<YEAR>2003</YEAR>9 f: L( S6 I, W7 d& g$ ^7 b& N
</TRACK>
* U7 h" E+ L) U8 |! C* k, a5 g7 O2 Y7 |5 x$ v% Q
<TRACK>
! G! c2 v) ?$ ^' U1 K<TITLE>给未来的自己</TITLE>0 G, {1 J, M; [/ u# s
<ARTIST>梁静茹</ARTIST>! j1 w! w" ~* ?+ ^9 p  D3 @0 v$ B% c
<ALBUM>崇拜</ALBUM>
5 n7 y  I* ^7 o7 `/ R, H) I<COUNTRY>马来西亚</COUNTRY># t  C$ M5 y- K! R+ ?* x! g2 A: t
<COMPANY>相信音乐</COMPANY>+ U% `, ^3 p- P- m' h8 c7 C
<YEAR>2007</YEAR>
2 P6 F6 J% B3 k' ~1 l: |</TRACK>
2 c1 T& V: E. a9 e0 C
- L( a7 r. A! l5 W) S# ~( t  N<TRACK>9 r4 Q/ E( a- `1 N% H5 Q* G2 k+ U
<TITLE>The Monster</TITLE>0 j) d4 Y# I' @( w6 \1 s/ ]% |
<ARTIST>Rihanna</ARTIST>/ ], Y* H& J& @: |: F/ Y
<ALBUM>The Marshall Mathers LP2</ALBUM>
9 Y; h- H1 z( f6 W3 T$ ]<COUNTRY>巴巴多斯</COUNTRY>+ ^: u' d3 W+ E3 D% P1 G0 n1 l
<COMPANY>环球唱片</COMPANY>
8 p% E. g0 _! X8 V# ^, ^; c$ i<YEAR>2013</YEAR>
1 Y1 D- U' C! A7 [  J* U$ ~</TRACK>
5 ~" C! b" l, x; P4 `
5 }' Q5 M0 E* m- @& j% w* `<TRACK>
& b5 [2 l: M' L0 B& s5 h5 H<TITLE>我终于失去了你</TITLE>
. X! {1 `: b- _+ V- e9 G<ARTIST>赵传</ARTIST>
" f" I0 B/ s5 I# {+ D  P<ALBUM>我终于失去了你</ALBUM>
$ k) B, ~$ t8 K/ R4 V! c) q<COUNTRY>中国</COUNTRY>
6 g0 x7 }0 {1 G( W<COMPANY>滚石唱片</COMPANY>! u, ]) \# _+ X# ^3 Y& V& y
<YEAR>1989</YEAR>; L5 \, {/ e& w6 @5 u) M
</TRACK>
! c4 B& I! }8 \- F* a1 J' ^  d4 j* w! E6 J
<TRACK>
% J6 j0 b5 [1 K; j& o  M2 j! L& x<TITLE>Main Titles</TITLE>5 P7 I0 M) j5 W1 R0 I( L/ V) Y
<ARTIST>Ramin Djawadi</ARTIST>
  }! \5 r2 x; Z: {$ a<ALBUM>Game of Thrones</ALBUM>+ t, _8 ?. [# c  R: @6 f0 `
<COUNTRY>德国</COUNTRY>, B! g  r# ^  t
<COMPANY>索尼音乐</COMPANY>
1 ?8 T2 x8 e- G5 d! f' n<YEAR>2011</YEAR>9 x. Y, s- i0 a$ c% C$ j) |
</TRACK>3 r: u- _- a' m9 z7 i. n

! W3 b' i, \- ~3 G, c- a<TRACK>
: a/ [* A1 h1 B6 [, d( T8 x& v3 `<TITLE>传奇</TITLE>. V3 F6 k6 g3 I8 {+ ]+ d
<ARTIST>李健</ARTIST>
% I7 q$ k9 @  w<ALBUM>似水流年</ALBUM>
# O5 a" O. F' ^* @4 V) ]<COUNTRY>中国</COUNTRY>
, |- G! C1 y7 a! n; x- e! O<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
9 F8 n* d4 c* J! C" M$ g<YEAR>2003</YEAR>/ V5 r  D3 O) R7 Z, P
</TRACK>
0 E1 `6 ~  L3 F. M3 H
2 g1 b/ B8 m5 c. D; ]<TRACK>
1 D' n9 A, n, e5 r+ a<TITLE>完美生活</TITLE>
9 v4 l4 c' q& n<ARTIST>许巍</ARTIST>0 |& H& B; A* e
<ALBUM>时光漫步</ALBUM>
7 O' {$ [% a( o9 b* _1 Y<COUNTRY>中国</COUNTRY>! v: C% H# j, s, q! \/ }1 D( z
<COMPANY>金牌大风</COMPANY>
9 d! S+ u& Y8 c1 h<YEAR>2002</YEAR>
/ E- V1 Q% U5 J2 o, J$ ~) P4 O) h8 T</TRACK>3 l3 w4 B: I" L# P/ D- W
</CATALOG>[/mw_shl_code], |& Z9 }. d: f. E4 A2 ]

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

热图推荐

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

admin 楼主

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

发表回复