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

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

[复制链接]

2019-10-29 20:10:50 2242 0

admin 发表于 2019-10-29 20:10:50 |阅读模式

admin 楼主

2019-10-29 20:10:50

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

您需要 登录 才可以下载或查看,没有账号?注册

x

1 c" b" a* f; I& H  k: n" Z- I$ ~# U% [% Q  S- d& J+ g; T

% s- n7 G6 U: O& y( b[mw_shl_code=html,true]' g4 T  _9 l; U) l) F9 ~, u6 z
) j0 V' t  S7 q/ D+ U7 y4 [
<!DOCTYPE html>
; i# t* Y+ T0 s+ W<html>% v1 N2 J9 ^4 F- p2 m
<header>
  `2 W  k" e! K' F( `; P$ F/ a. E6 J, l    <style>
( p5 [! f7 v2 T        table,
- T! e' X( O# |        tr,5 y  N$ G5 @! j* g: ]
        th,* Z+ D4 Q" `/ {, Z1 U
        td {
$ K8 q0 x0 l$ k$ R. f            border: 2px solid rgb(20, 59, 230);
' I* o7 D6 W. Z+ ]* e3 O8 Z1 B8 V            border-collapse: collapse;1 s4 ^+ [& X0 {; l% m
            text-align: center;0 J1 a% s- Y7 l; r, Q: u
        }
( b/ ?# N  T" k1 l2 P% F7 F6 q, d! o" J, m
        th,9 ?( }  d; K' ~# E: `6 M# B
        td {+ p7 P2 Z+ Z8 p, N) Y8 t  Z! c% K& W
            padding: 5px;
% P& [  L7 {* g( x" Z1 V1 o        }
9 V# ^( W7 k% s    </style>
+ j6 s$ V  D3 w. p</header>3 _7 Q! B# O( w" k
9 \# t3 T8 u2 l+ ~# Y, i
<body>" h5 W7 ^) y( K) p; R8 j7 R% R# T
    <h1>xml http request object</h1>
6 [0 C2 u) O7 L) N- F& z% v4 p    <button type="button">Display Music</button>
- x) ]. ?% H. _" L1 r# E    <button type="button">Previous</button># Q! X4 i, i" u
    <button type="button">Next</button>$ B/ T; k: n! b6 n
    <button type="button">get my music list</button>
4 y; V7 E+ W+ j+ d% a: h: b* T1 b    <table id="showMUSIC"></table>' N4 H" j/ `. k5 G
    <table id="demo"></table>
  [7 ~: `, b, }6 g5 ~! }8 S1 ]    <script>
" t0 B. O& ]7 h  `9 j& Z0 G! l, Q4 a5 F. e! ?# T$ m0 ]
        var x, xmlhttp, xmlDoc;
3 ?- j3 E0 Z1 S. q) [( ^        1 \# U" l9 U3 d
        xmlhttp = new XMLHttpRequest();
5 h0 `, ~- \+ b1 n: K+ |        xmlhttp.open("GET", "/files/music_list.xml", false);
. D# f; J4 ?9 s  T7 h# U        xmlhttp.send();: v! n" o6 p5 P7 ^( A
* l' S7 [: h6 O' u; s1 B
        xmlDoc = xmlhttp.responseXML; 4 R  x1 I% c2 u
        var table = "<tr> <th>Owner</th> <th>User</th></tr>"% ^# a8 m% r& C+ l5 ]" C7 v( y
        var content = document.getElementById('demo');
! |- G  \5 N; [- d' h$ L* _) R" B, t        var x = xmlDoc.getElementsByTagName('TRACK');
) n' d1 C  M3 e" ~0 E        for (i = 0; i <x.length; i++) { 4 h0 m  |% ^8 ]2 m8 K( `8 J
  table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
+ U, w- m1 }0 }& {( q2 t6 W  table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;. }+ J- U7 K, L$ c
  table += "</td><td>";" ?- p, z( l8 m# k3 O  |( t5 N5 F
  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
- d7 b$ S- V7 W# h# a2 n) ?7 i  table += "</td></tr>";3 H- Z. H  A) }. M  H7 o0 Q( s$ D
}
) e( I/ O! g( p5 Z! R9 p5 s' K" X6 t% |5 N! D
document.getElementById("demo").innerHTML = table;
7 \6 _( L( B0 |1 `  c" v. R3 nvar i = 0;
7 s) Y; q$ V8 _0 I" u  p0 o2 n        function next() {& Q1 d5 A7 T0 Q2 F3 o
            // 显示下一首歌曲,除非已到达最后一首( e. o8 W; s. ~2 V
            if (i < x.length - 1) {
: w6 l) p- D7 ?0 v: |                i++;
, L7 y4 n* Q  r: o                displayMUSIC(i);% |7 b- X  W+ m5 X! @0 t) R
            }
! M4 I: c0 c( `4 ~/ i7 w( f4 T        }$ ?5 d0 H& P0 m: M9 i1 N0 v% p
4 O$ Z$ K& ^( e+ \
        function previous() {
# g+ e' i9 c8 r6 G            // 显示上一首歌曲,除非已到达第一首
+ b  }* J$ P7 j$ P7 g4 C0 P) c1 U            if (i > 0) {7 k  o0 l1 z& r& z9 J
                i--;
$ G. b6 Q9 ~/ N& I  [. f( j5 |& C                displayMUSIC(i);
, }! a" l5 I' x9 S+ r% c& E/ T0 N            }
; T5 C% P4 f/ |        }6 d+ A' j; t  R8 g
9 L" |1 p: g) q
        function displayMUSIC(i) {( {0 b! a% a" F- H1 z" Q, o
            document.getElementById("showMUSIC").innerHTML =. Q( G9 F  z- I2 \% j6 r! q
                "<ul>" +! v' p. u5 A. o
                "<li>曲目:" +
# m& p5 S. O& o7 E6 m( G1 `1 w) I                x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
9 P3 N( g) }) D, A1 {  `, Q3 E6 J                "<li>艺术家:" +* T- N- h- M# w3 b/ a! e
                x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
* V6 l! {* ^$ {0 Z. o                "<li>专辑:" +. q. {9 Q4 v6 G  O; L( S) y
                x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +( e* ]" |( Z2 A5 h& d/ N1 j: X% H4 f
                "<li>国家:" +6 j1 y. L0 E: Z9 U. V+ Z
                x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +: N8 n. e2 D  J9 {$ M& F& [
                "<li>公司:" +
6 b  S9 M0 q( \) |3 c                x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +- h5 ]# X4 ^9 ]
                "<li>年份:" +
+ |5 S& C& K. t4 l0 c+ g                x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
( H! w* T3 Y) k/ q. c3 ~/ Z                "</ul>";+ d5 O3 U! q- S' s
        }# f7 T, @+ C3 y3 D: c
" Y/ I0 f! |1 O7 Q
        function loadDoc() {' ^. o, {3 a! g1 g8 h

9 d% C2 h; m* Q) ^% s0 U3 \+ g- n* V            document.getElementById("demo").innerHTML = table;
+ T0 w# z9 X6 g. e0 M- _' p        }
7 Z( X- }" R: u& L7 v% |% M  C" m# N! w* s" \  M- O9 `
    </script>
# M/ d! p+ A2 l
4 x: k! F) h. g# C2 `! D1 r$ m
& ]8 s) C7 @# c</body>
$ a/ f" u5 N7 h* a5 u' g7 M% u. s& E0 }7 N, N8 A( c
</html>
' {/ Q$ D9 p7 r
& m$ c) E* m4 O4 f. f' l3 t) l4 l- M% b' h
[/mw_shl_code]+ \) h2 H$ j  K% O/ {% U; x  A
+ e0 Z" t! o8 N- o
* c9 K/ T! b9 o/ g/ I& F
  M+ J, f, d) L* A2 K
XML文件8 E' i* A& t; u  e% n

( [" o) T5 s) F! M, _2 ~9 W[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>- y" A5 ?4 I# |( c: ]9 E
<CATALOG>
% m7 B6 s, y5 W1 r8 j' x  D<TRACK>& r: r) _* o- |" y2 }9 M
<TITLE>再见</TITLE>) }# q5 O7 h- n, t
<ARTIST>邓紫棋</ARTIST>; w- @  h& }; ?5 M' J  q
<ALBUM>新的心跳</ALBUM>" x/ w" C4 T7 m9 c+ Q
<COUNTRY>中国</COUNTRY>0 C' c6 d' O$ Y& u" B1 n
<COMPANY>邓紫棋工作室</COMPANY>
) S2 N/ e' V9 `" e<YEAR>2016</YEAR>
: R; j5 A# h# I% j0 l: R</TRACK>
4 G. D0 O, w3 O: W# D
: E9 o5 ^9 A+ D* B<TRACK>
  y8 M: T' ]/ A5 h# X  \) I<TITLE>All I Ask</TITLE>8 @; T! a; r' u
<ARTIST>Adele</ARTIST>6 r: c/ p5 u6 H# t' E
<ALBUM>25</ALBUM>5 s" W. U# k9 _9 Y% i+ U1 K. {
<COUNTRY>英国</COUNTRY>* U3 C& q0 n) [. u* V! l
<COMPANY>XL Recordings</COMPANY>9 d  E4 T% z* q0 f% v2 q8 k6 O
<YEAR>2015</YEAR>/ X; V3 N0 s4 E0 Z7 R& B, E
</TRACK>
; C0 q, [8 V1 G9 r
! X/ O' G9 f4 k<TRACK>1 J2 i  l9 ^7 R5 T  D- D& T
<TITLE>之乎者也</TITLE>: a. i& p" Y. t( s7 `
<ARTIST>罗大佑</ARTIST>4 q; K8 Q& k. v
<ALBUM>青春舞曲</ALBUM>
' e7 s% L- q% b! j; E<COUNTRY>中国</COUNTRY>
% W4 _# V0 n5 |/ O7 t<COMPANY>滚石唱片</COMPANY>
& I% `, N- a2 f) p( u4 P5 H, t% W<YEAR>1982</YEAR>, D6 g* D; G4 m( e& d6 n
</TRACK>
9 F8 `; ?8 C% T2 y7 V% V
& t4 w* a9 n9 W0 i) O, X<TRACK>
* u- l+ H# \, s& _$ q<TITLE>Never Be Alone</TITLE>4 C% [+ r  g2 T( l  M; b
<ARTIST>Shawn Mendes</ARTIST>5 V* S% t9 \2 S8 o0 o( \
<ALBUM>Handwritten</ALBUM>/ K3 a& K+ N  k" \. H. W( N
<COUNTRY>加拿大</COUNTRY>- M9 |1 F7 e. f$ L9 W: G, @
<COMPANY>环球唱片</COMPANY>% P/ z  K( x3 K$ b  W1 K" r2 g
<YEAR>2015</YEAR>
) b9 q, s* f4 Q& K' }</TRACK>
$ }* @% V. O  v) u, K. y3 O4 {7 n; M+ N4 n
<TRACK>
4 w4 v0 q' f! S7 t# d) x, K<TITLE>慢慢</TITLE>
, l5 ^; V9 w- W5 b8 Z' i4 e# s<ARTIST>张学友</ARTIST>3 w: r9 ?% h: ?. P5 O
<ALBUM>忘记你我做不到</ALBUM>
4 k: g/ U0 E; t/ C- m3 n0 ]+ x- ~<COUNTRY>中国</COUNTRY>0 G0 R5 V- d) x4 W
<COMPANY>环球唱片</COMPANY>
  K9 B, v  B$ |/ g" r7 C2 w<YEAR>1996</YEAR>8 P& k9 Y7 J2 A5 b) r! j
</TRACK>& E1 _) C: y$ G8 c+ Z
) d" E0 h! v! A& F; B' {) @
<TRACK>
: w+ s. T5 d* [. n<TITLE>Complicated</TITLE>: T( d& J5 D! S' C  J9 T. w8 e
<ARTIST>Avril Lavigne</ARTIST>+ L! m" L9 ]6 j5 Q2 N* B
<ALBUM>Let Go</ALBUM>
7 W" {! ?# O& a3 e, X<COUNTRY>加拿大</COUNTRY>
0 f) F- R3 f7 v' h' J0 z+ {<COMPANY>索尼音乐</COMPANY>
9 j  R- E$ F# s2 F8 L<YEAR>2002</YEAR>
  C9 w  P' `3 y& }$ X</TRACK>: ]. o6 P: w& k( s4 F
# H1 V. S8 N8 A: w' G1 ?0 b1 w
<TRACK>
  z0 v$ q+ D0 \; Z6 Z0 L<TITLE>三生三世</TITLE>
( j7 z. E% `- @<ARTIST>张杰</ARTIST>
+ g$ A" F( Y) ?2 X<ALBUM>三生三世十里桃花</ALBUM>5 x& S8 ^& i. E. Q( v
<COUNTRY>中国</COUNTRY>
, Y- T1 X- C2 P2 X<COMPANY>仁溪音乐</COMPANY>& Q$ E+ u4 r! S' X1 P6 l
<YEAR>2018</YEAR>
0 K, m% w( Q5 r& Y</TRACK>! q" ?: v& B9 j$ m* C

9 b: Z( f# [6 h<TRACK>
7 i. {7 Y6 E% x; L, b+ H( U<TITLE>Five Hundred Miles</TITLE>
3 k' x" s. _4 }7 `/ J0 z" a<ARTIST>Justin Timberlake</ARTIST>
- w. y2 ^( I6 z& s3 e  o<ALBUM>Inside Llewyn Davis</ALBUM>6 Z( Y: O2 {) {6 L, [" i! [
<COUNTRY>美国</COUNTRY>
& O' U2 _8 P7 L3 |' X/ v: p7 J<COMPANY>华纳唱片</COMPANY>& n' S, B/ K  d3 d! j
<YEAR>2013</YEAR>
2 s4 U/ n( r  s4 A: o& |$ |</TRACK>
+ x* }# s; z# G+ }5 c! F2 `1 t! m* E- v/ T: T
<TRACK>0 {' E) `- m! z. T) b* r; A
<TITLE>演员</TITLE>
5 c  }. F9 \  |8 ~8 d( [4 _+ t8 Z<ARTIST>薛之谦</ARTIST>- s0 l% p) f( o$ y
<ALBUM>绅士</ALBUM>
8 ~* X" {! R& ?1 p<COUNTRY>中国</COUNTRY>
6 c4 i+ t& n9 ^. w8 u4 ?' L: y<COMPANY>海蝶音乐</COMPANY>1 @. g0 |% @# L- T$ p6 c5 D
<YEAR>2016</YEAR>1 A. V/ T/ i3 U1 P
</TRACK>
$ z) |8 ?. T0 ]' `4 X# n
; e" h8 j/ @! `0 n+ C4 [<TRACK>
8 t+ M9 ^% ^' K: N<TITLE>Numb</TITLE>
0 h  V  ^3 r2 P' o% A0 ~5 q<ARTIST>Linkin Park</ARTIST>
: \7 D, H  W: }8 V5 q- X1 {6 X+ U! s<ALBUM>Meteora</ALBUM>8 C' _0 K4 L- B
<COUNTRY>美国</COUNTRY>
3 A) v" S2 H9 w<COMPANY>华纳唱片</COMPANY>, F9 d; h. L/ c
<YEAR>2003</YEAR>% C  v. }" C: x4 ~! ?
</TRACK>
% P) A+ I! }, s- `7 k) e
8 d  f% y& Z+ M, o) y8 H) X  F<TRACK>
* Z) n) I( k8 M6 I! {: f& j/ o<TITLE>给未来的自己</TITLE>
! V& W' ?7 b, S# g( S5 I; g<ARTIST>梁静茹</ARTIST>& k( `- e8 v7 W. Y  m
<ALBUM>崇拜</ALBUM>
2 _/ E& h3 h6 j) ?7 n+ Q2 ~. y3 x<COUNTRY>马来西亚</COUNTRY>! `: [* l- ~0 R# j9 V: r
<COMPANY>相信音乐</COMPANY>" i( K' g$ E% N; i: T( S
<YEAR>2007</YEAR>. r4 o0 v) a. ]
</TRACK>
2 e- e/ W1 p& ~6 }& s0 j, i/ [9 j: x5 @- t$ @
<TRACK>2 O; @9 F9 o/ [% J4 R( @3 l
<TITLE>The Monster</TITLE>
6 _+ c! H5 v8 S0 z& g; N<ARTIST>Rihanna</ARTIST>) o2 A) I0 i- s5 S
<ALBUM>The Marshall Mathers LP2</ALBUM>) [. `% T  K" T& E9 s
<COUNTRY>巴巴多斯</COUNTRY>$ i$ w7 K5 m- C- V' K
<COMPANY>环球唱片</COMPANY>
9 ~9 o1 @# D1 ~<YEAR>2013</YEAR>5 q, V5 R, L# @5 v0 A0 D  u
</TRACK>/ U* V  u* S9 a0 p3 Q4 ~

$ F, _6 g% ]( O- T. j/ g5 b<TRACK>
* s5 `9 s8 x; z+ a0 ?, q7 k<TITLE>我终于失去了你</TITLE>
9 _$ t9 X+ K3 }' F$ O# o<ARTIST>赵传</ARTIST>, ^3 {" R) g/ T
<ALBUM>我终于失去了你</ALBUM>
' q3 }+ U" p- J6 W" u1 H5 b" V9 ]<COUNTRY>中国</COUNTRY>- J# z3 v& _* X7 b0 ~7 A
<COMPANY>滚石唱片</COMPANY>
6 b7 J+ _. d6 B" A! i- R9 d3 g<YEAR>1989</YEAR>
8 k$ }+ A. p/ J& B& i</TRACK>
- G; {. [3 b. i7 M! w" D* T3 a/ L' x6 b* E+ \$ B$ t* h9 O( B8 N
<TRACK>3 C! L- v  S6 s+ i- _
<TITLE>Main Titles</TITLE>
0 l8 W" @9 }) I8 w<ARTIST>Ramin Djawadi</ARTIST>
, l, P% e+ F1 }6 e<ALBUM>Game of Thrones</ALBUM>
7 Q, e" Z+ g1 N. Y<COUNTRY>德国</COUNTRY>; N0 g; r) U  d! ]' [/ r7 y
<COMPANY>索尼音乐</COMPANY>
& t4 B9 w" y+ @; I$ X<YEAR>2011</YEAR>4 `: r0 a+ m+ I
</TRACK>- Y1 M$ Y1 S2 z8 {6 V1 u
& w6 P  X# K' o' g
<TRACK>
" z# `+ Y  D& m# z9 S<TITLE>传奇</TITLE>
; f: D' y0 N- u. X, ^( P<ARTIST>李健</ARTIST>& k" N8 ^- P3 w' |
<ALBUM>似水流年</ALBUM>" N# G4 L8 M7 V
<COUNTRY>中国</COUNTRY>( @8 N) N4 C) Y, `) |8 u
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
' J# Q- N# D3 n0 r" e! v% a<YEAR>2003</YEAR>8 a1 n6 |# o4 r% r% T
</TRACK>
7 J0 X8 Y5 ~9 x; W, `  b4 ^$ ~/ y% y7 M5 `
<TRACK>2 m  Z. G1 n; O; r: J
<TITLE>完美生活</TITLE>
& E* }- w4 `$ J; S& I3 ]5 k% T4 a5 l<ARTIST>许巍</ARTIST>$ Z/ T5 Y) w  V9 i; \
<ALBUM>时光漫步</ALBUM>7 h! Z# W3 c  v; q9 C- F1 A. O
<COUNTRY>中国</COUNTRY>) z  N( J8 e5 V# U. u" p
<COMPANY>金牌大风</COMPANY># G, E) q% a0 L% |! o2 P0 O
<YEAR>2002</YEAR>
0 f9 V, _& R- }) I2 o, o</TRACK>; N' p, e4 d3 ~$ h
</CATALOG>[/mw_shl_code]4 `0 l# [0 ?7 x7 |; k: T$ {# e, c' ~7 p
上海点团信息科技有限公司,承接UG NX,CATIA,CREO,Solidworks 等CAx软件,Teamcenter,3D Experience等PLM软件,工业4.0数字化软件的实施\二次开发\培训相关业务,详情QQ 939801026 Tel 18301858168 网址 doTeam.tech
回复

使用道具 举报

发表回复

您需要登录后才可以回帖 登录 | 注册

返回列表 本版积分规则

  • 发布新帖

  • 在线客服

  • 微信

  • 客户端

  • 返回顶部

  • x
    温馨提示

    本网站(plmhome.com)为PLM之家工业软件学习官网站

    展示的视频材料全部免费,需要高清和特殊技术支持请联系 QQ: 939801026

    PLM之家NX CAM二次开发专题模块培训报名开始啦

    我知道了