使用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;1 l5 R5 S# Z; u2 }9 J9 t/ P
  table += "</td><td>";) `$ z/ N  E0 f5 x4 d- d2 |
  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;* {- L# H" u, p5 g+ q5 }0 O
  table += "</td></tr>";
; s- C/ n& J" R9 I/ w}
  k* @( |; l- ]7 e, t* O* f! N- x; B5 t( e
document.getElementById("demo").innerHTML = table;
5 C, b* }9 `. Fvar i = 0;0 b* E- n4 @. w! _
      function next() {/ U- M" G! S! `4 f- n$ w
         // 显示下一首歌曲，除非已到达最后一首
5 U( b* Q5 k7 x) {& C7 H+ \          if (i < x.length - 1) {% X9 Z/ c; m0 Z6 C7 H, p+ c
            i++;
2 }0 V2 L# Y$ D, L7 W! N& \             displayMUSIC(i);
: Z( O- k" W! S1 P6 g/ n8 H          }
- h- f2 J* a7 w) ]9 y, ]3 o: b       }5 S; U9 l; g9 A( D! p

6 u' i8 n% g0 O% E2 u8 |       function previous() {
" ?' S, {2 W  c' [1 m4 ^$ V4 f          // 显示上一首歌曲，除非已到达第一首
' D' [9 ?7 A4 g/ l          if (i > 0) {
$ W- B( T! [" `, O# J7 S  ?             i--;8 G1 C. Y) B+ d$ K1 c7 d
            displayMUSIC(i);. O1 T% O: {: R7 A% t- f/ V$ I( f
         }
5 [4 E( o- A3 N       }
/ U5 a% A$ }: r  F
. ^: D- o4 J/ Z& W       function displayMUSIC(i) {
9 D7 g$ A6 v/ f8 s          document.getElementById("showMUSIC").innerHTML =% Y3 r" [. I9 k+ ?* v# x# m, \
            "<ul>" +
$ v5 }4 X2 P8 M0 F/ l             "<li>曲目：" +0 N  P" W7 s# v- g" _
            x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +' Z/ A/ X. ?. J. `" w, f
            "<li>艺术家：" +$ d4 g1 m% ?* K8 w6 g+ b; y- N; p
            x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +3 J7 o. M1 \5 P# Y- S! R
            "<li>专辑：" +
: N3 Y$ b- C8 o! M8 \4 y- Q             x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
: d7 j# {: [3 S; V9 N; ?             "<li>国家：" +
( G; J& A7 E6 d. T             x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
, v& w8 O1 F. E/ _& k6 I             "<li>公司：" +
  \' R: d' j3 {: u6 C% U             x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +. t2 M7 _# Z5 |, L
            "<li>年份：" +* ]; ^; M( D' l
            x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +6 }+ t9 W0 s+ _' M. S
            "</ul>";
$ L' p' s, I# h+ z& Y       }
8 n$ E" H6 _: |7 P1 c! i8 p3 X; k- k) _. a( l
      function loadDoc() {* d2 f# {8 X" B1 G

  E8 m' q# a# n5 P  d0 r7 d1 |' N          document.getElementById("demo").innerHTML = table;* I' {+ c5 u7 Y# G; r
      }
! k2 h6 G! n0 D8 p6 U0 w+ Y+ D  a2 J- e. j" J$ Z5 c, V* j
</script>
/ M* J9 k8 o, L" U* t, ]( Y2 e8 P5 z# a1 ?  l) C

+ B8 {4 E* x, U: ^/ R* T/ Z</body>8 d: N# _" ~+ ?; n

# J% U* p* d& o0 J! Q; w8 ~</html>4 w# Q3 W0 [9 _3 k) X* H* h; P

% ~; e- k) y' x8 Q2 J$ w3 w) j$ ^! h0 U5 i2 i: o" u
[/mw_shl_code]. s& w5 F( Y9 D/ [  B  Q8 P; ~2 S

; X; Y& d5 \/ u6 I" ?7 V5 e/ e6 [3 S, j: A

+ R  A" A& S% U. r7 @XML文件6 n; s) X( Q& V5 w2 n

! f! r2 _" b' e% [, H[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>* N6 ]0 ~* H" K3 e8 b/ E9 e* d& x* M
<CATALOG>
+ w2 s% L1 T$ ]+ a/ x) G) p% p) }<TRACK>
6 z' m# W+ t6 A" J<TITLE>再见</TITLE>' |; P" t, T  t+ ]4 I1 p
<ARTIST>邓紫棋</ARTIST>
% g3 I: j( u3 K; L9 S$ h<ALBUM>新的心跳</ALBUM>
8 j% j  j/ \  y8 h6 _0 T, C<COUNTRY>中国</COUNTRY>
( u# T, M7 E+ h<COMPANY>邓紫棋工作室</COMPANY>
1 V, E6 m9 H+ i- x. H, @<YEAR>2016</YEAR>! a) ?# j( J# |( Q. L( ?
</TRACK>
4 S0 |4 h; X; {8 n# T* B# @8 \/ U& s
<TRACK>4 x1 o* q7 L: l8 T
<TITLE>All I Ask</TITLE>
! x& l* f" q0 V<ARTIST>Adele</ARTIST>! F$ M# \9 `0 N- ]$ P
<ALBUM>25</ALBUM>8 P3 [; f7 m' E! V0 U9 G
<COUNTRY>英国</COUNTRY>4 J. @# w1 H( ]0 F8 `! Z
<COMPANY>XL Recordings</COMPANY>- a% z- U& {/ x1 `, K
<YEAR>2015</YEAR>
7 o( P+ [  c5 f7 ]& F  ~. y; `</TRACK>
: ^$ C, M# l6 \. G+ D  ^
9 j4 _* b' k/ \8 w7 j<TRACK>
$ `) m. V- K3 W+ }. a<TITLE>之乎者也</TITLE>
5 K  c4 U- |1 |3 B0 Q9 e( ?<ARTIST>罗大佑</ARTIST>
# J  Q8 H, j: o! X<ALBUM>青春舞曲</ALBUM>
1 m8 y9 u; r% L! C0 x3 x<COUNTRY>中国</COUNTRY>
3 _1 ~+ E; X, K8 q! l  O# e6 f<COMPANY>滚石唱片</COMPANY>' _+ K4 s, [- D$ ^5 X5 x! i, ]5 l
<YEAR>1982</YEAR>. }& o! |7 }4 C* h# w6 x
</TRACK>4 J. P# [# Y$ V* T. s' f9 ?

% a1 S: o7 k$ l7 A( w6 t<TRACK>
' t' x, A! D: ^- _1 `<TITLE>Never Be Alone</TITLE>
: U% B4 F  c- _4 B) W7 u1 V<ARTIST>Shawn Mendes</ARTIST>
2 e& N1 O, i) V. K5 h6 [( q8 f" _<ALBUM>Handwritten</ALBUM>7 d( e+ C- S; Q- a4 l" T+ L) j
<COUNTRY>加拿大</COUNTRY>  M( w/ o5 }* j
<COMPANY>环球唱片</COMPANY>
. S4 Y7 Y! E' a7 }; P  U5 g9 C/ d<YEAR>2015</YEAR>( r" k) W0 _9 y. @! R! `8 F
</TRACK>% b1 J+ s- J8 O0 S
  j& a: T# T# \- W
<TRACK>( D9 Y* x; L8 B: @: N
<TITLE>慢慢</TITLE>
1 {  y6 ?% }5 J' l<ARTIST>张学友</ARTIST>
( p# Q) N6 q3 j<ALBUM>忘记你我做不到</ALBUM>4 O6 I" j/ R9 ^# t% \
<COUNTRY>中国</COUNTRY>
# R; i6 c" U2 ~<COMPANY>环球唱片</COMPANY>
* i! `8 G% n/ K. W3 ~<YEAR>1996</YEAR>4 `. ^8 [  M7 H8 O3 Y
</TRACK>
5 i" X; M  P5 T  S" ?' H* A
. m! n9 V) N1 C9 z! q<TRACK>& u6 Y' J! `+ w7 k  `7 H2 |5 K8 h
<TITLE>Complicated</TITLE>
9 r& `- M2 O: j- k+ S! Z<ARTIST>Avril Lavigne</ARTIST>! x' i! X8 e- |$ X. t0 t
<ALBUM>Let Go</ALBUM>
$ _- }+ T  X% i$ X: G<COUNTRY>加拿大</COUNTRY>( p' ?# [7 w1 S- B  G
<COMPANY>索尼音乐</COMPANY>
% l( W+ D4 Q9 @/ u, [0 e( K<YEAR>2002</YEAR>
  x9 t- g4 D+ z5 e5 C0 k$ S</TRACK>
% |5 o% L& T2 o& `& R9 u5 Y' O- B# m' K, m( D5 a
<TRACK>
6 U5 K* o# U7 s4 }+ {4 s7 I<TITLE>三生三世</TITLE>; l; V, ?6 Z! D8 u0 ^6 j! O
<ARTIST>张杰</ARTIST>& @' w4 @: z: w" U' ]" \
<ALBUM>三生三世十里桃花</ALBUM>: U! z4 P$ j0 r! `! @
<COUNTRY>中国</COUNTRY>
; n9 B. V. X3 t* E% V8 u<COMPANY>仁溪音乐</COMPANY>0 N9 d0 g* U3 ~% O. G
<YEAR>2018</YEAR>
( p, j# A" L: p8 z/ ^</TRACK>
3 T3 P- _+ s  a, V" Y3 m& E
& N, C+ G- p' L7 B: x<TRACK>6 P/ L2 y3 |" b% E* b
<TITLE>Five Hundred Miles</TITLE>
, [: G1 y) I, a+ ^- g% p<ARTIST>Justin Timberlake</ARTIST>
4 j" ~" \6 c: ~8 z6 u; s0 W<ALBUM>Inside Llewyn Davis</ALBUM>
" |# n  a" j# i, h; g- ^* p# I<COUNTRY>美国</COUNTRY>
0 X" [; n) X6 y7 G8 [<COMPANY>华纳唱片</COMPANY>
& x0 Z* E% D" a& K9 l! X. C<YEAR>2013</YEAR>
5 t4 P' T- f: P' T" R1 `8 U( ]</TRACK>+ I$ T) S: b4 l& A

- D& [2 T" o5 T<TRACK>. s6 @& H9 U5 s% S) q& ^! o
<TITLE>演员</TITLE>- G5 y  E- _- t; \
<ARTIST>薛之谦</ARTIST>6 N8 X' @: H9 z( G- a% w
<ALBUM>绅士</ALBUM>
8 X- `8 l7 q, T2 v9 ~<COUNTRY>中国</COUNTRY>8 F% _( J3 a1 u, b3 f! E
<COMPANY>海蝶音乐</COMPANY>6 t! I+ O9 I8 j! e* N7 T
<YEAR>2016</YEAR>" B! U/ k5 W& E% o, k8 j
</TRACK>  ?7 ]: o4 c- P* ?# u$ y6 g6 M

, L& \5 M: i% r* z2 ^<TRACK>
! D9 V: f) G+ j0 Q* I& H<TITLE>Numb</TITLE>! c) Z; X1 i9 P/ i, e' B1 q
<ARTIST>Linkin Park</ARTIST>
' X# x" k4 z* f; N8 D: \- I$ r5 M<ALBUM>Meteora</ALBUM>9 v$ x( m( `+ [1 ^
<COUNTRY>美国</COUNTRY>3 k( m: }' G3 D7 K0 f
<COMPANY>华纳唱片</COMPANY>
' c$ `, f3 X1 v6 N<YEAR>2003</YEAR>
& [  H; W' p$ U( }, a</TRACK>
* J/ o3 p8 k; u- Z$ H# M
2 E2 ?- D; }4 V4 [8 j<TRACK>( Y" C3 ^* [; \
<TITLE>给未来的自己</TITLE>2 L3 O7 ~% b/ C; w; y" c# k" L
<ARTIST>梁静茹</ARTIST>
: ]# w% j, P/ l7 U- B<ALBUM>崇拜</ALBUM>  I2 e6 L3 m1 C( m
<COUNTRY>马来西亚</COUNTRY>% M; S: d6 O* p. G" c! _+ |; l
<COMPANY>相信音乐</COMPANY># S) R1 u* x, D; u; K$ w
<YEAR>2007</YEAR>
+ G* w) p+ V! H: O. i* O( `</TRACK>) O$ H0 }: z/ I& J3 ?4 H: ?0 i
! u5 r8 u* T, P0 U6 U
<TRACK>0 J) ]7 J( ~* a4 Z2 ~  s$ H, X4 ?9 l( ?  {
<TITLE>The Monster</TITLE>' V) Q0 E% b8 n! V2 `9 i5 S  V
<ARTIST>Rihanna</ARTIST>
& z) K: `  F8 q3 `8 g<ALBUM>The Marshall Mathers LP2</ALBUM>8 l, f/ H, z! y* L
<COUNTRY>巴巴多斯</COUNTRY>
2 ]/ x1 t7 l# e# k<COMPANY>环球唱片</COMPANY>
4 R) v% F6 ~; M& Y1 W& j<YEAR>2013</YEAR>1 e- m1 v$ k5 z" i
</TRACK>
' C. F1 ]% I8 G' J& c& p, a8 ^2 g3 F5 a5 w& ]0 w
<TRACK>- J& T, `' R9 w, n4 m8 {6 r
<TITLE>我终于失去了你</TITLE>1 J& W% e9 I& ?* ?6 R7 \+ h% R
<ARTIST>赵传</ARTIST>
; [/ Z" i6 x+ V4 j9 R<ALBUM>我终于失去了你</ALBUM>
* X& S" W9 Z+ i. ~+ X1 o<COUNTRY>中国</COUNTRY>( }! h, a& c6 K* F! g% _
<COMPANY>滚石唱片</COMPANY>
/ n! A! f' Y7 m& V$ y, ?$ ]5 q<YEAR>1989</YEAR>' K  g( N8 U. C! r& |, [
</TRACK>5 W9 u& O" B2 G1 i
% G0 j2 x/ X7 I! r1 U9 N6 Z
<TRACK>  a: ^( W* F2 X8 r' c3 q+ E
<TITLE>Main Titles</TITLE>
  g  L# {* q* k3 p1 W$ }<ARTIST>Ramin Djawadi</ARTIST>
  a3 t! K* Y7 h<ALBUM>Game of Thrones</ALBUM>  ?2 D6 T8 F5 [$ q6 r- f1 C
<COUNTRY>德国</COUNTRY>
& m! E7 ]2 y# d' Y<COMPANY>索尼音乐</COMPANY>
' I: E1 @+ j( l9 \  w<YEAR>2011</YEAR>
1 `6 J4 N  {. i' y/ \9 Z9 b</TRACK>4 Z* b$ N) h* [$ ^9 h, K
: m* q) g# v! q; P
<TRACK>  `9 g$ S* p7 x
<TITLE>传奇</TITLE>2 x+ k7 ^5 X) J. l7 H3 g0 \
<ARTIST>李健</ARTIST>( C8 J! O; m# u  X0 I6 D. o* q
<ALBUM>似水流年</ALBUM>
# O+ c2 p# ~, ^8 y' M/ S<COUNTRY>中国</COUNTRY>
* y& q, {* R* `" K& |<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
. {5 q4 N& h  O9 s. l7 A<YEAR>2003</YEAR>: K$ ~: c/ u1 e" D+ ]& R
</TRACK>" r* u/ Q- Y! S9 }
, v; m5 U7 d. P2 \2 A" S
<TRACK>5 b  ]# W+ C1 R
<TITLE>完美生活</TITLE>: E( m0 b9 m# k  s5 p& {4 L
<ARTIST>许巍</ARTIST>5 Q4 B8 n7 d6 t
<ALBUM>时光漫步</ALBUM>" p  O/ }) E' i# \# X( z& b  k6 W: M
<COUNTRY>中国</COUNTRY>7 X' V/ u# [- O- _
<COMPANY>金牌大风</COMPANY>
: n8 g2 D8 ]$ Q% w! g8 T+ V<YEAR>2002</YEAR>
1 D% t$ K, r0 v/ F</TRACK>
: F" e5 |- E5 |4 W4 Y</CATALOG>[/mw_shl_code]
- _0 \2 e7 X, c" B1 d

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

热图推荐

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

admin 楼主

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

发表回复