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

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

[复制链接]

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

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

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

x
4 l3 p" D( Y/ c9 x( {

/ O8 s5 ^/ J, r% [! n2 R0 H+ [6 I6 q4 w' j. }1 y" H: L
[mw_shl_code=html,true]
# c3 h/ [+ w' a+ _! ?
% x& @% n9 Y7 l* Z6 w<!DOCTYPE html>
) D8 Y# v+ f- s# `4 @1 r- R<html>6 `* B# b+ g. @! y9 e
<header>& p0 z2 B$ K, \. z
    <style>, K3 |. h4 Y" P" ]$ e; l7 |& r: \. q
        table,, n: u$ Y$ H) ~! ]0 T! f3 O/ X
        tr,
# C! U4 F5 O1 t9 z1 r0 k8 }& O        th,
) B' Y* N, o  n        td {
" F2 g* ]5 M5 \2 w# D5 C/ r            border: 2px solid rgb(20, 59, 230);
1 v: m+ R, `/ p* v            border-collapse: collapse;
* ?! M7 i% V# O1 ~2 M, V, {+ S; v            text-align: center;
  c1 X; P, {' V' U3 Y3 N; p' o        }
1 t* {! M) Q5 Q; P/ \  @
  P& e( k5 J+ Q7 z6 U& I        th,
; s) g: l: Q: w, [( @4 b        td {
9 U: c& x. _) H5 ~            padding: 5px;
% o3 U% b8 L- k6 t, P0 F        }
# e! w0 B. g( F0 u2 a1 p3 T    </style>
/ i! A+ j) n% T1 D</header>- ]. p0 k" n  U1 _' C8 l

9 J2 W2 ^: w3 n; F" i+ @! F* C# ?<body>( j0 g4 L+ c' {3 V9 w* G1 e
    <h1>xml http request object</h1>; b+ D9 Q5 Q  t0 t# {
    <button type="button">Display Music</button>
* H4 X% H0 b- [; R    <button type="button">Previous</button>- |6 B& s, g# O3 s4 `# _# \
    <button type="button">Next</button>4 J  o# F$ @. R8 s3 s0 h
    <button type="button">get my music list</button>5 E1 p& B8 v; ]  Q8 `
    <table id="showMUSIC"></table>
- R& I4 |+ Y; B" _& `* M8 J+ ?9 X" H! |4 d    <table id="demo"></table>+ a) F: n+ R: Q3 ]
    <script>. {+ ^8 r& ~# k3 M- u  y

' B9 F% @% F$ d& m: H5 k        var x, xmlhttp, xmlDoc;
$ H- e0 x( V6 V        1 O" d; m) F  {+ G: d7 R
        xmlhttp = new XMLHttpRequest();
. H+ s1 _' K6 n; m+ u" b9 [        xmlhttp.open("GET", "/files/music_list.xml", false);
  |4 D$ L2 l) I; M, f8 I9 H4 q1 g7 C        xmlhttp.send();. }5 \( J6 x5 u7 G: H
8 b) J5 G3 ?1 z9 a2 K. i1 Z* `( B
        xmlDoc = xmlhttp.responseXML; $ e1 b( Z$ U4 w) i" M( q
        var table = "<tr> <th>Owner</th> <th>User</th></tr>"1 o/ Q& I% u6 ?+ W
        var content = document.getElementById('demo');
! W0 S( f5 X+ Z4 N& H2 t        var x = xmlDoc.getElementsByTagName('TRACK');8 ?% o& H5 k3 U: f; U; p3 z% g
        for (i = 0; i <x.length; i++) {
# ~- g2 @6 K2 W- c9 g' t& u8 s. \& L  table += "<tr onclick='displayMUSIC(" + i + ")'><td>";
* K. K2 c/ ?  s  d, L  table += x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue;
- Q( a( L6 I& A* u+ ~- K  table += "</td><td>";
  ?3 W# n* l3 a  table +=  x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue;
& u$ @/ T% b. \+ N  table += "</td></tr>";2 M; P& ~4 M6 i; x8 A1 b3 ~7 `
}
5 |' H" n9 w* ?4 h- j+ l& _; J" k6 c/ U) d; C, @
document.getElementById("demo").innerHTML = table;
3 B/ J( x) _% ^" k. m0 r, ~var i = 0;
% x' }8 U6 I+ z) c9 l6 ~2 L2 c+ L        function next() {
- t) @/ y# }) G            // 显示下一首歌曲,除非已到达最后一首1 X8 E" ?% X. M" z# c
            if (i < x.length - 1) {
, _% t3 _+ U! ~                i++;
" s( M: I# t9 D  V" p                displayMUSIC(i);
* n) U5 M% p* @) H, U% i            }: A1 o8 ~' F8 o( K5 g3 @3 G
        }- d3 Q- h# t: M, j- f
) _% o. ]* d9 T4 Z# H$ A, V
        function previous() {2 u6 C* L8 e0 E$ I2 s( x
            // 显示上一首歌曲,除非已到达第一首
; z, c& T- T/ T, S3 S0 J6 H            if (i > 0) {9 U+ F: p9 k/ `
                i--;
" J7 V1 V# c" O8 B, y% K7 g& {                displayMUSIC(i);
/ Y  m( A. E& q2 P$ F  u; p/ \2 [            }4 e" e% h) @: M0 S
        }
7 }" P. `& L  V0 r, @8 `% N! m& D: J5 x* \, S) ?
        function displayMUSIC(i) {& o+ |5 s9 g2 l4 @7 v
            document.getElementById("showMUSIC").innerHTML =! E) G* o' [6 G! ?! F4 r
                "<ul>" +0 p! A) q5 b2 X: f% H
                "<li>曲目:" +0 X# g- z) ~* W: }8 Z  q
                x.getElementsByTagName("TITLE")[0].childNodes[0].nodeValue + "</li>" +3 g" l. _8 q% B" X2 ]
                "<li>艺术家:" +: L) m  a2 b( N/ y0 q6 x2 I' c2 s
                x.getElementsByTagName("ARTIST")[0].childNodes[0].nodeValue + "</li>" +' k/ f7 w: T3 y
                "<li>专辑:" +- ]! C; f; L- T7 a2 i
                x.getElementsByTagName("ALBUM")[0].childNodes[0].nodeValue + "</li>" +, q0 e4 ~! [# J
                "<li>国家:" +
* Z# n8 {  |. I4 W% ]/ J+ b8 I, ~                x.getElementsByTagName("COUNTRY")[0].childNodes[0].nodeValue + "</li>" +
) ^" K0 N8 L6 M  |* A, u                "<li>公司:" +
/ ]  D) S$ ~% l+ f* G& J                x.getElementsByTagName("COMPANY")[0].childNodes[0].nodeValue + "</li>" +
* o; m* ~2 C# ~                "<li>年份:" +0 P; B) o/ C+ b2 z  Z3 A* X
                x.getElementsByTagName("YEAR")[0].childNodes[0].nodeValue + "</li>" +
, X1 B9 K2 \) q* h                "</ul>";
; V  i. t1 M. H' E' s        }* }8 O# e. w  l3 p% o6 \/ s

6 j7 f, `) A+ n- j! X8 W. H4 m        function loadDoc() {0 t. g- q' }1 R# ]6 E0 x

  _7 O3 ~  y3 r9 J7 E- w6 @            document.getElementById("demo").innerHTML = table;
" R, T% M4 Q. K' \  j/ E* `7 G        }
7 j* W7 J, z# i/ q$ L/ D2 F4 t- ]. B: L
    </script>
' ]0 \7 d4 b0 \! o# F# z  `/ ~9 T6 m- Z+ O6 O+ Y. i; _# a& ^: I

) f0 j# \) ~7 p5 f</body>
: o: W+ l* o3 H: b. r6 k8 p6 ]/ N% m( R: {
1 r) N+ C" j* w6 g5 j</html>! i# p7 O1 t! F; @
7 Z. D5 K' B  U# ~

7 h& b* ~5 @) M" S( z[/mw_shl_code]5 l8 }8 U$ m; [1 d8 \0 |5 f
# G! [- ^% c# x) H  A+ b
" Z- C1 J. L3 s3 j3 ]9 o

. F3 y" v! E7 d/ t# U( E4 }XML文件5 O2 S6 H1 Q, q: D0 U7 d1 L1 r7 N
' @  ]% `1 h2 y3 D4 ]
[mw_shl_code=xml,true]<?xml version="1.0" encoding="utf-8"?>
$ Q6 M4 ]9 g! F# O<CATALOG>, r8 `- ~6 Q* I% G: Q/ U
<TRACK>' V  O8 ~2 z1 \, |1 F
<TITLE>再见</TITLE>
& i+ d% t# n0 o, W" I0 O+ u+ V* T<ARTIST>邓紫棋</ARTIST>* K" e( U$ d! a9 ?  C5 l1 b
<ALBUM>新的心跳</ALBUM>" F( H7 s5 N! x# s- x- o
<COUNTRY>中国</COUNTRY>
- S+ [' q! a3 p- Z1 p% p# D<COMPANY>邓紫棋工作室</COMPANY>* S: w# O8 V% j; c. S" v! A0 s
<YEAR>2016</YEAR>
, j0 ^0 x& k5 `7 L2 n. q8 s! Q, [</TRACK>
4 P/ N5 `! L$ o9 u; W+ J0 P' E2 m/ I% W5 @, ]7 m' H6 }6 M
<TRACK>/ U  E* o8 J! A, P/ C/ R
<TITLE>All I Ask</TITLE>4 M$ `# P7 I- g8 a3 V# s
<ARTIST>Adele</ARTIST>
9 u9 x; X; H% ^* j<ALBUM>25</ALBUM>3 x' w: N4 [' r2 v4 M  K
<COUNTRY>英国</COUNTRY>! l5 W/ v+ b, R* Q: t
<COMPANY>XL Recordings</COMPANY>8 z# J9 j8 G5 n" \6 c
<YEAR>2015</YEAR>8 r: a& b% Z' X4 T3 O
</TRACK>7 W  k* ~% s5 _5 Q+ P* e9 ]
. d  M3 r+ a" a9 a! I) ~
<TRACK>4 ^: D  V9 o8 Y4 [! t2 ~% R) n( Q/ W' x
<TITLE>之乎者也</TITLE>
3 G+ J& H7 ~3 \9 `9 C( Z; R<ARTIST>罗大佑</ARTIST>
+ \3 c3 R* x6 t1 f1 A' M<ALBUM>青春舞曲</ALBUM>- f! i; V3 O  h8 z2 w
<COUNTRY>中国</COUNTRY>5 [4 V6 r2 a" q  P& A- v# O- I* ?
<COMPANY>滚石唱片</COMPANY>  D+ o/ m; q1 C
<YEAR>1982</YEAR>
2 Q; u( R5 L+ r( u( \4 P; r</TRACK>  t6 T' ?1 C1 a
/ {2 x$ ~, h( H, |$ U- D) h/ Z
<TRACK>
+ P1 o' E6 y' O4 Q6 G( l<TITLE>Never Be Alone</TITLE>4 _4 ~: [* {" ]9 D+ H$ W
<ARTIST>Shawn Mendes</ARTIST>
, b/ `4 d; F% R- m& m/ k9 @& C9 q<ALBUM>Handwritten</ALBUM>
, u1 e  y5 R$ r; j$ k# N  }" j<COUNTRY>加拿大</COUNTRY>
- ?7 r# o9 `' @! D- i" P( T<COMPANY>环球唱片</COMPANY>
' p5 \# g+ X6 `9 J* ~, S<YEAR>2015</YEAR>& t/ q* f4 i) @; x
</TRACK>
, Y. Z. c8 j$ Q/ B( ^3 [
& p7 B6 h" S; Z* [* G3 I<TRACK>
; n1 m; a1 z/ @: L" F1 O<TITLE>慢慢</TITLE>
' J6 D5 R) q1 t4 t; W<ARTIST>张学友</ARTIST>$ z7 L7 y* k$ g& K
<ALBUM>忘记你我做不到</ALBUM>6 M# J7 t( j, e9 K* R
<COUNTRY>中国</COUNTRY>; j! s; U( H7 Z, \
<COMPANY>环球唱片</COMPANY>' _: Z. C* u3 K' ~* N$ T. D
<YEAR>1996</YEAR>$ o6 M* c) z. z+ s+ W: s" }5 g
</TRACK>
0 x4 h8 z8 f# e6 R- l# Z0 d  j1 F9 P) t- M
<TRACK>
9 i  E% |7 e3 t5 ?+ M+ D3 w( i<TITLE>Complicated</TITLE>; @2 ]: w1 S1 V+ Y9 O; V
<ARTIST>Avril Lavigne</ARTIST>
# o- S$ x# ?9 P" b; b1 q+ f5 ^<ALBUM>Let Go</ALBUM>" E) n7 n7 ]/ y9 Y. R3 R
<COUNTRY>加拿大</COUNTRY>
! p/ b5 f. k& K<COMPANY>索尼音乐</COMPANY>
+ _, n* X5 U, n: `/ Z<YEAR>2002</YEAR>
# v8 p7 J, c/ ^& U. k</TRACK>5 t7 G! [# C0 n' p. b1 Z
3 u: l+ |) E% E4 s
<TRACK>1 C3 F- U1 E# A: f
<TITLE>三生三世</TITLE>4 N8 F% E( F$ X. C1 t
<ARTIST>张杰</ARTIST>
* t: u: b+ X* s<ALBUM>三生三世十里桃花</ALBUM>
" g) }. E6 l  _' S3 R, J<COUNTRY>中国</COUNTRY>
3 g( g0 E4 A/ v) i  p<COMPANY>仁溪音乐</COMPANY>0 @1 A# |$ M3 @- W! u
<YEAR>2018</YEAR>6 h0 M/ b( }1 a8 [0 E$ y1 ]
</TRACK>2 y: w# d* z1 l2 X2 A4 E

! F6 C! j( k6 O7 g* t3 ~<TRACK>5 w3 U0 u8 o" i, R5 T, ^2 J
<TITLE>Five Hundred Miles</TITLE>
# C6 L. c* Z4 P) o8 h  d! _/ L<ARTIST>Justin Timberlake</ARTIST>
! @* E: F3 {% I, N& x<ALBUM>Inside Llewyn Davis</ALBUM>
6 W' T7 F( m; {& K- J<COUNTRY>美国</COUNTRY>* S* j' i$ H! Z: L1 j' c, |+ }
<COMPANY>华纳唱片</COMPANY>
2 c# S' p& \! M<YEAR>2013</YEAR>. ]! X2 ?. p! X2 z6 _/ n. m
</TRACK>' H/ e- \% ?+ s  F& U+ S( [( `
5 n" Y) ?3 v* Y% j# t* y. ]1 X
<TRACK>
$ S( S9 c. t# N$ r0 V5 A$ [5 m<TITLE>演员</TITLE>
  v+ b4 ]: `7 c" J1 m  F7 X- a8 Y<ARTIST>薛之谦</ARTIST>+ `5 s/ K) ]7 B" Y" P; H7 e( X$ R
<ALBUM>绅士</ALBUM>
$ i. V! Z8 Y8 D, f5 V<COUNTRY>中国</COUNTRY>
$ t0 @# B! r& ?<COMPANY>海蝶音乐</COMPANY>
) Y# Y+ Y1 }0 y; [/ G0 L<YEAR>2016</YEAR>
8 x1 N6 G+ g: R& ?, L. P</TRACK>
8 a, H7 m# W  G) U5 F' _# e
4 W) C. m0 r9 e4 C<TRACK>0 Z9 U; W& s1 ]4 A
<TITLE>Numb</TITLE>
' {$ `1 `0 J- e; v<ARTIST>Linkin Park</ARTIST>5 ~7 `9 d7 c+ \* e3 U4 I
<ALBUM>Meteora</ALBUM>8 s- l6 N4 H4 R+ {
<COUNTRY>美国</COUNTRY>
( W/ p- |5 q; B( d+ ~2 B: a& p, t8 s<COMPANY>华纳唱片</COMPANY>3 g0 U! {% h7 ]( J8 v1 q
<YEAR>2003</YEAR>1 J2 ?8 G2 f; f/ s/ n3 ^* [' P. {$ y
</TRACK>- U4 s: |9 ?9 R9 k/ P  E# G0 v

" K7 ]6 w4 Q) S) W) n1 y6 O<TRACK>
& c4 T" g7 p, ]7 i. R+ W. g4 O<TITLE>给未来的自己</TITLE>( |$ M! O$ B3 o+ U- X* Y# b* M; L% f
<ARTIST>梁静茹</ARTIST>
, Q8 _$ t. C* z' n) L' B<ALBUM>崇拜</ALBUM>
6 v3 M) N3 k3 [% N. x2 s2 A- e<COUNTRY>马来西亚</COUNTRY>
: b/ I- [, m& s7 h8 O/ T' W<COMPANY>相信音乐</COMPANY>
9 n# S/ x1 u& g  V<YEAR>2007</YEAR>
3 R. j- `$ y0 T3 K</TRACK>+ F2 u# |* Z$ G4 h3 t

) {) a% w9 {1 v6 g<TRACK>8 i! s& E/ t: s7 {" I
<TITLE>The Monster</TITLE>5 F0 e; ^% D* I+ a$ U
<ARTIST>Rihanna</ARTIST>* h' _1 x4 T  [
<ALBUM>The Marshall Mathers LP2</ALBUM>7 c  T/ A/ P0 \* E3 A4 K4 o
<COUNTRY>巴巴多斯</COUNTRY>
8 e5 h! {' V% q2 c" f8 N7 N3 Q<COMPANY>环球唱片</COMPANY>
/ t$ l" }. x) q; C; f<YEAR>2013</YEAR>
* K  z* ^0 y; X) N* d</TRACK>
! g2 b% |+ A: P7 E  }% R) B  h; l" R
<TRACK>1 Z7 h( p* a& c9 P" |" o
<TITLE>我终于失去了你</TITLE>) W- ~" e2 a. K4 _7 \5 q" {+ ]
<ARTIST>赵传</ARTIST>
* {9 ?, @6 r" g; Y8 l1 w- d5 {2 f<ALBUM>我终于失去了你</ALBUM>' O/ \) G; T- u0 O6 _* S; v: D0 @0 A- j
<COUNTRY>中国</COUNTRY>
! O5 o, P7 K; _8 w+ e0 _% O<COMPANY>滚石唱片</COMPANY>2 e  Y, d% K' G8 r$ b* B' R1 [
<YEAR>1989</YEAR>
+ O1 L% O; J; U6 M1 K* n</TRACK>
! p7 f8 k" ?( J  F
& d/ q1 f2 {0 X! j* J$ L  M<TRACK>9 J0 U* \$ T6 T6 w( S' U
<TITLE>Main Titles</TITLE>6 m; D- r1 f) G+ G7 m, s' g0 N, ^
<ARTIST>Ramin Djawadi</ARTIST>9 P: j; t& i0 P
<ALBUM>Game of Thrones</ALBUM>
& w3 N* u$ S; W; Y+ X% k<COUNTRY>德国</COUNTRY>
% {1 P, U! w: l5 K* W<COMPANY>索尼音乐</COMPANY>8 r# O( [0 _( r+ J2 o( k& g5 F9 ]9 P
<YEAR>2011</YEAR>: m$ A( `1 p; U; E0 y
</TRACK>
' r5 O7 V3 C5 W4 p* Z$ e/ C( i2 W+ A3 J3 I0 \
<TRACK>
9 L  U9 X6 K' e6 e  M( A& i<TITLE>传奇</TITLE>. J$ i* ~2 ?1 g" L
<ARTIST>李健</ARTIST>
  g% P2 m) e$ V* N<ALBUM>似水流年</ALBUM>) L* x7 S, _+ {6 |- e6 }" q
<COUNTRY>中国</COUNTRY>+ i* d% E* B7 P" e! G
<COMPANY>北京完美坚持文化艺术工作室</COMPANY>) }% N4 h3 Z/ W% h3 ?4 f3 \' @
<YEAR>2003</YEAR>
8 y( {& w, W1 i" Z0 ~$ P! [) `; G2 l% p9 d</TRACK>/ C3 n1 i. v; A% g8 x

& \3 Y% r' H- L- l5 R<TRACK>/ ^/ g5 x) }2 F& c+ U9 O, c& `
<TITLE>完美生活</TITLE>
3 B6 A% [* d  ^0 Z1 W! x<ARTIST>许巍</ARTIST>
5 S' D0 j1 ?2 p/ ?. h# b<ALBUM>时光漫步</ALBUM>
; i2 g. @9 I* g# x# R# B0 O* G0 o0 P<COUNTRY>中国</COUNTRY>
* @8 @! Y- C1 j<COMPANY>金牌大风</COMPANY>3 e5 k/ b7 z4 @3 J7 O* M
<YEAR>2002</YEAR>" T% S3 p0 q' J' ~+ B% ]
</TRACK>
& ?' n/ G' q7 B# J, B! u</CATALOG>[/mw_shl_code]
7 o% b0 `! m, K2 c; n* T! _
上海点团信息科技有限公司,承接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二次开发专题模块培训报名开始啦

    我知道了