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

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

[复制链接]

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

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

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

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

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

x

2 x7 w+ {1 }4 b7 N8 H5 X
& f0 V! `: _- m9 S$ z; g
* p$ m% a% x$ s" g[mw_shl_code=html,true]
: x+ h: U: n5 W8 W
2 u* W$ a7 q0 |5 e8 W<!DOCTYPE html>
' [( E1 N3 N8 x3 x<html>5 g2 w' U/ C# l2 `! ?2 K9 Z
<header>
& ]6 i  Q  k/ d1 I2 ]8 D    <style>: N, Q! F0 j$ Z6 I
        table," R( F$ i3 m! \4 }" b- ~
        tr,3 Q/ E9 X8 L7 N% P5 s% L, m
        th,3 \; q! s  i5 K& j
        td {
) S0 E4 s  e  K: w+ S            border: 2px solid rgb(20, 59, 230);
+ u2 t- g$ k% [& {% o* S4 i# t            border-collapse: collapse;! L/ ?. O4 b. I. J
            text-align: center;
9 q, Q7 U% A1 N4 v# j        }
6 |2 N- [9 _' }  K% D3 `
/ |; h+ g* D0 y, x/ `. h) |        th,
6 S. P7 ~7 g1 s. x  b, O( ^4 A        td {
$ a9 F: z4 ]6 g4 D) `: i7 ^5 |+ a            padding: 5px;
* B5 P. x/ p: K3 ~* E: \5 h        }- \3 O( J  J5 K# {6 M
    </style>3 q7 l4 x/ u% }0 ^7 L7 _+ ^
</header>
% f7 B3 p# Z1 y5 [5 b6 @5 g7 p
5 |+ G2 V  Q, j) u+ O: b1 U6 p<body>- I7 N4 O7 K( i. t
    <h1>xml http request object</h1>% R# D/ V. v( X+ s1 Z* o4 Q
    <button type="button">Display Music</button>. K! f7 T( I( D8 h* O1 N+ l
    <button type="button">Previous</button>
/ A8 M/ j) q2 e% r4 z- T7 ~6 t    <button type="button">Next</button>- R' Q! g9 F3 X* ^& v$ @2 M
    <button type="button">get my music list</button>. O" a3 z7 ^1 l9 T/ \
    <table id="showMUSIC"></table>, ?; e- R- I# [
    <table id="demo"></table>
) {; R+ ?" W4 _    <script>/ g- O/ K, N, b0 n4 O- U  ]

, T- |: A  j+ T) ]/ i        var x, xmlhttp, xmlDoc;
% G: v0 K' L" f. ]1 b6 p        
0 P( N8 ?; u5 S7 S9 H6 b        xmlhttp = new XMLHttpRequest();
- a0 i+ d( i+ s& ?  I7 |' W4 q        xmlhttp.open("GET", "/files/music_list.xml", false);0 Y: ]8 h! [3 ^
        xmlhttp.send();
! k# ?' t) \8 ~) w6 K3 s& P# w+ I- l; j  k4 C" O& i+ ^
        xmlDoc = xmlhttp.responseXML; 0 `" ^0 K. V) X) j6 X* B* K
        var table = "<tr> <th>Owner</th> <th>User</th></tr>"
, r- _4 L! t: A        var content = document.getElementById('demo');
$ Y) G8 Q( _. V2 ~' [        var x = xmlDoc.getElementsByTagName('TRACK');
; z! K2 x$ G5 ?* u! V6 z        for (i = 0; i <x.length; i++) { # R* L5 [2 H) H
  table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
0 w3 M; g0 K+ X' y9 j! u5 j  table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
8 q9 Q  w) U& A; N  f  table += "</td><td>";
8 e/ ~# i9 R3 A( {. s/ i  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
' a) s+ Y* x5 [  table += "</td></tr>";
/ a) k( A" j/ }, E}; a! g0 h6 `- ]

1 u& g; ^! a: _3 f4 B* wdocument.getElementById("demo").innerHTML = table;, y8 G: {, d. k! R9 W; E' c0 H
var i = 0;
  D/ @3 Y/ m( N# V        function next() {
& g$ `' V) O: V1 E            // 显示下一首歌曲,除非已到达最后一首+ r! c  _' t2 `
            if (i < x.length - 1) {/ T( ~" ]% W' O$ s
                i++;5 [& O5 ]! a( F, v" h
                displayMUSIC(i);
, d. s7 W! l3 }7 T            }
' n9 T1 H& q) r- i( C1 S$ b        }- F& A5 ?: Q" s8 P* d. r( {
3 d) v0 l3 u& a7 N- C: [5 G
        function previous() {
8 |( q/ a4 g' e( O) j            // 显示上一首歌曲,除非已到达第一首
' Y1 p7 i4 J8 h            if (i > 0) {
4 X8 I* P: }/ r- S                i--;
6 U3 C* j% H$ J' O4 ?8 J" @                displayMUSIC(i);7 H5 @+ V9 O- i: y* }. E' J* Z# w* h
            }
& ~5 X/ _+ a; ^5 k& ]        }
* M0 G& g+ v  u: C  x. H
3 P# ]- T) C( y' v/ T        function displayMUSIC(i) {, H* k, F5 n9 r7 [
            document.getElementById("showMUSIC").innerHTML =
# X- Y0 s% x! S8 ?( |0 E                "<ul>" +! q$ ?, S6 B5 B' B% D
                "<li>曲目:" +
3 V( \+ r4 s* b9 |4 I                x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +7 ]2 `& w) [' g
                "<li>艺术家:" +6 [2 P: G$ _3 ]: ]
                x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +
2 T5 i) L  t) }* k                "<li>专辑:" +
7 w, u2 r3 M( ~- @9 [0 c4 M0 z                x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +
  f& C" j8 ]( d/ B5 N6 |. ]/ ~                "<li>国家:" +7 V: }) x# M$ y' W3 a* W
                x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +0 Y; C- A+ c0 Q( s
                "<li>公司:" +
! d; s& Y+ j! z: R% i                x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
% N* f2 @2 Q3 H1 Y# q, i                "<li>年份:" +
0 j  g" E& z0 @/ G5 R$ K, z  G& [  p                x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +' E) P. e- J2 `) n. z* Y) Z
                "</ul>";8 l5 ^# l0 ~& W
        }
7 P  z# @( ~9 ]. l2 u. Z4 R) s. \  H2 c  ]  i6 G  _
        function loadDoc() {5 B9 D0 R  e9 M5 a8 ^

6 A. f9 C% d5 f% P9 g6 [            document.getElementById("demo").innerHTML = table;
4 L% |' u) ^! c# i5 {3 S: B        }1 Z6 o' {8 h+ X6 Z
/ I9 A8 M+ O8 j' \! C, O( ]0 s
    </script>
/ ^! R2 K/ F1 [/ J% D3 }/ O9 ^) K. _* |

$ e3 Q$ |& [& s- B</body>
: l8 Y0 V# s# f, I2 L6 j' u
; a/ T7 }: Y6 L; x' g</html>
) x+ r  D& V) c( @* Q5 O/ T- [4 K+ _0 G# H* g
9 _% o1 j% l* K, Y7 X
[/mw_shl_code]2 O6 `. o# g7 y

) Z7 B! t' ?* `; l) W9 t/ P# `( Z3 ^
- t: d1 l6 J- C' Y) B' C3 N0 O4 v1 J& b0 W& o* F4 Q8 K
XML文件$ t2 F* B- W  l4 a4 j5 a1 c, ^
2 X1 `; H, t5 b- \/ n: ~8 Y
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>, z. u: m' H( H" A3 J8 N
<CATALOG>
9 q4 R" C" a, W, b<TRACK>8 p, ?; t  V$ g
<TITLE>再见</TITLE>
- C  v, u. P2 X, L' `/ G; O4 O<ARTIST>邓紫棋</ARTIST>' |7 m' K& f5 P1 C" S% \# u9 y7 o
<ALBUM>新的心跳</ALBUM>% O7 o( D! W* c* c$ E7 x) o0 s
<COUNTRY>中国</COUNTRY>6 z" P7 b$ q; D. k4 `* J
<COMPANY>邓紫棋工作室</COMPANY>
8 [$ N7 v- K4 F+ u  _) n' ^<YEAR>2016</YEAR>6 N7 e  W& \: n5 ~
</TRACK># A2 |% G) z$ o$ |8 O
. t8 k( p5 M, v7 r0 K- D
<TRACK>
2 Q5 x/ {* O$ I% }& y6 Q! G7 G<TITLE>All I Ask</TITLE>
4 T+ c+ {4 q& w4 e0 L) l+ C1 z<ARTIST>Adele</ARTIST>3 P2 _8 ~5 `1 i
<ALBUM>25</ALBUM>
3 t+ ]& ~. F+ o1 B$ g" @8 V. _' |5 j<COUNTRY>英国</COUNTRY>
% ^9 [5 r  _* Q: F* y/ H<COMPANY>XL Recordings</COMPANY>/ W3 b: k  l( L/ N
<YEAR>2015</YEAR>" |7 s5 o( ]6 V1 @
</TRACK>% J& t6 d. o9 ^# ^& l+ {

& @" w3 y, c: F- k0 H8 T& i, {<TRACK>/ v3 R& C, j& P& T0 N$ z
<TITLE>之乎者也</TITLE>
1 f1 r, O, W7 l/ D# W$ ]% ]<ARTIST>罗大佑</ARTIST># R& [0 b5 m& @" C$ j% r
<ALBUM>青春舞曲</ALBUM>9 _2 z  D: f/ Z' V" n4 a
<COUNTRY>中国</COUNTRY>
$ p. _9 o  i4 V+ U' O) w<COMPANY>滚石唱片</COMPANY>
! [  J+ i: i7 L3 [+ F) r<YEAR>1982</YEAR>& f5 Q1 b4 {% H( s5 u4 z; G5 |& u
</TRACK>
9 i8 [' e  Z4 ?+ t+ E( E1 H: o$ v! w3 A8 O% G3 }
<TRACK>
" |3 E/ E! k) O; T; T; R<TITLE>Never Be Alone</TITLE>) J6 j4 t2 i1 N4 C
<ARTIST>Shawn Mendes</ARTIST>
3 e& o) g2 e4 M1 J" `- ~* X# L8 l# F<ALBUM>Handwritten</ALBUM>
. {6 L8 I- N/ V2 H" {3 A8 c: I4 @<COUNTRY>加拿大</COUNTRY>
& y' N6 w4 f( x7 c% _# t<COMPANY>环球唱片</COMPANY>
3 ]. @' N- `7 h3 Q9 @<YEAR>2015</YEAR>: r0 z% C0 _8 p" \8 i% B4 i0 M5 r- N
</TRACK>
& J6 ~4 H" z+ s2 ^' |: a5 o% q6 E- q/ l
<TRACK>
: [- P7 v& M" y  F' I4 z4 l' g) B<TITLE>慢慢</TITLE>& @( {. j" t' K- t* l
<ARTIST>张学友</ARTIST>2 {+ @  y2 ^2 Y+ ^, x2 T
<ALBUM>忘记你我做不到</ALBUM>/ a5 Q+ A' ^, N6 t# k6 L
<COUNTRY>中国</COUNTRY>
+ B3 ^+ o3 Y! i% H" m<COMPANY>环球唱片</COMPANY>
/ ~+ H# F# ]5 {# m<YEAR>1996</YEAR>) q. {; F8 |5 x
</TRACK>
) T* F3 ^" h/ G0 h5 X" X, `5 W& y& a' k7 j5 i8 i# V' o
<TRACK>
0 i1 p, D1 w; d: N4 y" D8 Z9 H$ W<TITLE>Complicated</TITLE>! E- ~5 P$ {  P
<ARTIST>Avril Lavigne</ARTIST>; Z5 F5 X5 K4 Y$ }& _1 j, v
<ALBUM>Let Go</ALBUM>
/ i9 \4 \+ D2 ~  f0 `. A<COUNTRY>加拿大</COUNTRY>
7 }# p( G1 K% z4 t5 X/ z<COMPANY>索尼音乐</COMPANY>* u3 ^9 w6 s- T+ Y5 I4 d. m( O
<YEAR>2002</YEAR>. ^+ T. N  F/ y* t$ t2 }
</TRACK>
8 k" K6 [6 {. B. e
+ h3 v5 C  E0 j/ \  ]- |( @* L<TRACK>
( u% g  [0 W4 v1 L<TITLE>三生三世</TITLE>
, c. I% a+ {" `" X8 ~" b6 D<ARTIST>张杰</ARTIST>
( f0 Z5 L& }8 k* s3 M<ALBUM>三生三世十里桃花</ALBUM>
/ Q8 [7 B1 U5 L0 ?# J# x<COUNTRY>中国</COUNTRY>: ^+ C! ?0 m" u
<COMPANY>仁溪音乐</COMPANY>
% p" }' l+ l9 p% V3 }<YEAR>2018</YEAR>6 ?& y2 d5 l  j1 v$ P4 A: a1 P
</TRACK>' j1 f" X5 n3 R* e/ y* l
. K' R) T4 @, N7 P( n
<TRACK>
0 y' U# P# P# ~* T8 U<TITLE>Five Hundred Miles</TITLE>9 e& o  P7 H& W# C) a! H
<ARTIST>Justin Timberlake</ARTIST>( _4 Z8 s  s4 N* z6 B0 ?
<ALBUM>Inside Llewyn Davis</ALBUM>% {3 n; }: T5 W( i- B1 {! c
<COUNTRY>美国</COUNTRY>
( i2 ^0 t! a# _9 h! O2 W5 Z<COMPANY>华纳唱片</COMPANY>
( G; f9 _. @( J/ g1 `<YEAR>2013</YEAR>9 b) ]/ g$ Q5 G' O6 c
</TRACK>$ B& F! H. i/ u2 p; w
- y/ ?; k& f9 W+ H% P- E
<TRACK>
/ J& B; h+ I  z) r3 n' n/ I<TITLE>演员</TITLE>
2 d& D" Z0 n3 z  }9 I4 z: q<ARTIST>薛之谦</ARTIST>3 A6 C1 s( F( ~  N
<ALBUM>绅士</ALBUM>
% W2 |2 b* _- q: J* s$ I<COUNTRY>中国</COUNTRY>3 Q9 \5 V; N  m; C' \$ w2 ~0 m
<COMPANY>海蝶音乐</COMPANY>7 R6 ^/ q% ^+ K, D9 t
<YEAR>2016</YEAR>* c: s3 e6 j6 o8 s
</TRACK>1 e7 t0 Y$ v5 {7 C5 i

6 r, o$ M. S/ M! i6 m0 P; _  D; X/ {! U<TRACK>
8 A2 P) `6 S" d<TITLE>Numb</TITLE>
! J, @$ g$ L3 N: F, n% L<ARTIST>Linkin Park</ARTIST>3 b& {! b1 ^9 o; E7 J* B9 m! e
<ALBUM>Meteora</ALBUM>$ F- W7 B. Z0 w. e
<COUNTRY>美国</COUNTRY>
! j% g" D+ q! B5 Q<COMPANY>华纳唱片</COMPANY>
3 |7 Z) `# i/ T( A+ C3 z& ?7 j<YEAR>2003</YEAR>
0 E6 v: X6 B# q! Y</TRACK>: M' j- X, B+ O' }' n3 T, J
0 t/ s: q2 Y1 ?  p1 \' T
<TRACK>; N4 k3 w* h+ X, p, `4 I
<TITLE>给未来的自己</TITLE>4 L; G4 j4 o3 m3 d8 y" z) Y
<ARTIST>梁静茹</ARTIST>
1 N- e: {- P) k1 K+ U3 Y. Z<ALBUM>崇拜</ALBUM>$ e5 i. l, @- k- t8 L  Y( }
<COUNTRY>马来西亚</COUNTRY>
3 j( e" C' m" ?6 q/ S<COMPANY>相信音乐</COMPANY>) ^/ O; i& z9 s" Q2 @% H+ t' P/ j4 L# L
<YEAR>2007</YEAR>
. I& Y, A3 i" @" _; S</TRACK>5 R# g1 n+ h6 p; G
, T$ H- ]. K* k0 E
<TRACK>
9 `8 V" Y5 k) q/ ]( ?: {8 `6 }) w<TITLE>The Monster</TITLE>& T, r' h, M. M7 J% Q
<ARTIST>Rihanna</ARTIST>
- ]+ K, v  V: A<ALBUM>The Marshall Mathers LP2</ALBUM>$ {! S) b; c8 b4 l, j0 _
<COUNTRY>巴巴多斯</COUNTRY>
! \1 M. N$ i5 l) t<COMPANY>环球唱片</COMPANY>3 }/ p. [$ \% n5 B' w- ^+ |
<YEAR>2013</YEAR>
- M$ q  S2 T+ C) p- Q. I, R</TRACK>
9 i3 p+ t* d( f3 C" _+ e% _' w2 W, [8 @
<TRACK>1 A* G- y- ?4 b3 ^* |! O# P( X7 i
<TITLE>我终于失去了你</TITLE>+ r0 F0 ]1 s% z# Z* s  k
<ARTIST>赵传</ARTIST>4 f8 s* p8 q- J6 x) g% n7 w- l
<ALBUM>我终于失去了你</ALBUM>- G; s  Q$ `& q) H1 _$ [0 M" P
<COUNTRY>中国</COUNTRY>) C! L. _9 I: s) Q7 P& c4 [% V
<COMPANY>滚石唱片</COMPANY>
' c9 y$ S  n8 p* J<YEAR>1989</YEAR>
, ~" E* O! v4 }. a4 W4 S</TRACK>
# b& ^4 u0 M! E; o3 r8 b6 T1 p3 Y4 f3 w* l# Q4 Z
<TRACK>
, ]; t9 F7 M" v/ @3 @<TITLE>Main Titles</TITLE>
/ X3 \. u/ ?& E( ?<ARTIST>Ramin Djawadi</ARTIST>9 g/ g6 D6 |3 ~2 t1 y2 u% D
<ALBUM>Game of Thrones</ALBUM>
5 [& J/ f6 v6 K8 m5 L<COUNTRY>德国</COUNTRY>) j) i+ Q( l% ^  r8 V  j
<COMPANY>索尼音乐</COMPANY>( _5 e& L" p5 s$ t1 z; z9 _6 j
<YEAR>2011</YEAR>
3 B( y2 i  h3 P# f- a6 r</TRACK>9 n) J" w8 `: o7 g3 d: T

0 v4 q: G! N) k3 z3 U- {. l<TRACK>
* Z; x% p9 F" Q8 W0 @% N<TITLE>传奇</TITLE>
* Q2 j" d1 H6 K, b. S<ARTIST>李健</ARTIST>7 ^9 m3 O, L1 v) D! S
<ALBUM>似水流年</ALBUM>
! p# E0 R2 V0 C<COUNTRY>中国</COUNTRY>  P. u: X' z9 n9 O
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>
7 l% h  S3 p1 @<YEAR>2003</YEAR>
5 ]- H1 Y9 L- O! ]</TRACK>9 t/ y* w/ F! t1 {% `! `  u' D1 G9 I

. K7 G, F; t, F<TRACK>
' \- Y& H& E- l  k& D<TITLE>完美生活</TITLE>
  D. d, t* R( K$ v<ARTIST>许巍</ARTIST>9 P. Y% @, \; Z1 b- R' s+ r
<ALBUM>时光漫步</ALBUM>
" G$ W& X. }' V5 R2 k% V; Q<COUNTRY>中国</COUNTRY>
7 b# [# M+ b5 D<COMPANY>金牌大风</COMPANY>
2 D. h3 n/ F. o5 x4 E- R5 h* m<YEAR>2002</YEAR>7 t( N' h1 `" R
</TRACK>" k* V' h  I, t/ Z9 R; }4 A% m, K
</CATALOG>[/mw_shl_code]
$ H' W9 y; ~  z
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了