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

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

[复制链接]

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

2470

主题

1275

回帖

8万

积分

管理员

PLM之家站长

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

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

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

x
4 k$ `( b3 ?- x) O: t
+ {9 _! O- J% F+ d, i4 P4 Z
3 ], g% a) l# G
[mw_shl_code=html,true]
) [# }" o( {6 g, v7 v4 o7 A
# e' `0 o% ^& z( T) `# N<!DOCTYPE html>* B/ v3 q5 s+ O! ~7 z* X" b/ h
<html>, l+ T3 J$ O& O% g8 u
<header>
: M, y0 v" U5 l    <style>$ T0 Z9 M6 U4 o% s
        table,
, I" W/ k2 ?& Z) Q* O        tr,
. ?, L( |# L  W4 Z7 E* w' a0 R, R        th,  W! V7 g& y: V- k- Z  P
        td {3 I+ s3 o- d, f* J
            border: 2px solid rgb(20, 59, 230);6 H) u5 N5 N. c3 m
            border-collapse: collapse;
# z2 P. n8 ]& w  M4 v. T3 o; {            text-align: center;
/ V6 C- A6 v2 g4 \; @% P        }) u) @* k# C3 ]& t
3 z/ d$ Y7 ]" x
        th,
, O& ^! k7 ^) c3 @        td {1 k) J" K- N6 A5 J8 w! A, U! X
            padding: 5px;
- M3 d5 m6 N) n% I3 _        }7 b, f# d8 }) Q5 W5 I, O$ i* o
    </style>
# z' @( R, t& \0 {. k</header>
) ]0 E) A/ H9 r* H& g6 T
9 y  V7 ~5 P8 m  m9 P7 P<body>
" A5 x# g) X/ }+ h    <h1>xml http request object</h1>- F9 \" `. U0 `$ I# i# G9 o# F
    <button type="button">Display Music</button>. q" A' C( E, |
    <button type="button">Previous</button>2 L) H5 r4 ^2 K2 ^0 e( u/ x
    <button type="button">Next</button>
. E9 ?0 i4 A/ p    <button type="button">get my music list</button>) }- G# F/ o) r
    <table id="showMUSIC"></table>- z8 M# `, J7 \# F- M& a) T/ u
    <table id="demo"></table>8 c# r1 v/ O- r8 l
    <script>
/ G/ P# y# _. Y6 k- j2 }# X7 e8 j; c- O) N5 p6 c1 \+ `5 V
        var x, xmlhttp, xmlDoc;% W/ N; o+ D# F4 I! {
        
$ g0 e# F& w$ l, w' k        xmlhttp = new XMLHttpRequest();
0 f5 _9 b' x3 S, Y3 a& W. {. F        xmlhttp.open("GET", "/files/music_list.xml", false);
* W6 x; N5 u) R7 `9 Q  l* w        xmlhttp.send();! M, H0 Q, ]6 d" T; j7 p, \6 b% H

+ W+ L6 ^% e$ e- Y) d! \! l        xmlDoc = xmlhttp.responseXML; 4 B; a2 F0 Y5 Z! d$ R' ~; K
        var table = "<tr> <th>Owner</th> <th>User</th></tr>"
$ e3 g: s2 q% L) y9 I% W; Y# R        var content = document.getElementById('demo');. s: B* C0 B6 }) `
        var x = xmlDoc.getElementsByTagName('TRACK');9 k0 i% o/ B/ @4 ]9 D1 j; A; e( M
        for (i = 0; i <x.length; i++) {
% h' e% g0 H6 s$ V5 p  table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
# T! F% }+ D# Q  table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
: x  N7 M2 y  ]) ~( Z  table += "</td><td>";( l  ]+ u2 ?. w& A6 o! l6 [
  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;) c7 @' z# R3 n
  table += "</td></tr>";, x2 H* F9 S& W" P' }8 ~
}; _% e+ x$ G; \2 K3 {

; @- j, c# E* f0 B% x0 |, w) rdocument.getElementById("demo").innerHTML = table;
% }; \+ B* M) q* m& O( Q6 H% {var i = 0;
6 g5 h/ S; t/ p6 _" r) V2 ?        function next() {
( _! w# C( x; g! c& y5 G3 N            // 显示下一首歌曲,除非已到达最后一首& A. a$ [9 s2 J7 Q
            if (i < x.length - 1) {7 R9 }. j% a: E# g5 U/ M
                i++;: W( Q3 N1 V2 W  ?8 _
                displayMUSIC(i);: ?. u% h$ \* p; ?% o
            }8 g. y2 I% l2 [% f! @
        }
$ s/ R7 v6 t) P2 K' c
$ ]6 L( D" P) T: f        function previous() {$ V9 H  }4 q2 K1 w
            // 显示上一首歌曲,除非已到达第一首
( X8 s$ J% W: r$ w9 z, e            if (i > 0) {, E: ~4 Z( l, m$ l  [
                i--;) Z* K! q" J! D9 C8 @
                displayMUSIC(i);
  ]; l# x. N7 J* T3 q3 D/ A            }: N0 M, C6 u) M
        }7 t1 F+ d7 r! ~- F& O

+ U- W( k3 Q3 Q" F  Z. V/ N        function displayMUSIC(i) {. x+ Q) n: w) `' g
            document.getElementById("showMUSIC").innerHTML =; z, H2 ~% B. t2 N5 I- x: p
                "<ul>" +* ?- l: P5 o6 r
                "<li>曲目:" +  R3 T/ Y7 t# s4 m5 r
                x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +
" c6 b6 ]/ @% j3 W7 d" Q; V5 T! [                "<li>艺术家:" +* o) Z( q) P. D& t0 O0 Q3 I
                x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +0 z( @- e$ I" i2 Y: Z: y" K& s% s
                "<li>专辑:" +9 k3 j) Y7 R, l$ x7 r! ?% l( Q
                x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +) B8 z6 m$ T( K& o6 H
                "<li>国家:" +
& w  ]8 v9 n% ?4 E8 }& P' p: L: h# P                x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +' r7 U5 c6 y5 z
                "<li>公司:" +
2 D2 ?) T' ?/ S' P# q/ |                x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
, w# M) v( F# m6 b1 o                "<li>年份:" +
* P8 ^8 o6 y! s. c0 M) ]' d                x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +" j0 A0 ?8 w6 a6 R8 d( z" Z, F
                "</ul>";
% Y. R4 H7 B* H; f7 {7 T        }- [) e9 J6 |7 }6 l: a, }! I7 k# q

4 k9 y- s1 @$ l, n4 w3 `( I        function loadDoc() {
3 x* M4 i1 _; f8 F6 b, A& W2 F4 P. I
            document.getElementById("demo").innerHTML = table;( ^7 H5 I1 N. _# x! C
        }
- B& t! J2 Y' Y" C8 K6 K) O1 v* j- F6 i2 Z
    </script>
) G6 H5 r8 h* V  m0 W5 R  @
0 j# d0 M2 e- e' Y, F( u1 I3 w- f/ D" f# C) r: \% z
</body>
. R, I6 G" `; h& i9 A' e; a/ [* s5 I, I* [' [
</html>
, s/ R& ?3 p: H# A
# A- C, O  A- [6 K: F
* `5 a: Z$ z  H[/mw_shl_code]
. i- o% H/ L7 K! Q8 B/ U7 t0 b: e! ^+ T0 w# t, i4 C3 a( {' J

4 k' ~, a: _# Z
5 u" K1 Y) J# y+ e$ g0 @# _XML文件
2 v+ J( @/ @- K5 `& _* {- i$ I8 p
. M, Z7 _' _, u# I: x[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>0 z4 ^* Y! z+ `5 x# Y7 b) P2 L: N
<CATALOG>- ?- x; g! C8 i3 w  e
<TRACK>
6 _4 m; Q# @1 y; A3 Q& g3 L<TITLE>再见</TITLE>! m+ o; o' V+ M* T1 p+ c' W' V
<ARTIST>邓紫棋</ARTIST>
- T  G% D) m( Q<ALBUM>新的心跳</ALBUM>8 T& H& h( c3 N) M
<COUNTRY>中国</COUNTRY>) |: W' R" ~: z7 U6 \* H
<COMPANY>邓紫棋工作室</COMPANY>
" e- y$ q9 [5 V, N3 y5 J<YEAR>2016</YEAR>. g7 \" t- P' a
</TRACK>5 X7 x* f3 B* J+ l: A

5 |% i( V/ q4 |+ I6 o8 Y& S<TRACK>
4 }$ N) {$ M, M4 m5 q: p. H6 ~<TITLE>All I Ask</TITLE>: g7 ?4 W) I! a" t1 D4 @- v
<ARTIST>Adele</ARTIST>
/ R- z5 g- Y# y% w' W. H<ALBUM>25</ALBUM>
/ Q2 {! I" a9 d; d$ O$ o, R+ I<COUNTRY>英国</COUNTRY>4 W6 n2 z, A4 Q
<COMPANY>XL Recordings</COMPANY>
# P$ H2 @' o2 H<YEAR>2015</YEAR>
& z" t9 Y3 f1 v2 l1 F5 U/ o  ?</TRACK>
2 s4 m& a: L  Y* T/ S8 {0 }# B" Y2 B' [' R& \" i" N* B, [
<TRACK>
( p) \# o3 @9 Y- O- p<TITLE>之乎者也</TITLE>! h8 [( F/ s8 r) i4 R( z3 D
<ARTIST>罗大佑</ARTIST>
" Q9 C* u% D6 z<ALBUM>青春舞曲</ALBUM>$ {  J1 U7 v- C
<COUNTRY>中国</COUNTRY>
: I! p% v9 J3 V  \1 e8 ^. W<COMPANY>滚石唱片</COMPANY>
% G) C& T/ i# r# s5 j7 ~0 R3 R<YEAR>1982</YEAR>. F( c  @1 a8 F# `. i; @- |
</TRACK>
9 a7 [& ]# ~7 l. D, ^( h2 b9 ~& ~8 J+ V, ?
<TRACK>4 S4 H$ _, x$ }" q0 l7 }5 }
<TITLE>Never Be Alone</TITLE>( _1 O7 n  @  e7 W" {, y1 o
<ARTIST>Shawn Mendes</ARTIST>
1 @  Y; {" Y( a1 n  C( _<ALBUM>Handwritten</ALBUM>
; F4 c4 v. M3 q: l, i6 c: a$ E<COUNTRY>加拿大</COUNTRY>
: H5 ^+ ?6 E/ Q9 g/ L; g, c<COMPANY>环球唱片</COMPANY>- I6 D& s9 U) J. O. L
<YEAR>2015</YEAR>
! I0 z# ?# C5 q: K& ]5 Y1 i</TRACK>5 o' J7 f" m! d& G- h9 I

3 z8 W; Z8 c1 [; N0 ?<TRACK>
0 m1 u8 M$ u& U! {. X! t<TITLE>慢慢</TITLE>
' q- m; C* b) W; h7 Y+ o: r<ARTIST>张学友</ARTIST>
3 ?* K5 r0 S0 ?<ALBUM>忘记你我做不到</ALBUM>
- R, V* c$ d5 F# `6 Y: I<COUNTRY>中国</COUNTRY>
: V9 C6 a2 r& h<COMPANY>环球唱片</COMPANY>" ?5 ]$ j/ K5 s. h
<YEAR>1996</YEAR>: d) x3 ~* R! Q: {- a
</TRACK>0 I6 J9 E' o$ F% H

  z( C. [* E# |% v8 o! h' y<TRACK>
1 ^$ ]2 F4 a1 j! |8 }<TITLE>Complicated</TITLE>( e! H  f: S& u( \6 T% x! S% @
<ARTIST>Avril Lavigne</ARTIST>
0 m4 R, n1 o$ \<ALBUM>Let Go</ALBUM>6 z9 f; V- a/ K8 u1 L- R; }
<COUNTRY>加拿大</COUNTRY>/ l4 ?$ P  s& D6 U) s1 V
<COMPANY>索尼音乐</COMPANY>
, @* {: e: F' |& E8 v<YEAR>2002</YEAR>
3 D  O& }' W; Q</TRACK>+ Z4 r/ b) h0 T% G# ~+ |
% V/ W3 k# w6 Q) V$ R' {$ S; W; O
<TRACK>7 N2 c; K& K0 \4 M- f
<TITLE>三生三世</TITLE>* A' t8 ]& P# y2 u/ x7 e" E, C
<ARTIST>张杰</ARTIST>* m+ [" L0 ?9 D4 D
<ALBUM>三生三世十里桃花</ALBUM>
) w9 ^: g# ~. g5 c; g1 E$ N<COUNTRY>中国</COUNTRY>, y6 S! {% l) m; _; L* T: K2 g8 W3 H
<COMPANY>仁溪音乐</COMPANY>
6 n! ?% l2 C: J  ^9 R: D<YEAR>2018</YEAR>' D1 {+ k+ s. {( A
</TRACK>1 S& |0 ^6 q' o! X
& t* S8 e4 x1 r' |; X  q3 J% ~# K- s0 H
<TRACK>% N8 M7 x8 ^2 W/ K* }4 U
<TITLE>Five Hundred Miles</TITLE>5 r8 d! \2 J/ Y- F+ p1 |
<ARTIST>Justin Timberlake</ARTIST>
* Q) f5 H8 m+ E0 k8 D$ f; p4 O& O5 n<ALBUM>Inside Llewyn Davis</ALBUM>
& ]: h0 K4 c( [0 z* b/ q<COUNTRY>美国</COUNTRY>
7 f1 U( ]# @7 y6 @  Q8 `5 f<COMPANY>华纳唱片</COMPANY>/ h8 u) K, j/ I( i
<YEAR>2013</YEAR>% a; C8 d- Q: \, L, M
</TRACK>. f/ U$ w. V: t2 |" I: |/ n5 _2 {
3 N$ h9 b% U# @& d$ ^) x
<TRACK>
* t; H9 e( {: n( L4 w% I' j<TITLE>演员</TITLE>
9 H4 M4 F+ ~1 _' I' L<ARTIST>薛之谦</ARTIST>
/ B- q  ]) p* ]. o<ALBUM>绅士</ALBUM>' w( E7 T$ F8 _, |% G4 |- D/ S6 k
<COUNTRY>中国</COUNTRY>
- \9 F/ a# {  q! w' Z: Q# |7 H- ^<COMPANY>海蝶音乐</COMPANY>" w. F$ w7 N' |5 B
<YEAR>2016</YEAR>7 G: J3 \8 F, o: Q6 H8 ^
</TRACK>
' m1 X+ E; M# G* k' s1 A
# |6 n' ?' s' f<TRACK>) y; S( I6 h: C. p  \3 N* E
<TITLE>Numb</TITLE>" z7 I: m9 {, l1 ~1 k0 Q; ^/ ?8 v. q
<ARTIST>Linkin Park</ARTIST>% T! \" t8 f, U  Z
<ALBUM>Meteora</ALBUM>9 q( ]: V) k$ v* G4 [" S' q
<COUNTRY>美国</COUNTRY>
' X7 o* ~9 I* O0 H/ k  a<COMPANY>华纳唱片</COMPANY>
: u$ b' y3 B/ d$ p<YEAR>2003</YEAR>
) `# g7 K/ S* F: Z; V( c. ]9 M</TRACK>4 f; V; D/ F, Q( c( I
' R) J/ B- D6 B: O1 K2 c
<TRACK>
8 C5 ]+ Z0 G9 n$ A$ D; @<TITLE>给未来的自己</TITLE>
: K* v$ {( b$ S/ n/ A# y# U/ L<ARTIST>梁静茹</ARTIST>
& q+ @, Q" E8 N. `) g( \! _- H9 ~<ALBUM>崇拜</ALBUM>
  u& E$ T+ a( W, d4 q# }/ s<COUNTRY>马来西亚</COUNTRY>2 D8 q/ d& l% W$ X
<COMPANY>相信音乐</COMPANY>
/ }( F3 Z; T+ E5 r5 X( `5 ~<YEAR>2007</YEAR>/ {& [' C& P$ P* c# ?& {+ {
</TRACK>+ ]5 R9 M: W  Z/ ]* q3 @/ P
* z- V5 n' c7 W$ u
<TRACK>
6 ?! d5 r" b* E- {$ v4 b<TITLE>The Monster</TITLE>0 p  E0 x( M1 ^4 s# l+ v4 j
<ARTIST>Rihanna</ARTIST>  E: E: \( f. }* F8 e: B
<ALBUM>The Marshall Mathers LP2</ALBUM>
! }% o2 S9 [$ {* h0 s3 d0 Y; ?' @& N<COUNTRY>巴巴多斯</COUNTRY>9 Q& j6 {4 p' v: n1 Z6 y
<COMPANY>环球唱片</COMPANY>+ D; m8 I% E% R* C) m4 c6 y# D
<YEAR>2013</YEAR>2 ^/ e3 ^( B! n# ]0 @/ P7 T7 t
</TRACK>
8 M& d7 D# W1 U' D
5 x# [3 h! Q& [- I5 I6 A<TRACK>6 v) N! {7 r& Q* |: n% _* j1 i" I2 `
<TITLE>我终于失去了你</TITLE>' l5 M3 N6 D4 H1 N- i# q
<ARTIST>赵传</ARTIST>
" f0 k9 N! f1 r. F  i+ J: y6 k<ALBUM>我终于失去了你</ALBUM>$ F" Z' G) h& I, t3 O. q" W
<COUNTRY>中国</COUNTRY>  X3 d/ i, o4 K  t- z- T8 ~
<COMPANY>滚石唱片</COMPANY>
! e$ A- g. \- C. L) Q4 @<YEAR>1989</YEAR>! F; b9 `5 s" s8 S& c! ^  p! h
</TRACK>' m9 P* f& t" O/ q3 Q  X2 `9 W8 z0 p
" L% v2 F; C( M5 q% [6 K# H$ b
<TRACK># B3 d7 p+ F. d
<TITLE>Main Titles</TITLE>2 Q, u4 m# k0 p8 Y: K* a. m
<ARTIST>Ramin Djawadi</ARTIST>
& j) ?4 ~3 Q0 v- T<ALBUM>Game of Thrones</ALBUM>
6 S+ Y9 p6 f. f1 F<COUNTRY>德国</COUNTRY>) w3 Z  {/ s) B+ R4 a* L8 ^
<COMPANY>索尼音乐</COMPANY>' V6 ^0 B4 o9 n% n# V; s0 e4 a
<YEAR>2011</YEAR>
1 u5 A+ m. G; d+ O, p" \$ w</TRACK>" ~4 ~' e5 ]5 X- N; Y

3 d' W. U  p4 w+ r; @8 V. v7 V<TRACK>
8 S: b$ s' h: [7 ^1 d+ Y1 l) {<TITLE>传奇</TITLE>0 Q8 c9 y, N4 n, K4 z
<ARTIST>李健</ARTIST>! r  ~6 B% o% Q6 o
<ALBUM>似水流年</ALBUM>
4 t- T+ H* d: U3 n) k2 ?- d: q<COUNTRY>中国</COUNTRY>
! G% {# k4 t3 |+ A4 z4 h9 r<COMPANY>北京完美坚持文化艺术工作室</COMPANY>0 d8 S/ i& R! p. {3 M
<YEAR>2003</YEAR>8 v# q1 g: {, M7 Y3 O
</TRACK>
7 |1 M" x& f4 k& h3 w4 {
8 g* X  N' f" Y<TRACK>
/ D$ l' r2 n9 N0 H8 m0 E7 T7 W<TITLE>完美生活</TITLE>
. @- M- |; }4 l% S% O* I<ARTIST>许巍</ARTIST>4 n* h8 b* h1 }2 n& Z( p- w
<ALBUM>时光漫步</ALBUM>/ D, _+ R( ^0 k' b
<COUNTRY>中国</COUNTRY>/ Q7 Y' x& h, I+ ?0 N7 v+ t; s
<COMPANY>金牌大风</COMPANY>
0 q4 I8 x. A7 W9 ]2 w) H<YEAR>2002</YEAR>. ^, q9 ]' j5 K. x: t
</TRACK>
: t3 ~& P1 N, @, D</CATALOG>[/mw_shl_code]$ T: N- \, [! H5 L
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了