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

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

[复制链接]

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

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

admin 楼主

2019-10-29 20:10:50

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

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

x

; F% p! ^( w* z" g$ z
# \, q, d  Q4 g- Y# \; {: g4 c# ]0 }
[mw_shl_code=html,true]
9 P# w  S8 N& B: i
/ @$ g( y# n. A" x9 V# ]6 w+ P. j<!DOCTYPE html>: i7 T# W/ q; X0 l* I7 t
<html>
: E/ ~* H0 e; V; _7 Q+ u; ~0 Q, T<header>
! V  ?6 Z) f& @: b4 s    <style># O6 Y- c* S0 k3 L! P' s3 O1 }2 E
        table,
* W8 C- E. T- f        tr,, W; L" t; t* K% r
        th,
% ]- ?+ U5 E/ S- _; p        td {
( ?8 M. a& y& C            border: 2px solid rgb(20, 59, 230);. {8 O* ^0 h" S0 h( L3 C- A
            border-collapse: collapse;' c; I) J: C. w3 ]: m; l
            text-align: center;
/ p3 v+ ^, i! K7 G  W        }
* D* |$ I! f* U. D
$ t* V. c3 t/ I# @+ ]. ?        th,
+ \/ ?+ k9 \: e- n( R  l        td {
0 D: k* ~$ q: E% j  i2 G            padding: 5px;' D8 V0 i  k! P/ c
        }
2 v& j. r! D6 Q: n$ c$ a3 a5 f    </style>
/ ~2 Y; D7 o8 R9 Z" _) X</header>. j1 Y3 H9 B4 m# T
! c: g. S! i: x) `& N* n! C% c
<body>1 d0 p# Y% h1 c, ~
    <h1>xml http request object</h1>
' {- {- j- ^- a- S3 J    <button type="button">Display Music</button>3 L: ^6 ]3 v1 U+ @6 O9 O( {
    <button type="button">Previous</button>6 a6 B% [# y6 E# @. n
    <button type="button">Next</button>  W/ x9 d. M" F. `/ w- w
    <button type="button">get my music list</button>; W; @4 R4 `3 G, k3 n
    <table id="showMUSIC"></table>
& X. Z3 y5 ~! D    <table id="demo"></table>; m- |: I9 ^/ ]7 `
    <script>* L8 k! D6 \  A3 y* B/ w) Y

1 h7 ]9 d$ H% Y2 i        var x, xmlhttp, xmlDoc;8 \/ w, l& P+ g; z4 l6 Z$ t, B, j; v, _
        1 p; M5 c# u  t- I( y( d7 W* V
        xmlhttp = new XMLHttpRequest();
' _$ R9 H3 ^: O( r5 n' ?! U        xmlhttp.open("GET", "/files/music_list.xml", false);# h4 n+ e+ r7 [1 e
        xmlhttp.send();% @/ p4 J$ B, g; C1 ]6 e

! ]' U7 \8 ?( @! g  P: S' G        xmlDoc = xmlhttp.responseXML; ( ]) J, w2 E6 ~+ [2 ^( V, p/ a
        var table = "<tr> <th>Owner</th> <th>User</th></tr>"
# F; v, U7 s7 `! p0 W9 B$ J        var content = document.getElementById('demo');
$ u. R, f. @2 L0 p2 U# _7 B: z        var x = xmlDoc.getElementsByTagName('TRACK');
4 \# H2 t/ ]- v& C* w, Q        for (i = 0; i <x.length; i++) { $ |5 }3 f9 ?: E- [& C
  table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
5 t: q& K, k5 x. o# n9 y' a* V  table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;( j6 N; c/ O7 ]
  table += "</td><td>";
- S2 p. J' j" Y  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
/ T5 N' r% Y: q/ S, c  table += "</td></tr>";) H1 I7 o8 h5 j% x
}
% ?0 h' S" z# E; [9 e9 A! \% ?& j4 P9 v/ Q' Q  I( I1 [' e' _
document.getElementById("demo").innerHTML = table;
+ w8 j0 U  k! W7 ~' @9 svar i = 0;
, ^5 }& l% ^: _: ]        function next() {
+ L# ~& Y! v! v+ O            // 显示下一首歌曲,除非已到达最后一首& W) _: G1 ^+ K5 x7 d+ n1 Y
            if (i < x.length - 1) {
# P. N4 c. z9 m- w* L+ ~                i++;
; q) m* o5 ?/ X- R5 g  i                displayMUSIC(i);+ [0 q5 `% |, \/ }4 k! a+ ]2 q, v
            }0 o  v3 U! V4 s- `; o& p
        }  K% \2 O) I3 n; K; G2 L
4 P; v8 p5 b8 H
        function previous() {7 T2 t8 ~  j) g) w& }9 ^1 [
            // 显示上一首歌曲,除非已到达第一首3 y7 M8 [1 o( K7 k& F: J9 W) x8 y
            if (i > 0) {9 a( P& z1 g: x7 _9 V" i, v6 O
                i--;
) r+ T1 W8 n. k8 \5 t1 @                displayMUSIC(i);
  _/ o9 B$ j/ F5 P2 K' F/ \1 X            }  s# |/ v$ b4 D8 K5 m
        }& o7 ]& @; R( X4 w  B

, e8 d* U$ J: T" k2 O, z        function displayMUSIC(i) {3 M+ m4 I* f8 Q8 L0 t4 x& {& \+ @+ s& w/ v1 A
            document.getElementById("showMUSIC").innerHTML =$ a8 O8 u( `& G9 S) M
                "<ul>" +
5 X; k. d5 l. j6 i: h5 Y& e' \                "<li>曲目:" +& ^$ t" W/ f; U1 W" H
                x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +. i+ X4 m2 O; w
                "<li>艺术家:" +; Y/ Q) i  M: g' _3 L7 [- g
                x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +! K, c- Q1 f9 j5 v4 ~: l
                "<li>专辑:" +
4 ^1 p2 [& U+ Y9 r, p8 K3 }                x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +" m) v' ^. L" P! d& J6 z
                "<li>国家:" +7 H3 I8 d3 e4 d
                x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +' f9 [8 }, s% k7 ?- T1 I2 f
                "<li>公司:" +
7 }/ z8 Q3 v0 V0 r  m1 o                x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +( f4 s$ P2 e1 H" M6 z' t: n0 _
                "<li>年份:" +
( g0 d7 ~4 n( @( P- p- M: t                x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
" j4 n& W4 ^! u, I                "</ul>";
8 O2 N7 v5 T/ J% F, `' n        }% o1 }& N: n# X. m8 f) V# a
; B1 H  e% E# m& Z+ P5 v7 a1 A1 o9 p
        function loadDoc() {" X$ \) X* f$ H+ Z: ]9 T
# K. U9 D4 d4 y- s% G. W
            document.getElementById("demo").innerHTML = table;' t! |$ M5 G; J3 N7 i
        }4 @* r: t; c( b" Y( d0 ]7 m

( y. U" e  R3 @    </script>) q$ r' Y/ x$ K1 Y& h3 U7 w9 [0 `

, t- e) G$ p! u6 i
4 C- F5 h5 R9 N</body>
1 N  e$ b8 c3 j0 v9 ^- M$ f) H4 d1 v$ }! i
</html>
, ?  N( _' z1 Q6 @. w1 Y3 R; ^$ W* X9 U9 V3 ^) G4 c, H

# i9 _+ A) ?5 p( b8 y[/mw_shl_code]
; v5 x1 W1 V, d6 U
5 {7 P" y8 \: A3 C
( U; n" D+ t- f
) B) p! ?  G7 O1 ?: h3 K" C+ L, E( hXML文件! o# n6 s9 m! @. q& [$ q

; B  _7 V2 N' M# f9 e0 P  F- H5 r1 @[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>0 i3 s3 L7 o$ c: l$ J: W: ^! f
<CATALOG>
, |; O$ b/ o) R: D4 Y. c<TRACK>
. G/ n: m# Y/ A. X6 d<TITLE>再见</TITLE>
0 |$ ^" J  b" ^0 n3 ?) {<ARTIST>邓紫棋</ARTIST>
8 X' \/ [+ T( E! [, l4 k/ {9 F<ALBUM>新的心跳</ALBUM>
3 b0 \. N  Y9 b<COUNTRY>中国</COUNTRY>8 n) I1 C# \# U+ `6 c' j" }# K/ w
<COMPANY>邓紫棋工作室</COMPANY>7 X! C5 p2 D* N, y5 U3 x0 a# V
<YEAR>2016</YEAR>
5 v0 O! V/ P  M  P) B$ h</TRACK>
# Z9 f+ [& c! e/ X* D. a
% ~4 _8 h& F" w  ^<TRACK>+ z% O/ i/ R3 H* j# s
<TITLE>All I Ask</TITLE>
6 G: Z( l2 F4 F) T( O& Y3 S- T<ARTIST>Adele</ARTIST>( U. T3 L( _; J( A
<ALBUM>25</ALBUM>
$ E2 o# I; y. p8 a5 U0 q<COUNTRY>英国</COUNTRY>' q) f. ]% y7 s: }
<COMPANY>XL Recordings</COMPANY>6 y" b6 K1 S$ f6 ]
<YEAR>2015</YEAR>  [0 e0 W/ [# C- v# V& d3 d
</TRACK>
# X' ~5 V% u0 h! l7 F
, a7 y! Z6 g; h- S0 X<TRACK># t& }& |8 h9 `. C& C' B
<TITLE>之乎者也</TITLE>
# f3 o1 S8 }4 L6 e  X, u- X<ARTIST>罗大佑</ARTIST>  ]' V8 E# X( S: C& \7 H: l
<ALBUM>青春舞曲</ALBUM>; d* b, Y9 }. N- l
<COUNTRY>中国</COUNTRY>
/ l! w4 ~, G# T/ ?; ^+ T5 i: I<COMPANY>滚石唱片</COMPANY>
/ {( J  G9 f1 s5 P0 d% |<YEAR>1982</YEAR>" l6 r3 J# u8 \4 C! ~9 l) K& R
</TRACK>
3 g: Z0 ^) M# u& S( V, n! F. i
# I; X' v- x0 k0 a! |<TRACK>: l: L" p$ }/ `
<TITLE>Never Be Alone</TITLE>
* W% ?0 t7 Z4 `; h1 _5 k8 y2 R<ARTIST>Shawn Mendes</ARTIST>
6 i! k: q. P! p/ c  k5 ?/ |6 g: \<ALBUM>Handwritten</ALBUM>
4 j* g9 e# r9 e<COUNTRY>加拿大</COUNTRY>
; e* M7 p5 [( u" N, d2 N  K<COMPANY>环球唱片</COMPANY>- g1 A0 h, @" E# G
<YEAR>2015</YEAR>6 Y; w+ T( O( b: K
</TRACK>
$ I( R: t% Z+ f# b3 c7 g" [0 Q. ^- Q+ u2 A8 D( K( j
<TRACK>9 r& v* e7 ?/ o4 Z
<TITLE>慢慢</TITLE>
/ p# w1 V. H' x7 q( {4 o<ARTIST>张学友</ARTIST>0 Q5 U; A3 \% M( E
<ALBUM>忘记你我做不到</ALBUM>! c2 f; }$ C! b
<COUNTRY>中国</COUNTRY>2 G6 [, _9 |- K- G. r) X
<COMPANY>环球唱片</COMPANY>
% [( |: o5 @' ]0 D5 |$ A<YEAR>1996</YEAR>
* D' G/ V# x$ K5 K</TRACK>
1 f- j3 U% r9 f8 ~
$ A) `$ Q2 v$ G* \* \  U. a<TRACK>
4 o8 |( U, s2 m7 E4 [<TITLE>Complicated</TITLE>. ]* a3 @- R) i1 H1 v3 [
<ARTIST>Avril Lavigne</ARTIST>/ D- ^; R" S8 V5 j
<ALBUM>Let Go</ALBUM>
5 N% O% @* V# B6 I<COUNTRY>加拿大</COUNTRY>+ h* B3 N2 B# J% ?9 n) p$ T' _1 X+ f
<COMPANY>索尼音乐</COMPANY>
  l9 `( l( v% Z4 C<YEAR>2002</YEAR>
! J% t0 E/ M7 x, i1 ~</TRACK>- {" @$ a8 I$ o$ l

* ~  R. @$ s' s  a) \<TRACK>1 m, j, x5 }8 x  ?( t
<TITLE>三生三世</TITLE>
& j/ \& a# A0 Z. M6 a<ARTIST>张杰</ARTIST>
4 t; @, o3 ]% _0 U9 v$ _8 f% q" _. q<ALBUM>三生三世十里桃花</ALBUM>2 C3 C) z# S" W) a, R, b
<COUNTRY>中国</COUNTRY>7 `& X6 N. y5 E+ j% L! {& w" Q* ]
<COMPANY>仁溪音乐</COMPANY>
8 z. H: ~$ q0 ?% u$ D8 e( g4 D<YEAR>2018</YEAR>
: _' @! k$ J, e/ q  Y</TRACK>/ t' r3 d) p- L& a1 W
1 Q7 B; T0 u) ]
<TRACK>
: F7 O$ n* i( O) d  J  l  O<TITLE>Five Hundred Miles</TITLE>3 F( Q3 Q+ ?) P8 u7 v
<ARTIST>Justin Timberlake</ARTIST>5 t, D4 ?) Y: r( B
<ALBUM>Inside Llewyn Davis</ALBUM>2 p2 z5 f/ T( ^
<COUNTRY>美国</COUNTRY>; `( b, @. ~9 X& t
<COMPANY>华纳唱片</COMPANY>
( w* x0 }' r: V* W/ z4 N! J* k0 Z<YEAR>2013</YEAR>7 v9 q( m2 b. V# a5 r3 U/ z
</TRACK>
  t1 C" u4 {2 _  T$ W! c9 ?  o2 L: k' I5 A3 @* Y5 {
<TRACK>  f. h0 R) p+ s" \* G4 i
<TITLE>演员</TITLE>
/ U/ Y$ r. O/ l: p9 M<ARTIST>薛之谦</ARTIST># ~( r/ o- B1 C) V+ B
<ALBUM>绅士</ALBUM>* x4 Q- W8 h) e9 X
<COUNTRY>中国</COUNTRY>
4 R; B! R7 c! B( Y5 W  r/ T4 w9 W<COMPANY>海蝶音乐</COMPANY>
, U3 X# [3 `! ]" M0 g! C( x$ s7 B<YEAR>2016</YEAR>  d, e3 \' F  c- l. Q
</TRACK>
  C8 T) o* h' L8 H' V0 H. n5 q
<TRACK>0 _% I) M0 h. ?- Q
<TITLE>Numb</TITLE>
7 l) m$ h+ G8 ]- m<ARTIST>Linkin Park</ARTIST>
" R. _* W0 K- h1 k<ALBUM>Meteora</ALBUM>& h+ K/ O& N; T9 @
<COUNTRY>美国</COUNTRY>
9 E" L1 f9 ^0 @' r" `" A0 K( q<COMPANY>华纳唱片</COMPANY>( u+ Z' N" F  a' {5 {
<YEAR>2003</YEAR>
! Z' s% V; @( B</TRACK>/ F) E: d' E8 x' i% k0 l/ ~
& R- X8 W2 B4 _) @- ~
<TRACK>1 i% |0 B7 Z/ b% J0 j2 w
<TITLE>给未来的自己</TITLE>
) ?* M3 @! }( J<ARTIST>梁静茹</ARTIST>, w2 U; C( o( v0 h
<ALBUM>崇拜</ALBUM>
, w/ g, V1 ]: D: z# d6 e) V<COUNTRY>马来西亚</COUNTRY>8 [3 r, e7 a5 |( ~2 V* e6 ~8 o# _( h
<COMPANY>相信音乐</COMPANY>: N! m+ N8 P% a4 N
<YEAR>2007</YEAR>  c, X* ?- e# X& s
</TRACK>
& e8 p  J: U$ d3 ~8 y- r9 H' d+ ^  t0 Y, F: q, v
<TRACK>
- Q: {# F! w4 z% a# D; Z4 n<TITLE>The Monster</TITLE>1 Z" w% X" b, U6 z8 b8 y3 x9 }
<ARTIST>Rihanna</ARTIST>
0 S3 C+ `0 T% |' H8 l<ALBUM>The Marshall Mathers LP2</ALBUM>
5 x; n/ B$ ~# W+ [! r<COUNTRY>巴巴多斯</COUNTRY>) ~5 Z. J" I1 S, T& k2 \  V* e
<COMPANY>环球唱片</COMPANY>- L5 u4 D# P6 J4 u
<YEAR>2013</YEAR>
# S: x. U/ O- ~3 N7 Q</TRACK># E9 }0 Q& H7 n

& z1 B( m$ X8 V' r. l$ v<TRACK>* @; g! S* W) w: u
<TITLE>我终于失去了你</TITLE>2 d. @, C% W+ ?
<ARTIST>赵传</ARTIST>& I% S  y+ r3 M: O3 @
<ALBUM>我终于失去了你</ALBUM>
' P2 V5 ?2 `. S- L* {4 f* x<COUNTRY>中国</COUNTRY>3 @' q7 Z( d/ ?" ~  F
<COMPANY>滚石唱片</COMPANY>
1 b( H/ c9 G% C7 W" H2 \5 N<YEAR>1989</YEAR>
, h6 c" n9 }6 s& o% ^</TRACK>
" N7 T- d' r. |' }
% r4 s, U. H4 G2 f, u  f4 y# v4 ]<TRACK>
: I! A( k) H8 q. @" m, f<TITLE>Main Titles</TITLE>1 b- z. g7 v0 S
<ARTIST>Ramin Djawadi</ARTIST>; e, j) m5 z# _5 S5 h
<ALBUM>Game of Thrones</ALBUM>6 o. ~' f! i3 p' s) K
<COUNTRY>德国</COUNTRY>& a, _/ f, f+ h
<COMPANY>索尼音乐</COMPANY>
0 S/ j! }6 _. s4 Q( v. o6 Q<YEAR>2011</YEAR>
$ G6 `" o& o/ D& ]+ J: q" z& f</TRACK>
/ [8 y0 Q1 o8 ]; K( Y! u- c
( N  k, s& i: j$ O0 {; s) z* D1 m<TRACK>9 b3 D+ q9 w8 U
<TITLE>传奇</TITLE>
% z0 S( h, ~' E* A<ARTIST>李健</ARTIST>
, G/ l9 R2 ^7 H; ?: H<ALBUM>似水流年</ALBUM>& X  \/ b, B" u* F
<COUNTRY>中国</COUNTRY>0 n" i6 O) p, ?/ t- m
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>5 Z9 P% K' H: h
<YEAR>2003</YEAR>3 g1 C, t1 Z7 b# I7 c7 k
</TRACK>( C6 x: r0 N! A" `8 O

6 t4 g/ ~) H. N2 O* U: i' W8 @<TRACK>
- ?- L9 x8 ]: u- E: }& K: s<TITLE>完美生活</TITLE>
3 P: d% e& V- ]) a% U: W<ARTIST>许巍</ARTIST>
' S5 C0 u- v1 H6 G; y( ~: w<ALBUM>时光漫步</ALBUM>* v* c2 E. O3 L8 ]9 P0 A& k* e2 e
<COUNTRY>中国</COUNTRY>
# w3 q' H7 a  G! v$ o<COMPANY>金牌大风</COMPANY>4 K7 e9 a6 p. \- p. d/ H
<YEAR>2002</YEAR>
1 w9 ?, i9 C) v9 S; d: ?# _1 c7 E( u</TRACK># ], r4 B: q$ T0 P2 w7 ?* F* b1 T5 @
</CATALOG>[/mw_shl_code]
# v  k; W- X. ^0 e( r4 j. }4 A9 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二次开发专题模块培训报名开始啦

    我知道了