使用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;
9 d* l- A# a  H; e" D0 A! g+ e  table += "</td><td>";9 y( I/ O  V  d( C3 b
  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;; I& p  Y; r: ]! j: H' Z! P
  table += "</td></tr>";
! E& b% m2 M! n8 y; B3 k" @% x: @}
/ d6 p2 i7 Y3 y" y7 s5 c: k) n4 i; ~5 W
document.getElementById("demo").innerHTML = table;$ ^# B/ A9 G8 O) _$ c8 R% Y
var i = 0;
# P2 y# D7 q4 U3 n* D       function next() {
7 P  z% G+ E( }2 K          // 显示下一首歌曲，除非已到达最后一首
# d1 [# Y( N! _          if (i < x.length - 1) {
8 w- R. C1 t4 k( f0 m             i++;4 Q# [) K* k, p/ i6 q
            displayMUSIC(i);. j; r6 b/ t- a% D/ ~% |' ]
         }+ f- B$ \* g  D0 D9 G
      }# o. J: q# r: {& J  h$ o1 l
8 Z: I& M' @0 D8 ^1 A  u3 a) ^3 P
      function previous() {- l: _4 o# m/ e. |
         // 显示上一首歌曲，除非已到达第一首
  d  P8 a( s# q( V5 a" j: a          if (i > 0) {
6 i' q& \4 H; B$ m* l5 A             i--;
* E6 Y  X7 }: T/ y' T: H             displayMUSIC(i);
( }) x/ [3 @, y( R7 h          }
5 i3 G; c6 ^1 ]2 Z( t/ ]4 S( O       }" M& M  E" a3 \, k  J9 r
9 _. ^4 |$ m( c' m1 c2 u* I2 ]
      function displayMUSIC(i) {
0 u5 a0 ?3 i* q          document.getElementById("showMUSIC").innerHTML =
9 |1 Z: w# g8 T  ^             "<ul>" +% w+ y7 d. _1 A$ H9 d9 N
            "<li>曲目：" +
  U0 G7 [2 d; m6 r5 k/ a             x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
+ Y4 P9 |' ]- O1 z             "<li>艺术家：" +
+ J# R4 H% ^+ W3 ]4 F+ c, {6 a             x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +" m* f; R) z! p! I7 R" o& R: T
            "<li>专辑：" +; }; d% Q6 k* [
            x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" ++ G* [0 |" k0 ~) n8 m% S" ~
            "<li>国家：" +
. Z% i( {7 H; r3 ^             x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +1 w' B' \# t3 ~9 J
            "<li>公司：" +! Z8 }5 W) q! n8 x+ M7 C! l% \# X
            x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
! k, c3 d/ O0 t, r# q1 y' Y, O+ Z" @             "<li>年份：" +5 D* u0 d7 z3 |. y$ n9 V$ T! V; N
            x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
6 L; i9 \8 Q, N/ O' U             "</ul>";
; J: d2 `: W5 O% I- Z       }/ {) q! {' o+ ]' S5 B7 x" A
/ }$ B; T6 N& P
      function loadDoc() {
2 M( U! Q9 y( R; v  k5 O
2 H, \) W9 [6 x* N5 M' e          document.getElementById("demo").innerHTML = table;( y+ t  a) x- ^) G
      }
9 e3 p! X, W- b3 \* V% O/ f0 _1 Z7 @& n
</script>
3 l4 H" X( K4 c+ a6 `8 L- l
  q" d( }; o1 ~6 S
/ L  o) \' T2 e* w% i, H</body>
  U: o7 G, N, i5 a7 {2 }
' h' H- Z# `7 L9 z% C( J</html>
' y# M+ B7 A; x1 r$ L( d# l
! Q% Z# ~1 Q' d$ p( h. X* F, G4 l9 A
[/mw_shl_code]/ y3 g1 Z  j; A- m& d& v
8 u$ m3 M" A' ~$ q# {! G5 S

& I) c8 P6 S0 ~8 c& X# N. L" M" W' |. u2 n4 r
XML文件$ C- d* o7 t9 o$ n! E  n
6 q0 K- ^8 _$ A# u2 C6 I5 `' I
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>: O3 B1 w) M, W* ?. S9 E  h4 ~
<CATALOG>
# [  v: s4 ^" e/ D# N* j6 Q- x<TRACK>' C) ?  u4 N3 D7 r+ N* J: L9 R
<TITLE>再见</TITLE>, x) X' h. D. W$ d2 X* j
<ARTIST>邓紫棋</ARTIST>
8 a) F% c1 U$ J4 {, M5 i0 V<ALBUM>新的心跳</ALBUM>2 P( p6 q/ C0 U
<COUNTRY>中国</COUNTRY># s' f$ b; }1 }
<COMPANY>邓紫棋工作室</COMPANY>7 k/ s3 H9 `7 p' E; J" ^# a
<YEAR>2016</YEAR>; n6 I6 i: e) \! W# c; _
</TRACK>
4 S% B# _$ X: K% m: j0 e% E  w$ J5 M6 J# n
<TRACK>
! D$ |) L% K, ?! N# C$ `# C. I<TITLE>All I Ask</TITLE>" J& m6 }( _" h$ D7 g) }# _
<ARTIST>Adele</ARTIST>
- E$ T! N& R9 \7 r8 v, _<ALBUM>25</ALBUM>
6 X) w* ~% D; s<COUNTRY>英国</COUNTRY>2 l0 E4 e9 ~/ d8 C" i5 Z
<COMPANY>XL Recordings</COMPANY>
! E5 r  ^& C' b8 s" u- p<YEAR>2015</YEAR>: Z4 s$ X1 I$ J. p9 M
</TRACK>" f8 O& ~; `- M6 g) v% I

% W# N8 M! ^, P( [; I<TRACK>3 Y1 i, _. t) y3 }6 \4 e2 c
<TITLE>之乎者也</TITLE>9 e3 Z4 G5 Z$ p3 A4 M
<ARTIST>罗大佑</ARTIST>
6 y& ~5 e) [0 u% B2 G; @<ALBUM>青春舞曲</ALBUM>& b* I! ^, D& N% o2 P
<COUNTRY>中国</COUNTRY>
9 b4 g" Q+ C5 p& n<COMPANY>滚石唱片</COMPANY>
* i0 ]) Z) ^- E8 M0 n! N) p<YEAR>1982</YEAR>
) Y1 t! y" F0 {9 ^( g! ~) [</TRACK>( Q' Z( [, V8 S  `& Q# }( k, {) X
9 c8 K1 [. g0 A* n: L2 T7 |6 f
<TRACK>. I- Z% D' p, V
<TITLE>Never Be Alone</TITLE>1 j0 r6 B3 s) N6 y( C
<ARTIST>Shawn Mendes</ARTIST>- z8 t, m" {" v; s8 c
<ALBUM>Handwritten</ALBUM>7 S( x) S& |/ k7 o# m: E
<COUNTRY>加拿大</COUNTRY>
' d6 F7 s  ^. m7 I' L$ X<COMPANY>环球唱片</COMPANY>3 \$ g! ~! C' k% J! ?0 g
<YEAR>2015</YEAR>
  X" M+ t! G7 \1 i</TRACK>" z7 H7 l8 a1 @4 N6 [7 `
! F( ]% s; n* t
<TRACK>
4 k' `) h& C3 C2 ]/ s( y8 P- }<TITLE>慢慢</TITLE>$ X; J; o* O, V6 W+ h  g- r" g5 m
<ARTIST>张学友</ARTIST>. \+ l% j" W) P
<ALBUM>忘记你我做不到</ALBUM>
' Z2 t% K" Q/ J- A2 @' E& c. D" H) K- M<COUNTRY>中国</COUNTRY>" h! j( F0 j7 R. F8 p0 a% B
<COMPANY>环球唱片</COMPANY>
1 u$ e/ X' p* i% u  s9 I6 b7 [- b<YEAR>1996</YEAR>
2 Z- i9 I$ [# c$ Y3 w; |) _</TRACK>6 k) s8 f) u; ?3 s. Y8 ~

* `. L" t' M( @* @6 O) }<TRACK>6 Z9 c3 {6 C8 J2 P3 b+ X5 W5 ?
<TITLE>Complicated</TITLE>
  r' M3 D5 y2 |" o2 P<ARTIST>Avril Lavigne</ARTIST>8 e! o0 o0 u2 [/ H9 U( M, W3 z
<ALBUM>Let Go</ALBUM>
; G% q$ [" f3 c2 d; M<COUNTRY>加拿大</COUNTRY>
; O2 I1 Z# ^; N<COMPANY>索尼音乐</COMPANY>& H; b# k9 ^' v+ P" B8 v! ?' h
<YEAR>2002</YEAR>9 O0 h- s: S/ N# ^; c6 N
</TRACK>' c9 w6 `6 G, k. [" U
; u6 F# [: m8 ^8 l% @
<TRACK>3 l1 v4 W% Q/ }8 v
<TITLE>三生三世</TITLE>
7 K: U# k; Y" h& s% \<ARTIST>张杰</ARTIST>
$ y& u* p( z, V7 r4 Z- f% R; X6 v<ALBUM>三生三世十里桃花</ALBUM>1 h+ L- f$ o' v& N% H# |  G7 ]
<COUNTRY>中国</COUNTRY>
% P; q& }; k2 i" r8 T7 z<COMPANY>仁溪音乐</COMPANY>0 m9 ?6 {( Q& n8 t3 `8 m
<YEAR>2018</YEAR>& k, H, P, [0 S. n0 T0 f3 r
</TRACK>- |- v$ b5 p1 \& h) H) D4 A- W

% ]1 o+ D- u8 G  o4 {8 G<TRACK>% ~( S  n( B' p2 Q$ Z
<TITLE>Five Hundred Miles</TITLE>
! a+ G0 C8 ^9 L+ _: r<ARTIST>Justin Timberlake</ARTIST>
2 M9 x( E2 @! U0 j, U<ALBUM>Inside Llewyn Davis</ALBUM>
8 Q( v. f" h# F* s. N& a<COUNTRY>美国</COUNTRY>
1 E) j6 S: |  u9 I4 z<COMPANY>华纳唱片</COMPANY>
, @6 b+ |5 u) t: s2 j9 K3 c9 S9 c<YEAR>2013</YEAR>0 p6 e' @0 O+ k) f$ V3 [' K# I2 C
</TRACK>
$ \, q* t- Q4 G. H8 C6 m, }' w& \( [
<TRACK>; _9 a8 P" n5 [. ^$ B
<TITLE>演员</TITLE>
) h5 X7 y9 j) Y/ @<ARTIST>薛之谦</ARTIST>
, M# U% F3 q: p; `4 l. v<ALBUM>绅士</ALBUM>3 l2 N+ I* ~4 R. i+ R5 ]
<COUNTRY>中国</COUNTRY>- {4 I6 J& O% Z
<COMPANY>海蝶音乐</COMPANY>
, e$ Z9 ]* c3 p% O( i+ W<YEAR>2016</YEAR>( h" j" `, p3 |( T# o! o4 ?
</TRACK>1 L* ]& G+ Y/ \9 L4 ]3 r

& Y6 f9 Q8 ]9 H  a6 Z+ F6 r<TRACK>( S0 ?5 `* M$ D- @3 G& Z5 T
<TITLE>Numb</TITLE>+ q' Z- u- r. T! a+ O6 X
<ARTIST>Linkin Park</ARTIST>
* D9 l, Z, v" }4 B7 N8 b/ s<ALBUM>Meteora</ALBUM>
5 ^* a# x7 n+ w( ?& X8 b. N<COUNTRY>美国</COUNTRY>
. f% Z+ F( S5 b8 [. h- v<COMPANY>华纳唱片</COMPANY>
5 r. I3 D2 {8 Y4 Y. T<YEAR>2003</YEAR>
8 S% Y8 Q1 F& G& G8 K: d) @: W</TRACK>
5 q+ q5 C3 u6 X2 e
! D  o5 ]( Y6 Q" y) r3 H- Q<TRACK>
$ r8 d- {# b' m- J: L<TITLE>给未来的自己</TITLE>- ~. F' \, ?4 i7 n4 L- `: W
<ARTIST>梁静茹</ARTIST>4 W$ K% d" L2 s  O) S' X& P+ E
<ALBUM>崇拜</ALBUM>9 W5 A0 H. @: K" ]" w. k$ i2 L
<COUNTRY>马来西亚</COUNTRY>
* @4 B% l5 q$ X4 s( g<COMPANY>相信音乐</COMPANY>' V, b, H4 K# q7 k- |
<YEAR>2007</YEAR>
& y4 J6 P* z" n</TRACK>4 e% }% u) G$ V7 e
% E/ L% L. g$ x7 R
<TRACK>
. q, M! s" A& F3 [<TITLE>The Monster</TITLE>( g- C0 v* Z( v
<ARTIST>Rihanna</ARTIST>
7 v2 t: h) n) D<ALBUM>The Marshall Mathers LP2</ALBUM>2 W6 G4 p7 @* _; I3 {
<COUNTRY>巴巴多斯</COUNTRY>
4 w/ r% ]3 L, ]8 {. E" y<COMPANY>环球唱片</COMPANY>4 ^( D& p' E  p* e! R
<YEAR>2013</YEAR>
3 E$ y  ~, f: A3 S/ R3 P</TRACK>9 s5 q/ |6 i- t0 `5 u

% Z# N2 t$ E, s<TRACK>+ l* D6 Y, B7 D
<TITLE>我终于失去了你</TITLE>7 C% O8 M! m, Q  d8 Y
<ARTIST>赵传</ARTIST>
- u5 n, G: K$ ?% c  N9 Q; z- A<ALBUM>我终于失去了你</ALBUM>  k4 l8 B, F. [1 E% S
<COUNTRY>中国</COUNTRY>& z" [4 o( B3 ~) ]& V( q
<COMPANY>滚石唱片</COMPANY>
) E* E& b" P( `; k# r<YEAR>1989</YEAR>
5 k/ x8 }  ?+ ~) F+ g6 i</TRACK>. z# u1 y0 V/ J7 k6 f+ _

. o; w! S/ S8 `<TRACK>- y# h. q3 g2 n& \
<TITLE>Main Titles</TITLE>
! Z- l* x$ N# O7 k+ e- \<ARTIST>Ramin Djawadi</ARTIST>* n0 ^4 L' X5 I7 ^. |& h& s
<ALBUM>Game of Thrones</ALBUM>
! K% M* I+ ?9 p2 E) `<COUNTRY>德国</COUNTRY>
8 a5 c  W7 e. V4 z: y5 c0 j<COMPANY>索尼音乐</COMPANY>
! r; E" G$ {. ~1 [<YEAR>2011</YEAR>
# g$ N: s" @" |: w: B! c. o7 x</TRACK>
  l5 L) \! o* w- ^3 A# \5 s& b3 c- H2 ^" W! v0 t4 p
<TRACK># G4 u/ |$ U2 h& f$ x
<TITLE>传奇</TITLE>6 _- u' Q" b3 L" P7 s- s- B
<ARTIST>李健</ARTIST>
1 g: j0 ^  K. a+ Z<ALBUM>似水流年</ALBUM>
1 C) L( w; d% z7 n" X+ j<COUNTRY>中国</COUNTRY>
' j. ^! r4 P2 I6 s! I5 @% M<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
2 H/ ]2 G( N% F7 L<YEAR>2003</YEAR>* {6 Z6 a- V$ `
</TRACK>. ^5 u8 x+ R' `, W

% T+ t! p3 |2 T  L( |% `; e2 l<TRACK>
! E# q9 \: I; d- Q6 }<TITLE>完美生活</TITLE>
1 k" o2 F9 a9 E# H/ S$ y<ARTIST>许巍</ARTIST>5 j# Z# A! B* Q% P3 z
<ALBUM>时光漫步</ALBUM># {7 \9 ]7 n' x, _
<COUNTRY>中国</COUNTRY>( y/ T7 g$ C( F0 \8 t% i3 M
<COMPANY>金牌大风</COMPANY>/ k. W/ a8 c5 ~: |; a: L# N" g
<YEAR>2002</YEAR>
! F" N8 B. \) `, S( B: |7 v</TRACK>
0 ?2 H* W9 c1 D- j3 s8 G: X7 B  {</CATALOG>[/mw_shl_code]1 I4 Z! U) b" K& v. M

PLM之家精品课程培训，联系电话：18301858168 QQ： 939801026

NX二次开培训

Catia二次开发培训

Teamcenter培训

Tecnomatix培训

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

热图推荐

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

admin 楼主

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

发表回复