使用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;" ]: Z) a% b, t: X. X0 W
  table += "</td><td>";3 h% d9 ?% W* X- O
  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
* D% G  V; U  d4 G! L5 H  table += "</td></tr>";" H$ R2 }& f. K- E4 e' T6 O
}
  B" _( S6 h& w2 t
7 }' c8 `* U  D* W* Odocument.getElementById("demo").innerHTML = table;& I$ J% ^0 ^6 I  ]
var i = 0;# [9 U9 _  ~0 W' y9 ^3 U
      function next() {
0 l& e0 `3 y  }: o. D          // 显示下一首歌曲，除非已到达最后一首
# n+ J8 W3 \) N          if (i < x.length - 1) {
9 `. M4 `8 Q9 Y, d             i++;
/ d& e7 r3 T  W+ b; M# G7 i& Y4 K- W             displayMUSIC(i);7 i, J' p, e9 q
         }
5 N4 ?6 u3 Z- ?9 G. @       }
  N7 U2 U: A2 z1 S4 ?* U1 c/ q/ W! h8 o0 \
      function previous() {
6 m$ C/ h# k$ K          // 显示上一首歌曲，除非已到达第一首
! J/ w  n: ~. Q. f& d          if (i > 0) {* x; ]' \5 d1 W* C9 W
            i--;8 Y" ]5 j/ m" w8 v
            displayMUSIC(i);
& _, T/ d, C' H  T* _0 y/ G          }9 E% m1 j( B- q5 S4 q7 B
      }
. H' V* R4 v2 |4 A. j: a2 {% J7 j+ \8 O3 I) h7 b
      function displayMUSIC(i) {
7 |+ o5 K8 k' c* C# t; A          document.getElementById("showMUSIC").innerHTML =5 L/ _: A" f* p! U- K2 W8 B; j
            "<ul>" +0 Z0 c4 }6 K* q7 U
            "<li>曲目：" +, x* O/ _# s  d: ~  A  T
            x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +7 Q" U: U. f3 T4 u& W( h
            "<li>艺术家：" +
) d. M/ i: @9 U- v, r             x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +9 |2 k0 c( u" V
            "<li>专辑：" +3 E1 R7 E! @+ d& }% v
            x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
: n: k' N3 j1 f/ u             "<li>国家：" +; X% x2 d9 h% }0 |$ k
            x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
9 w2 Y; o. G2 V+ c) o             "<li>公司：" +! I% I: w4 i2 b! g# V( X
            x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +6 i/ q8 [- [* O$ m' }( H5 k# t
            "<li>年份：" +$ W+ V! g1 P! i* C9 p/ w
            x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +. X5 T# K9 Y* l: c/ j, ]
            "</ul>";  u5 ~; u; v( q# V8 s" p# a
      }2 c1 J1 G$ m& g3 j1 A6 @
+ h5 Q/ H# @8 ^- E1 S# U6 d9 @/ |
      function loadDoc() {
% v' n" t  `3 y7 z" Y# ~& }) d8 p% T# X; Q- }" \8 w* O0 M# B
         document.getElementById("demo").innerHTML = table;
/ V6 ?& A  D' Q! ~7 W       }
1 B: H3 K  t  P
4 M+ [- f9 ^7 Q6 x! q </script>0 I. Q/ }( i" F7 r
2 Q/ y! y9 M9 o) [* s

' q; @5 J3 p( i" U  H</body>
; p" k! F, L- F' }% ~, J9 ~( p$ v2 c( _5 U1 Y4 E
</html>
- \, u6 x- O. }5 p1 d8 d( p6 s
1 @- U0 t* o' V& M6 S; n- n
3 k' C0 r1 J" M2 k+ Z0 n' w+ s[/mw_shl_code], e0 o8 a! ?7 C# c6 L/ O- L6 c
; l3 N9 g' m0 \4 b( P# q' B

$ M/ Q7 Q/ X9 [& L  S) j+ E3 {8 \. O8 r8 v0 }3 A/ r
XML文件
* h& }7 w. c) ~% z$ S) \
; o4 q' E9 q" k[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>: ]4 E/ g0 ?+ M& u4 M. I8 A6 @  |8 g
<CATALOG>
! ]# V3 H! a$ M/ m4 D/ u. R<TRACK>
& @2 G) p0 u; R, M<TITLE>再见</TITLE>8 e- d" t) k) t) b) U( C; g0 }' H
<ARTIST>邓紫棋</ARTIST>
" |0 P6 ~% q3 x0 h3 R<ALBUM>新的心跳</ALBUM>
* ?1 ?& P& ~- e2 c/ G( ^2 s& j, ^<COUNTRY>中国</COUNTRY>
& M6 l! X2 \" \* C<COMPANY>邓紫棋工作室</COMPANY>
; R3 B8 g) A1 k$ T0 n. U# V2 P. j* ?2 S<YEAR>2016</YEAR>
# ]! l4 k3 b1 [" t1 p+ j: g( [</TRACK>
' B- @) j9 F! h- e* H
0 s- |( _1 Q- t! V<TRACK>
2 t: K/ d2 c- Q, u* k, s( }<TITLE>All I Ask</TITLE>) o# B* B4 O. ^: m: r- b) P( Y3 U6 @
<ARTIST>Adele</ARTIST>; a5 E0 T: p2 v0 h( y; G5 `" e! [
<ALBUM>25</ALBUM>* a' N1 R# Q& f1 b; W) C4 \2 E
<COUNTRY>英国</COUNTRY>
. Q, z/ o% j0 F( m, b- d5 k<COMPANY>XL Recordings</COMPANY>
7 X( P/ O- z  {<YEAR>2015</YEAR>) Z8 b& J! w' w( Y& S8 p# [
</TRACK>7 f6 Y9 B7 h1 a" j& a

6 z+ Y5 E& O" D+ e# N<TRACK>  q. `; \! G# z* L: L" t  m
<TITLE>之乎者也</TITLE>- q! E% h  E& @- K$ i
<ARTIST>罗大佑</ARTIST>! K) s" G& S0 z' S7 L/ y
<ALBUM>青春舞曲</ALBUM>1 |( ?' S7 s* ^; [+ ?
<COUNTRY>中国</COUNTRY># M8 C/ _- u: H( o% q5 {) z& I
<COMPANY>滚石唱片</COMPANY>- |* n& @- Y1 h1 P  n3 h! a
<YEAR>1982</YEAR>
1 y# U- e; V1 h4 u3 ?</TRACK>5 W( Z: j; a5 f9 ~

+ t$ e, s( n- l$ U. y9 }3 y" T<TRACK>5 L7 ]# [9 N, w- @
<TITLE>Never Be Alone</TITLE>& J+ q2 d/ z# h1 v7 G$ H& s
<ARTIST>Shawn Mendes</ARTIST>
- g/ H* g& V% n5 m( O3 C4 N<ALBUM>Handwritten</ALBUM>
1 N3 c$ F  k) ^# j9 ~9 g3 H! f<COUNTRY>加拿大</COUNTRY>
9 a, ?' g8 _! h7 t% i1 h<COMPANY>环球唱片</COMPANY>$ a" w, C- Y& [( t3 K2 p
<YEAR>2015</YEAR>
2 f& c( C% \. g! e) |</TRACK>
4 i3 ]/ f% B4 K4 M6 j* t! w/ \3 d7 z# u/ Z3 s7 [. g  W
<TRACK>0 R& K/ N# u4 n
<TITLE>慢慢</TITLE>* L6 N3 _& m5 N" W# M
<ARTIST>张学友</ARTIST>
6 h! i( ]9 f4 b6 x; X! u<ALBUM>忘记你我做不到</ALBUM>
' \/ E# M, ?$ e7 x3 H<COUNTRY>中国</COUNTRY>
2 u% e% B$ \: W( r" n<COMPANY>环球唱片</COMPANY>
+ @* `$ R( u; _) m<YEAR>1996</YEAR>
) R, l9 ^2 e, U4 m% E</TRACK>
; M( Q$ z) G; H- ~+ Z
5 b( Q8 w  l) R# R- Q<TRACK>
$ B# y/ @1 B' @+ [+ l0 T' D3 _<TITLE>Complicated</TITLE>" }( v0 @2 d. z' X/ g
<ARTIST>Avril Lavigne</ARTIST>2 d/ S- Z' ^* J" E  d: y) z
<ALBUM>Let Go</ALBUM># \8 O3 T. S4 R' g3 W$ ^+ l+ \  O4 K
<COUNTRY>加拿大</COUNTRY>
4 S; @. ^4 i. k" B<COMPANY>索尼音乐</COMPANY>+ f0 c: V3 P6 ~, O" l3 c3 J  p
<YEAR>2002</YEAR>7 E3 T! u3 Y# n: i1 L; m
</TRACK>
* I# ~9 R' D7 U* H1 _  L
6 A4 g  u8 T0 M3 e+ N<TRACK>
! H* W) [  o, ]" Y( M- r<TITLE>三生三世</TITLE>) ?: y" g7 T7 c2 E- A* |# _& o+ _
<ARTIST>张杰</ARTIST>
9 |0 k& r8 c6 |; I+ n6 y% z7 i<ALBUM>三生三世十里桃花</ALBUM>; W' g4 W4 q: n# k9 Y
<COUNTRY>中国</COUNTRY>2 I9 F+ M2 S+ f1 T5 g, g5 C
<COMPANY>仁溪音乐</COMPANY>
9 b. T- |0 o7 o6 U4 }' K5 R4 ^( U<YEAR>2018</YEAR>
5 r+ R  \' v3 R3 j</TRACK>
) E+ d. h' E8 ]
, x% [, ]5 N7 d" N# M9 B( L, g/ {<TRACK>
( q: [. }  w3 K0 `' S: f<TITLE>Five Hundred Miles</TITLE>
+ I9 r. t" `9 G8 f1 n<ARTIST>Justin Timberlake</ARTIST>  j6 d8 W- g/ h* e9 X# n/ X
<ALBUM>Inside Llewyn Davis</ALBUM>
  p5 j2 J' Q5 l% P0 }  U3 b<COUNTRY>美国</COUNTRY>( {& }" W* n* D  I
<COMPANY>华纳唱片</COMPANY>
4 F# m' s, t- _0 M% N2 G<YEAR>2013</YEAR>
! u9 l4 O1 V3 c" z: |</TRACK>
4 |5 R6 u, V1 X- `) s' A( j) S" U2 H; f# V% n1 h
<TRACK>
$ j7 W: Q$ g1 v3 P1 ?3 Z. u5 T8 A- u<TITLE>演员</TITLE>$ {$ I9 H* I4 S, G" {
<ARTIST>薛之谦</ARTIST>
, \; w* K! d9 s8 ^, q7 Y5 e( i<ALBUM>绅士</ALBUM>
  Y5 z- n$ N5 z* P) |8 _9 s" v<COUNTRY>中国</COUNTRY>
3 t' \. i8 f. P. g4 o<COMPANY>海蝶音乐</COMPANY>  t# ]& s& A! ~2 s6 L$ U( s
<YEAR>2016</YEAR>! }- X+ l' d1 B$ V0 C7 [
</TRACK>
- g- m8 [7 N. ]' F* ?: v$ X, _* [9 L8 _8 n  U7 t1 U+ i1 r9 _
<TRACK>
0 U8 d3 {, \; {" p<TITLE>Numb</TITLE>) i2 d; T* @& t2 z  N$ N
<ARTIST>Linkin Park</ARTIST>
: p% n4 q' M2 q' Y; f<ALBUM>Meteora</ALBUM>  y3 ~% M' `! k# ~, y# ]
<COUNTRY>美国</COUNTRY>9 a& U, u5 m7 t4 s
<COMPANY>华纳唱片</COMPANY>
/ ^0 `! d: K  A<YEAR>2003</YEAR>
% e3 j% F5 Q: \+ E</TRACK>
: b/ M( {3 y' O1 q  a& ~* T0 A
( e3 Y/ ~$ w6 _! h4 t6 ~: _, G<TRACK>
) u6 E- O3 k" P# Y1 u$ g<TITLE>给未来的自己</TITLE>
% U0 t# ?4 G8 u% ?<ARTIST>梁静茹</ARTIST>5 @# d# G% W$ N; Q5 ^
<ALBUM>崇拜</ALBUM>
. k9 i$ i. q3 d5 z. n% p$ S<COUNTRY>马来西亚</COUNTRY>
% v, \3 j& v( q0 \& c. x. y<COMPANY>相信音乐</COMPANY>8 o2 V9 M" E& z, e8 M) A) n
<YEAR>2007</YEAR>
+ E, o- N: Z9 E, a- V% ]8 b</TRACK>
2 Q3 V) h/ L) D( V+ `8 D
/ ^1 B7 l( [+ s8 u<TRACK>7 q! Z6 G" b0 ^
<TITLE>The Monster</TITLE>
. B* @7 a7 l0 r7 q<ARTIST>Rihanna</ARTIST>
$ M0 s2 P9 @5 k6 I  ^2 X: [4 Q<ALBUM>The Marshall Mathers LP2</ALBUM>& O5 X5 Y$ ~; ?0 l
<COUNTRY>巴巴多斯</COUNTRY>
# C$ D) G- H6 t( d  U& ?0 s7 x+ \<COMPANY>环球唱片</COMPANY>; ^. a& Q7 T  `( r$ j/ N6 w7 o5 p
<YEAR>2013</YEAR>2 g5 D9 C( F5 z# V' q
</TRACK>
$ _, L5 y& P0 `* ?/ G/ u+ H4 F1 K. A* M
<TRACK>
+ t/ @" t6 r, T6 d<TITLE>我终于失去了你</TITLE>
9 A4 j; A6 e: W7 O5 Y2 _3 ?! }<ARTIST>赵传</ARTIST>* _+ o. y2 a+ P- ]
<ALBUM>我终于失去了你</ALBUM>
1 q# ^- d8 B! M( F, M<COUNTRY>中国</COUNTRY>; \8 c. k/ o$ q. O
<COMPANY>滚石唱片</COMPANY>0 {/ F- I% T$ f3 j" r6 F
<YEAR>1989</YEAR>8 j( J+ b) B. Y  u5 B1 o8 k1 u
</TRACK>$ J$ X1 p5 h, X$ h6 Z: U' [
! H, E& @8 P8 @, k
<TRACK>
! b6 b- a% ]. I- t7 W<TITLE>Main Titles</TITLE>' `& t/ }0 ?3 F, z- u' e: v+ p$ |
<ARTIST>Ramin Djawadi</ARTIST>: y* H. p7 V+ z/ d2 U4 G; u7 Q2 U6 M
<ALBUM>Game of Thrones</ALBUM>, B" P, i, k1 K' B
<COUNTRY>德国</COUNTRY>5 o0 }3 ~+ z( R7 b# B/ v
<COMPANY>索尼音乐</COMPANY>
0 S1 k8 p5 R% d<YEAR>2011</YEAR>  i; R7 B; a8 W0 U! y# e
</TRACK>
1 |, J' b9 a$ n5 g
9 T# e! _+ u, i( H<TRACK>
3 ~) I/ F% Y' w$ f<TITLE>传奇</TITLE>
3 x- T( ^3 h5 D+ P, v# x, j" H<ARTIST>李健</ARTIST>3 I# p2 l/ u% d  i
<ALBUM>似水流年</ALBUM>
8 D' M; G. r2 Q0 D5 ?<COUNTRY>中国</COUNTRY>
/ a+ @+ i* @9 F) P# ^. c. p<COMPANY>北京完美坚持文化艺术工作室</COMPANY>- D  p( z3 o5 d: u, [% n) M$ m6 z
<YEAR>2003</YEAR>
) P% H! F: W1 @" L</TRACK>
' o5 Y- y& }% G( v5 ^, J; \# F* `- n
<TRACK>( p2 p, D5 ^9 v+ C& Y' }' d
<TITLE>完美生活</TITLE>  \4 R- _5 n7 ~$ f# _: Z+ L8 j" V
<ARTIST>许巍</ARTIST>* g9 k% I3 l# n/ L: U
<ALBUM>时光漫步</ALBUM>
# E* s( X# e( d<COUNTRY>中国</COUNTRY>$ l! X9 a5 i4 T$ o
<COMPANY>金牌大风</COMPANY>+ a# J3 Y/ E! A/ t
<YEAR>2002</YEAR>' l& X) b/ L* W( l7 w% K
</TRACK>; e9 \9 X8 \2 E* P
</CATALOG>[/mw_shl_code]
2 X% n5 m/ F' B! Z  @

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

热图推荐

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

admin 楼主

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

发表回复

浏览过的版块