PLM之家PLMHome-工业软件践行者

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

[复制链接]

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

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

积分
82166
QQ
发表于 2019-10-29 20:10:50 | 显示全部楼层 |阅读模式

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

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

x
/ v9 @7 v1 I  q; i) q! Y
! x; Y( A" v! C* W, e5 l% r3 b

$ s: J/ ]2 }, K! X% }  L; I[mw_shl_code=html,true]* R' S' z/ u6 _5 U4 S7 s8 x
3 t0 `% V2 u# P! g% \
<!DOCTYPE html>% v, S/ I  G; u  l# x: c
<html>7 Z. Q( V+ y/ }* z
<header>
$ _: L& |; l4 x    <style>
8 v3 G# M% P' O" N. t7 D% |        table,
6 E* j  P" V4 }4 ^, [! g        tr,2 M  U) j: F) o/ k) W, \4 [5 b8 X
        th,9 V( I! h9 F- _) t% F/ q
        td {$ }# ~/ V. _4 q/ q' w
            border: 2px solid rgb(20, 59, 230);
& n  m- K1 y4 o5 O0 ~  h            border-collapse: collapse;( M& a8 [+ D) a9 G7 t7 n
            text-align: center;
2 n8 z/ F6 e6 D: b' l/ z# a- f' Q        }
+ n" F4 w( ~$ m- \) [0 |) V5 j$ m' I; i
1 O( \1 c8 k$ A2 n, \3 G$ A6 b        th,
& ~% T4 M# |% a0 ~0 D2 b3 n        td {" o& x4 f4 N' r7 D8 E+ ^
            padding: 5px;
) _% i2 N8 C5 e6 T" M        }
6 n) A1 o6 ^- ?9 C: P    </style>
1 B6 U& q3 w2 G. ^( E; @2 H4 S: n</header>
+ n: D  i6 R8 G! n
$ {6 F' L: u, {4 p<body>
; }& e& G$ ?) J8 ^4 D    <h1>xml http request object</h1>
  N7 A) a' _# w! R    <button type="button">Display Music</button>
; X) ?4 q& \2 m" [2 Y. g6 h( P$ L    <button type="button">Previous</button>
  \- B5 W+ ~0 ]9 j0 A) z  y    <button type="button">Next</button>
' h" ]5 L' f8 l. T7 j    <button type="button">get my music list</button>. L% M8 ?5 ^3 _
    <table id="showMUSIC"></table>8 e1 K/ J$ Y" a& W
    <table id="demo"></table>
- O5 W- v- X& j  n' n    <script>
+ I+ D8 m! c* j8 k" z- J+ K! a* A$ G9 m0 R+ ?2 Y5 J
        var x, xmlhttp, xmlDoc;
' Y- D! i5 _0 W0 I% Q        6 a- t0 n& v4 k1 B
        xmlhttp = new XMLHttpRequest();; {( R4 y( Y$ ]; J! I
        xmlhttp.open("GET", "/files/music_list.xml", false);& b% c. v2 l4 ^
        xmlhttp.send();2 k* |4 p9 I7 g

. N& |4 {5 ~0 k' {2 ^% ~0 _4 o        xmlDoc = xmlhttp.responseXML;
# @  A% p; P3 e/ @$ |5 |9 n2 u; ^        var table = "<tr> <th>Owner</th> <th>User</th></tr>"8 m9 ?3 C) d3 Y1 m2 c
        var content = document.getElementById('demo');) \& C5 Z3 t3 H% D, J& l
        var x = xmlDoc.getElementsByTagName('TRACK');$ v9 W4 r6 g+ n' J5 C4 J1 u
        for (i = 0; i <x.length; i++) {
/ M. O2 L2 S4 {6 B2 k6 I( o  table += "<tr onclick='displayMUSIC(" + i + ")'><td>";5 w- V5 `) \; e/ }# W3 c
  table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;! b$ e3 a) U! \9 f! v. g/ o
  table += "</td><td>";6 h; G; _. v2 {' F, b9 A1 h" H
  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
: X8 \/ M5 i1 P: @" w  table += "</td></tr>";
9 Q0 f) c+ r: s5 H}
( I0 \; ^# h# T% O* @% K& I' n+ o- [! Y3 ?9 ]0 _5 Z" i
document.getElementById("demo").innerHTML = table;
' ?" S2 @4 B- c) i# w0 P5 Uvar i = 0;' O1 ?" S" Z' M5 @+ w( f+ `" i. o9 ^
        function next() {+ `0 [3 @/ ?8 C& x2 q/ n
            // 显示下一首歌曲,除非已到达最后一首8 d" G5 k+ d0 v# O  y: Y# ^
            if (i < x.length - 1) {
3 ^6 z+ g% F9 B# d6 N                i++;
. s9 c7 p6 D8 ^9 ~                displayMUSIC(i);6 a+ J6 ~! M; d2 @( q
            }# v1 }" p* H6 n; w9 H1 [
        }' W0 J" `. T; a/ x# g9 r* f

- k1 x/ ^1 f2 c& w        function previous() {- v! O- H  s8 r5 x
            // 显示上一首歌曲,除非已到达第一首9 r1 H4 p2 v& d- q6 }
            if (i > 0) {
' v( _) l" G6 J1 u: ?                i--;
) |  B9 B: {* G5 ?; z" P                displayMUSIC(i);( Z8 j4 m! W7 l0 k
            }
# r6 T" @7 v$ x  N1 {4 g3 E        }7 R) c+ y; F% Q: h

  f) \$ F) {. E$ Q# Y        function displayMUSIC(i) {
: P+ u6 h: U- g3 Y5 g; Z, P0 e            document.getElementById("showMUSIC").innerHTML =
  \! v3 R9 t8 a                "<ul>" +7 l$ w# B7 E: S4 w" l6 k
                "<li>曲目:" +6 B  g' ?9 K$ F& z' v6 ^
                x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +- ~. [6 K+ g3 i* x1 a9 x
                "<li>艺术家:" +# }) a2 `4 s& K6 s8 _0 q" P7 `# m
                x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
$ s  c# T& j  M9 j( v9 c                "<li>专辑:" +
- R" K5 u7 b4 S5 D2 B% s                x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
$ U7 V% `+ O9 a+ v5 q* c9 B                "<li>国家:" +
/ K! T4 T4 e* C' R6 y5 a1 m                x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
' }9 [3 e! ~0 e: P, f4 Z& h                "<li>公司:" +
" H; E( }3 |3 @( u                x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +3 F: N' V5 `: A( _3 p! ~/ }1 w
                "<li>年份:" +
5 n+ N: p) x9 o: G: d                x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
; o/ N* V: h$ d( l  W                "</ul>";- L! K  M1 }6 p' R$ n) s6 s
        }
2 M" u$ p6 l) J7 H$ g
# u. ?3 t) L" |  X0 @' P        function loadDoc() {
9 I! g+ a! i3 {: O4 m: q
& f/ o3 y4 W# C: r5 |            document.getElementById("demo").innerHTML = table;
2 ~4 w1 |0 Z1 E& j        }' u3 S3 a0 P" R+ u* Y1 I

) c' Y% D1 z3 J    </script>: i1 j* h( w1 W" a1 W' T4 ^
7 k; }/ J2 y- a" c% E: a
" @, {0 V: I# u
</body>
5 V) t7 v. i$ g" w! `" t2 h5 b% C8 E4 Y; u6 L' N0 {' z
</html>6 h0 D, X! [' D( H

& [' ?2 m2 R* c( I$ H& d+ e9 @5 v4 d! J
[/mw_shl_code]" `1 u; v4 x3 i( B

# Z$ W* K' j/ Z
( \! ~4 o; W: Z& w1 d: K/ k$ {9 ~6 Z, n# {' k& @! h
XML文件
: I' I  p, Z% \+ z) D' O5 D( I0 J+ e3 X# s  n2 A  n7 L" |
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
2 A  P) H9 T9 R, H3 ?<CATALOG>
5 |# X. N! V9 j+ ?4 u/ ]4 b* a# y<TRACK>
. q/ f3 ]% k( f$ O/ v' X; L<TITLE>再见</TITLE>6 X) J3 p  B" E0 k5 A7 Y
<ARTIST>邓紫棋</ARTIST>
8 D# `& b- _0 Z; c; B<ALBUM>新的心跳</ALBUM>
6 G7 o5 h( b6 E  _5 b/ g<COUNTRY>中国</COUNTRY>
, b& a# h# x2 H4 w<COMPANY>邓紫棋工作室</COMPANY>+ Q/ y( b( V+ f( ?" D
<YEAR>2016</YEAR>* U' s  i1 w  j* m9 }% ?( q
</TRACK>& `; K9 ]- n7 c
% a& r3 G) U9 S# Y
<TRACK>
0 [8 K8 U# S0 c6 I7 y- j- G<TITLE>All I Ask</TITLE>) T7 I; y, N& M& ~3 k
<ARTIST>Adele</ARTIST>6 P  q$ R4 o/ e
<ALBUM>25</ALBUM>
) d, k+ x; Q$ }. E6 `" F: I<COUNTRY>英国</COUNTRY>2 I3 s$ h3 n' U4 {% ~' i( Z9 K
<COMPANY>XL Recordings</COMPANY>
0 L9 o) E* B0 [0 ^( J7 a<YEAR>2015</YEAR>$ r) ~- ~7 b+ U6 b7 {9 U
</TRACK>
+ k& P+ X/ N7 ^( B6 p* B: ~. q* y  [! a
<TRACK>
: [9 p0 R; m8 R: b7 \" u% ]- U<TITLE>之乎者也</TITLE>
  n: r6 ?& k' k6 C. z<ARTIST>罗大佑</ARTIST>) J; w/ U9 `  P+ A2 T  x0 \* H
<ALBUM>青春舞曲</ALBUM>5 z$ S7 {- v& y( }
<COUNTRY>中国</COUNTRY>
6 Q5 E/ w3 _2 q<COMPANY>滚石唱片</COMPANY>* B( l$ A$ r6 ?
<YEAR>1982</YEAR>
" ^4 U; ^) {$ I, f9 u! w3 b/ p9 O6 t</TRACK>
0 @7 D9 o  b6 @: o& i  Q. o1 W4 g3 y6 M+ a  _- ?. q
<TRACK>
7 C( s1 n8 B, E- R' m0 Y<TITLE>Never Be Alone</TITLE>
6 r6 o# t! q3 _, P1 [<ARTIST>Shawn Mendes</ARTIST>3 |% E8 k( ]  |( L
<ALBUM>Handwritten</ALBUM>
& J. R. T4 m  d: Y# Y( }& z% _<COUNTRY>加拿大</COUNTRY>% N) }2 ]% K4 G9 X  r& R8 F
<COMPANY>环球唱片</COMPANY>: P5 o1 |5 s0 B* R
<YEAR>2015</YEAR>6 p  L: Z1 l* t# F! ?4 G9 l3 R5 O
</TRACK>
8 }! ?, J! v& U4 b9 w5 o" o, C0 w' l  Y1 [- ]3 q. H9 H: l. P
<TRACK>
0 b. I5 _9 \" O2 e8 ~<TITLE>慢慢</TITLE>3 i% u/ ^! q' _
<ARTIST>张学友</ARTIST>
1 I; m. Y  J, Z3 O( r<ALBUM>忘记你我做不到</ALBUM>- l& }2 [2 M$ ?* ~4 }# Q! u9 z- z
<COUNTRY>中国</COUNTRY>
5 C" E) s0 x! H- J) o<COMPANY>环球唱片</COMPANY>
" B2 x$ S' {* ^- A# z0 H5 Z. ?<YEAR>1996</YEAR>4 J% K0 G( b. P
</TRACK>! N/ @& I) F" p
% Q$ H6 x6 r* m2 ?, d, z( T( d
<TRACK>
& j1 N) p6 I7 E! K# M: r" W<TITLE>Complicated</TITLE>
% l; g- {1 b+ M5 X% ]1 C" W! ?2 M<ARTIST>Avril Lavigne</ARTIST>. q1 H( t; u' r& ~
<ALBUM>Let Go</ALBUM>/ _% K1 {+ s! H: d
<COUNTRY>加拿大</COUNTRY>& G$ h; P& _; `5 ]8 A. {8 ]) n' i- a
<COMPANY>索尼音乐</COMPANY>5 N! O$ \7 `: X  f
<YEAR>2002</YEAR>0 ~: J% M8 {' u: r
</TRACK>
, C8 r2 `# ?0 }, x# I' V* z
9 f5 M% l3 q/ I5 o" O- f$ O6 r8 J, Y<TRACK>+ X5 M, }/ P9 U( L4 ^8 g4 z
<TITLE>三生三世</TITLE>. ~1 ~$ X2 _' K8 X  _: W1 o7 \' G4 O" ^
<ARTIST>张杰</ARTIST>7 d* }) f2 n7 t: u. n3 p1 M8 b5 ~7 M1 R
<ALBUM>三生三世十里桃花</ALBUM>4 w3 x0 x+ M0 m4 S
<COUNTRY>中国</COUNTRY>8 _! N  P% ?# g: E7 N- A
<COMPANY>仁溪音乐</COMPANY>' G/ R5 Q4 c6 U* N6 E
<YEAR>2018</YEAR>" U$ S0 W7 ~+ J9 J1 l
</TRACK>
3 M3 ^( m3 w( Y( w! v: ^
7 i. b2 R" ]+ n<TRACK>
5 ~  n5 {- e" ?/ S3 V<TITLE>Five Hundred Miles</TITLE>
% k9 ~* H& ~5 O5 k' Y<ARTIST>Justin Timberlake</ARTIST>+ I5 V/ y# \# ~# y: Y6 @& E/ s2 c5 U
<ALBUM>Inside Llewyn Davis</ALBUM>  K7 |9 t# Q* D$ g; J& r
<COUNTRY>美国</COUNTRY>
( W, V7 p( G7 ]9 T* p<COMPANY>华纳唱片</COMPANY>2 }; r- @1 L' P3 _
<YEAR>2013</YEAR>3 y9 ^) a4 R' a
</TRACK>8 q. J( n% J! i2 q5 O& Z

" q8 e$ V) o3 o, O<TRACK>
# ^7 v' f" {$ G7 q$ x$ R5 M<TITLE>演员</TITLE>
& D& b6 v& N  a5 t: z* ^<ARTIST>薛之谦</ARTIST>- N/ {9 q! O+ R, D
<ALBUM>绅士</ALBUM>
9 d$ i2 I# M7 I& l<COUNTRY>中国</COUNTRY>  H' [0 k6 C, g& E- J  O1 T, [/ J
<COMPANY>海蝶音乐</COMPANY>
( l: r1 u7 o0 D<YEAR>2016</YEAR>
+ l1 E1 L* H5 l6 Z) E</TRACK>' J  |3 q  g0 M( b4 q1 b8 \
. _# ]+ L) L9 s& Z% B8 X) p( [% b
<TRACK>3 @+ C) h' Y" w$ h9 Q
<TITLE>Numb</TITLE>% A; g& h9 A0 \+ R7 O' N
<ARTIST>Linkin Park</ARTIST>
3 G3 @+ ^! {% @- C; s9 y# B! E<ALBUM>Meteora</ALBUM>" ~! R* q( ^2 \: E# i5 d  X
<COUNTRY>美国</COUNTRY>
( [; R4 M, L& z- \! E: S3 Q<COMPANY>华纳唱片</COMPANY>5 _7 y% K. m- f
<YEAR>2003</YEAR>
' a5 r$ V. V5 k  a4 t</TRACK>9 X# R  g/ i7 M

) g) S1 j) J6 {1 G5 }1 S. u6 s<TRACK>
0 s: x* S. {  v$ `1 v<TITLE>给未来的自己</TITLE>
$ {. S% h! ?, A" d<ARTIST>梁静茹</ARTIST>8 @! o, a' a! T. A5 Y& C0 E
<ALBUM>崇拜</ALBUM>" E6 u( f0 b/ Y0 N4 Z% D
<COUNTRY>马来西亚</COUNTRY>  q9 [. w# B% I% b& B& T  T
<COMPANY>相信音乐</COMPANY>: j* ]7 J0 T9 k/ H! X: m
<YEAR>2007</YEAR>
8 _& p2 [% a5 R/ x* p( @* v1 T2 F</TRACK>
' r4 u' O; \. ]7 `) o5 d
7 u( o3 C3 P$ E$ X<TRACK>
( q8 X; h( ?0 e. n- T$ {/ {<TITLE>The Monster</TITLE>) [: l8 n" n) @, _
<ARTIST>Rihanna</ARTIST>7 M( Z' {" |( E, Y
<ALBUM>The Marshall Mathers LP2</ALBUM>4 R; r) Q$ o4 o6 _. p
<COUNTRY>巴巴多斯</COUNTRY>
% y0 V) u7 ^, s/ o<COMPANY>环球唱片</COMPANY>
7 F& o0 Z- R& C' N. c<YEAR>2013</YEAR>/ x# t* t! @& V2 H
</TRACK>
1 E9 Q' r2 l+ N
8 A4 S# q5 X3 L( l  C6 M$ y<TRACK>9 T0 e" u& M" A& T) A
<TITLE>我终于失去了你</TITLE>
; }& u3 X! Z, k  z* R4 n<ARTIST>赵传</ARTIST>% _: u5 Z, W/ {/ o) q) C, r
<ALBUM>我终于失去了你</ALBUM>
2 q' H3 B1 r+ ?% q# T<COUNTRY>中国</COUNTRY>: d9 e( B6 }3 A9 S/ o4 V: Z
<COMPANY>滚石唱片</COMPANY>
$ j  k4 I( o; `$ x- y<YEAR>1989</YEAR>3 o1 V6 H" r# V; B( Y, V* m' j; w# l
</TRACK>- v% ^1 n/ V+ s

. ^) E# ?# ?# {; l3 B9 i<TRACK>
$ T$ U" [- m/ ~+ k& R% T$ D  `4 q<TITLE>Main Titles</TITLE>
0 D5 @8 i$ m2 }  z2 j<ARTIST>Ramin Djawadi</ARTIST>
' w4 I! Z5 S% P. O% `. P9 {2 H<ALBUM>Game of Thrones</ALBUM>* R6 d3 k. B6 x& d- `
<COUNTRY>德国</COUNTRY>
/ Q8 w: n5 x; ~0 C" `<COMPANY>索尼音乐</COMPANY>7 C1 k5 z. c# ^: f
<YEAR>2011</YEAR>% X3 s' V  S- ]% Q3 @
</TRACK>/ r' w- ?' S$ J' F" I3 X
6 h& `1 n0 g' [2 }+ J
<TRACK>
3 n+ \; @4 ~1 q! u0 t  C<TITLE>传奇</TITLE>$ ~5 S# _3 h9 k
<ARTIST>李健</ARTIST>
: ~4 {8 P2 }7 W- z, F9 x! {<ALBUM>似水流年</ALBUM>, y; t8 |$ e% s$ m% a) I! Y
<COUNTRY>中国</COUNTRY>( y! Z+ z8 A% S5 g. A# `
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
# g9 B6 H: E( I0 }! A) G' j% ]<YEAR>2003</YEAR>
  T4 z: _! o7 G6 D/ |</TRACK>6 L0 A" V% `9 \$ `, T9 _( }" N0 f

1 x" S5 Y0 b* l<TRACK>: T" L1 a0 U4 _0 X5 l+ V; j. y
<TITLE>完美生活</TITLE>
9 y3 b2 ?- G/ O0 m9 B6 l0 [<ARTIST>许巍</ARTIST>% n' R& F+ g1 y
<ALBUM>时光漫步</ALBUM>5 t) d! C0 Z. p* ]* L- K5 M
<COUNTRY>中国</COUNTRY>3 p- X4 [; i! l  l+ _
<COMPANY>金牌大风</COMPANY>
3 D$ W, |4 P( P. \<YEAR>2002</YEAR>
* [# y2 y" E/ ?/ ~! H: a4 s+ X3 O& {</TRACK>
1 R% t2 g. }- m! \1 U: }</CATALOG>[/mw_shl_code]/ i: `+ F/ h% E5 c2 E
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了