使用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;' Q6 L" o6 @0 ~4 k. u6 ?
  table += "</td><td>";
* Z9 T: _% c0 ^% @8 F$ S  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
% D2 k; G- f4 Z3 A' O* E% e  table += "</td></tr>";2 q6 b# `2 X& d. E" ?3 f. J5 C% Q
}
6 r3 E8 j& ?1 B% V
$ W% \2 x# J' k6 w5 F1 `' _document.getElementById("demo").innerHTML = table;
8 q  U9 D1 }; }- z; H0 \$ avar i = 0;
8 h8 _8 p1 M5 K5 q& a/ B- e       function next() {! M9 C' ]. n6 I& i" ~. K
         // 显示下一首歌曲，除非已到达最后一首) N: e/ p" D) X( y3 v' J
         if (i < x.length - 1) {) ?) v8 X' k# F
            i++;
7 E; A; |. X* j2 ?. z             displayMUSIC(i);( `, O/ D; K7 q) l1 _4 |" k$ x" @9 J* G
         }: G; ]/ C3 q6 j9 `% I4 E8 J$ r
      }

( F# }; O* d8 I0 D9 a8 o0 L       function previous() {+ s+ v8 p+ ], O
         // 显示上一首歌曲，除非已到达第一首9 f2 n' t8 K  i2 {
         if (i > 0) {
0 B5 _) x" k4 K+ s$ D             i--;3 M5 b0 V1 J: [: K/ H1 ]% j: ^- k
            displayMUSIC(i);2 x& x; [8 e% v7 Y  `# ~
         }+ ^! K4 [, g/ A3 @5 G
      }0 b( U2 v6 f3 _8 v/ |; z' c# ~

8 b/ C. R+ B8 J8 O* n% [% W1 l       function displayMUSIC(i) {
+ f  y  e' v" H4 Z1 _! ?          document.getElementById("showMUSIC").innerHTML =
3 [+ {' B$ e2 |2 z" t, v             "<ul>" +4 T- Z+ r+ d4 O. _% i
            "<li>曲目：" +, F4 P  s# z2 D- J+ \
            x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +0 j) }! l1 ~4 y5 W/ l& l0 I2 J
            "<li>艺术家：" +, I" X& F  i% V  O: t& N
            x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +1 b2 q4 b, R  N; H% g" O" @
            "<li>专辑：" +
7 y5 P" V& V/ s3 S0 z             x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +8 I* g' W0 L7 U1 e0 [0 F
            "<li>国家：" +5 M3 J4 _1 ]7 I  G, q9 c4 [
            x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +, d; u8 N0 V( k7 B% A0 l( `
            "<li>公司：" +
2 s; L) _- a& X. }- j             x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +3 y2 P. o3 t% I
            "<li>年份：" +- Y* o/ f9 x* q
            x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +2 d9 Q3 M3 O* i  K: a6 R
            "</ul>";: f8 R, x% r" q: b
      }" j, y# ~7 I1 S4 }. S) v$ w# w! x

7 H- @' d4 D$ p$ L3 R       function loadDoc() {; m1 u0 i3 Q& p( t# \) s% i. _
4 {( k# S$ W7 T
         document.getElementById("demo").innerHTML = table;
% _% J6 O, y' g; J1 Y" O       }
7 N# E) C* V& G; O: o* q! ]! I. N' j+ {( g
</script>
& `" K6 w8 A& M% D0 `
  [) m* e* v6 \( h; M7 o6 }+ a  t' }) J; M
</body>
4 u* N: S& i6 j" \# \: W
+ s! @( Y! A9 ~* I% h$ G</html>3 Y; _9 E7 g' a

' {* \+ A- Y/ d% _
+ q* h4 c; O- c, s, d[/mw_shl_code]9 W/ j* b. v) r2 t' k. J8 y
/ S" H. a4 h  T& M% _$ z
" }5 V% n4 b+ l" `

, F1 K$ [8 h) M+ DXML文件' s5 [" F: r& v, ~3 z( m* v) U6 z
/ L' ~: a, u  _" R
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
3 ]5 }" e0 M! u9 N+ ?0 K5 S<CATALOG>
! R$ \: u- V3 ^9 K; a4 G3 O<TRACK>
3 d9 A! o$ ~$ Q; B1 A<TITLE>再见</TITLE>) t. k- \4 j8 _9 i
<ARTIST>邓紫棋</ARTIST>4 M4 E& w: r! o" q
<ALBUM>新的心跳</ALBUM>
/ ^- M* F3 i6 [0 _7 f<COUNTRY>中国</COUNTRY># m/ \" ]9 J# I- d! E; a! t
<COMPANY>邓紫棋工作室</COMPANY>
) Q: q7 g; i6 f6 e. ^<YEAR>2016</YEAR>. H0 O! W/ s0 r) y( s" n1 O
</TRACK>% N! c% w0 R# k1 A' e' z6 w
8 @9 F  `; `# L+ r9 J* E% e" B
<TRACK>
. p! E4 ]% R3 y! M" f4 t<TITLE>All I Ask</TITLE>
0 I) v+ }$ t0 b1 S  I- y<ARTIST>Adele</ARTIST># ?4 m, c$ f0 h0 m* M/ Q) p" S
<ALBUM>25</ALBUM>0 A5 h/ n# V( ~! d# |
<COUNTRY>英国</COUNTRY>
5 q3 \! I% L" ?! ^  o<COMPANY>XL Recordings</COMPANY>- G$ O" \: u+ z& q; s) i4 L7 N" h
<YEAR>2015</YEAR>8 b6 v% y$ }$ Q( c2 i, H
</TRACK>7 c% T/ ]1 L' W% \! C* f, r
- F1 h) _$ d# p0 M. Q9 ^7 [
<TRACK># R% M' @* Y/ `3 I) p
<TITLE>之乎者也</TITLE>4 b" a+ t; I! V/ h
<ARTIST>罗大佑</ARTIST>
- P# L: U$ a$ a* p* l! U<ALBUM>青春舞曲</ALBUM>
% i7 {/ i% r. @) @6 U, E/ L<COUNTRY>中国</COUNTRY>
; {- L! u4 d  ~9 R( F; h  }<COMPANY>滚石唱片</COMPANY>
9 `3 J$ }* \+ B: a' ~  I5 |<YEAR>1982</YEAR>3 }' m. z% M/ ~6 J9 P. D% m
</TRACK>; Z% V& t. w7 d, T
: l  U2 C5 }& Q0 D  Q% l1 G
<TRACK>$ \$ e. `6 W2 j/ N
<TITLE>Never Be Alone</TITLE>
<ARTIST>Shawn Mendes</ARTIST>  r% l& `3 y$ J6 U' a# f
<ALBUM>Handwritten</ALBUM>5 N4 [$ h! v0 i% a  r. i, Y5 g7 r
<COUNTRY>加拿大</COUNTRY>0 u, }" @; ~4 `5 n* U& z0 R: @4 _
<COMPANY>环球唱片</COMPANY>9 e, `, T0 @4 _/ }- D5 z2 Q
<YEAR>2015</YEAR>" J9 \4 u  T, y  v/ @  y6 y
</TRACK>  Q- \4 @! q7 o  n( K

8 R- ]6 E) R  j+ [) H3 W. F<TRACK>" r+ ?7 g6 `5 j6 s  h: Y9 m5 _
<TITLE>慢慢</TITLE>9 B. G. f6 R9 C( X$ O
<ARTIST>张学友</ARTIST>8 s, b# U8 k* q  T. S& S; a
<ALBUM>忘记你我做不到</ALBUM>
- h% j$ f4 B1 g. x* W1 Z<COUNTRY>中国</COUNTRY>: \9 F0 Y; ]5 U$ q
<COMPANY>环球唱片</COMPANY>
; |# n. i3 R% v4 A; U<YEAR>1996</YEAR>% }) j2 t$ M- A9 j' f- M; H- [
</TRACK>
  ?+ h) j* g3 B
/ a6 q8 E9 U, H# L" d+ {, r<TRACK>6 }' l9 j5 ?4 @- D+ b$ s' l
<TITLE>Complicated</TITLE>
/ P: f2 S! {' p<ARTIST>Avril Lavigne</ARTIST>
0 `9 d# a( e$ x<ALBUM>Let Go</ALBUM>
8 |1 I5 G6 b* Q7 }3 c. z<COUNTRY>加拿大</COUNTRY>
; g" n& {) M' R4 ^<COMPANY>索尼音乐</COMPANY>, M$ T- s2 z/ [$ s2 E; m
<YEAR>2002</YEAR>3 `4 [# u/ H4 d" w/ v
</TRACK>
6 a9 a, q& _8 N" B+ S6 c
* P  `7 }; W# p% ^0 b<TRACK>
6 \, K( j. g% W' [<TITLE>三生三世</TITLE>7 H- n+ t# x/ [# \
<ARTIST>张杰</ARTIST>
. F" F  l$ z: b1 t0 ?* j+ l<ALBUM>三生三世十里桃花</ALBUM>
2 R4 S1 u# }+ v  r: J+ U% b. r<COUNTRY>中国</COUNTRY>
6 N* a3 U3 |! M( D3 Q<COMPANY>仁溪音乐</COMPANY>
, m3 `4 R, C- Y1 S- P<YEAR>2018</YEAR>
/ _/ ]: c: c& f8 `) l0 X- v3 \</TRACK>
7 z: A: O$ p- i5 L2 R8 h# W4 @' }
# U& [3 Z+ ^6 j8 n<TRACK>( v7 m( o4 {$ G- s
<TITLE>Five Hundred Miles</TITLE>
, Q! K" H5 b5 d0 P3 N# ~0 M' ]<ARTIST>Justin Timberlake</ARTIST>
1 S) A; W: \& D. S1 c: L2 ]<ALBUM>Inside Llewyn Davis</ALBUM>" w' r4 m5 P8 z! j
<COUNTRY>美国</COUNTRY>
+ Z1 L+ p' _0 k<COMPANY>华纳唱片</COMPANY>3 R- ]' g0 A. s# `, k: \% ]
<YEAR>2013</YEAR>
  M  u* w: B! U- x1 |</TRACK>8 r4 B! F$ f. L, N' E  v) \% b
$ _/ V: {; p0 h+ b
<TRACK>
5 e+ l( F/ |% v; L4 p<TITLE>演员</TITLE>
$ w+ h/ u6 E* K0 d<ARTIST>薛之谦</ARTIST>
; C, M7 u3 |( O, y<ALBUM>绅士</ALBUM>  s7 t" _% I; {/ b! d2 q* d% G/ S
<COUNTRY>中国</COUNTRY>
9 F8 r4 S6 L$ T* n* Q+ }0 s<COMPANY>海蝶音乐</COMPANY>0 T6 k# `, i  y0 c6 D/ I) R
<YEAR>2016</YEAR>
8 m, v4 y7 m0 Y& a' x- t* R& s</TRACK>7 k0 i' j4 a1 Y, V& F

$ I4 F: Z  x) ~! L( i<TRACK>& m* [" v  S' i) Z2 U
<TITLE>Numb</TITLE>% y! d+ ^3 u& Z6 t5 v+ w
<ARTIST>Linkin Park</ARTIST>
7 f; @/ ?0 A# C, X; w. c<ALBUM>Meteora</ALBUM>9 {8 g1 l" b/ x% E6 M: o$ Y# B! K
<COUNTRY>美国</COUNTRY>7 k# \1 _5 \/ y% r3 @3 @" W
<COMPANY>华纳唱片</COMPANY>
/ M3 G( L3 o1 k$ ]( W9 s% o5 E) l<YEAR>2003</YEAR>
8 W* E  }: A3 A! I& x8 v</TRACK>; t& u4 H  T3 h9 d0 |

% f1 t( Y+ Y8 E( b$ m6 Q3 }<TRACK>1 q: y- e/ G; N8 r
<TITLE>给未来的自己</TITLE>8 \4 \: u: W3 o
<ARTIST>梁静茹</ARTIST>$ \4 g9 I0 v9 A" P8 R2 ?
<ALBUM>崇拜</ALBUM>
0 _4 }3 H$ L" a  x  E* Y$ s: O<COUNTRY>马来西亚</COUNTRY>8 E4 [5 D, L4 Y( G
<COMPANY>相信音乐</COMPANY>
' n1 U6 k7 d! A. ~, s' y, y<YEAR>2007</YEAR>  B; e7 X# X$ \1 a
</TRACK>) E! e. w  O' _9 L3 |  d" c% s7 P3 a
4 D) r9 Y: [% n) d& l5 t' l
<TRACK>
/ X: t0 O3 j! {8 N+ J# @<TITLE>The Monster</TITLE>- L) b+ m2 ~) _  h9 Z" _
<ARTIST>Rihanna</ARTIST>
: S+ H' c$ d& ^* |5 n7 \% R<ALBUM>The Marshall Mathers LP2</ALBUM>
: U) p: w, Z+ Z2 L, N3 [<COUNTRY>巴巴多斯</COUNTRY>
( A+ |4 T7 r, ^2 }<COMPANY>环球唱片</COMPANY>; M- p) f1 Y9 }+ \; k7 O
<YEAR>2013</YEAR>
/ P8 ?5 r3 h! ^5 }</TRACK>! G' l( C# H/ o( Z7 F3 g/ G$ T  r

& d0 C& |; S9 v5 S+ D7 L8 l4 n<TRACK>; l- F% W( }% \  r
<TITLE>我终于失去了你</TITLE>
; L! ]3 o- M+ S- k, ~# B1 y$ ^+ B<ARTIST>赵传</ARTIST># J# [) O8 A! q
<ALBUM>我终于失去了你</ALBUM>
, S  R% j" ~0 D2 c3 q( r<COUNTRY>中国</COUNTRY>
% \8 W' r5 Q' P, w1 g  Z<COMPANY>滚石唱片</COMPANY>+ f( h7 ]0 b, P: m9 n5 I3 d
<YEAR>1989</YEAR>4 p$ U/ s  Z* ?( D
</TRACK>
4 _: ]( l, M6 b! J* `  j# ?; A" a: h( E/ N* P& \
<TRACK>+ i7 n7 h1 Q' N& o% ^3 W
<TITLE>Main Titles</TITLE>4 c7 d+ G$ X% ]! n
<ARTIST>Ramin Djawadi</ARTIST>
' u) L9 D* e* @, t" v# t& O2 t+ O<ALBUM>Game of Thrones</ALBUM>
( P+ A+ A- z3 r. |8 o, V<COUNTRY>德国</COUNTRY>
% v- x: j- D0 X<COMPANY>索尼音乐</COMPANY>
: o2 I4 [7 ~# C8 }( @<YEAR>2011</YEAR>4 x. g+ G! E' I% O; H
</TRACK>
# {; b0 O9 w/ n
4 L) w0 t1 {+ Y6 Q% n<TRACK>
: H+ t. u$ s6 x  C& T<TITLE>传奇</TITLE>$ z2 V1 i/ f# V, C* `( C' e$ J# j( g
<ARTIST>李健</ARTIST>
4 O& @$ C; q/ z0 _2 j* `4 P<ALBUM>似水流年</ALBUM>" s& |- |% l  }* [7 n( v: {4 n
<COUNTRY>中国</COUNTRY>5 t0 ~7 _1 F1 ^; Q( g1 g3 d! _+ w
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
( D5 k- P, z' u  e; X<YEAR>2003</YEAR>9 t8 n, T  |; _+ C" c6 T
</TRACK>5 P' |" V- H, j4 j! ]: K9 ?

' Q, M. F: R0 p2 B<TRACK>
( D) `2 j4 F( M& H<TITLE>完美生活</TITLE>( S4 [  S+ @6 j0 T
<ARTIST>许巍</ARTIST>0 [9 @. H4 t. W2 s
<ALBUM>时光漫步</ALBUM>3 F/ t/ u+ m1 |0 e/ Y$ F4 R# u
<COUNTRY>中国</COUNTRY>
9 L, C; z5 }& S+ ]! i<COMPANY>金牌大风</COMPANY>
1 o8 I6 t8 L  D2 x# Y0 _<YEAR>2002</YEAR>
, s% m4 ?3 y3 T</TRACK>) Z* c, _( y6 P! W! K4 _  v/ M( V1 d
</CATALOG>[/mw_shl_code]
4 C4 q9 @8 {* g' C! A

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

热图推荐

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

admin 楼主

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

发表回复

浏览过的版块