JS使用ajax从xml文件动态获取数据显示的方法

最新推荐文章于 2021-11-04 19:31:37 发布
最新推荐文章于 2021-11-04 19:31:37 发布
阅读量808 收藏 1
点赞数
分类专栏： JavaScript

本文实例讲述了JS使用ajax从xml文件动态获取数据显示的方法。分享给大家供大家参考。具体分析如下：

下面的JS代码通过ajax检索xml文件的内容动态展示到网页，真个页面无刷新

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
var txt,x,xx,i;
if (window.XMLHttpRequest)
 {// code for IE7+, Firefox, Chrome, Opera, Safari
 xmlhttp=new XMLHttpRequest();
 }
else
 {// code for IE6, IE5
 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
 }
xmlhttp.onreadystatechange=function()
 {
 if (xmlhttp.readyState==4 && xmlhttp.status==200)
  {
  txt="<table border='1'><tr><th>Title</th><th>Artist</th></tr>";
  x=xmlhttp.responseXML.documentElement.getElementsByTagName("CD");
  for (i=0;i<x.length;i++)
   {
   txt=txt + "<tr>";
   xx=x[i].getElementsByTagName("TITLE");
    {
    try
     {
     txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
     }
    catch (er)
     {
     txt=txt + "<td> </td>";
     }
    }
   xx=x[i].getElementsByTagName("ARTIST");
    {
    try
     {
     txt=txt + "<td>" + xx[0].firstChild.nodeValue + "</td>";
     }
    catch (er)
     {
     txt=txt + "<td> </td>";
     }
    }
   txt=txt + "</tr>";
   }
  txt=txt + "</table>";
  document.getElementById('txtCDInfo').innerHTML=txt;
  }
 }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<div id="txtCDInfo">
<button onclick="loadXMLDoc('cd_catalog.xml')">Get CD info</button>
</div>
</body>
</html>

xml文件内容如下

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
<CATALOG>
<CD>
<TITLE>Empire Burlesque</TITLE>
<ARTIST>Bob Dylan</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Hide your heart</TITLE>
<ARTIST>Bonnie Tyler</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS Records</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Greatest Hits</TITLE>
<ARTIST>Dolly Parton</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>RCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1982</YEAR>
</CD>
<CD>
<TITLE>Still got the blues</TITLE>
<ARTIST>Gary Moore</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Virgin records</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Eros</TITLE>
<ARTIST>Eros Ramazzotti</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>BMG</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>One night only</TITLE>
<ARTIST>Bee Gees</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1998</YEAR>
</CD>
<CD>
<TITLE>Sylvias Mother</TITLE>
<ARTIST>Dr.Hook</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>CBS</COMPANY>
<PRICE>8.10</PRICE>
<YEAR>1973</YEAR>
</CD>
<CD>
<TITLE>Maggie May</TITLE>
<ARTIST>Rod Stewart</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Pickwick</COMPANY>
<PRICE>8.50</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Romanza</TITLE>
<ARTIST>Andrea Bocelli</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>10.80</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>When a man loves a woman</TITLE>
<ARTIST>Percy Sledge</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Black angel</TITLE>
<ARTIST>Savage Rose</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Mega</COMPANY>
<PRICE>10.90</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>1999 Grammy Nominees</TITLE>
<ARTIST>Many</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Grammy</COMPANY>
<PRICE>10.20</PRICE>
<YEAR>1999</YEAR>
</CD>
<CD>
<TITLE>For the good times</TITLE>
<ARTIST>Kenny Rogers</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Mucik Master</COMPANY>
<PRICE>8.70</PRICE>
<YEAR>1995</YEAR>
</CD>
<CD>
<TITLE>Big Willie style</TITLE>
<ARTIST>Will Smith</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Columbia</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1997</YEAR>
</CD>
<CD>
<TITLE>Tupelo Honey</TITLE>
<ARTIST>Van Morrison</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Polydor</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1971</YEAR>
</CD>
<CD>
<TITLE>Soulsville</TITLE>
<ARTIST>Jorn Hoel</ARTIST>
<COUNTRY>Norway</COUNTRY>
<COMPANY>WEA</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1996</YEAR>
</CD>
<CD>
<TITLE>The very best of</TITLE>
<ARTIST>Cat Stevens</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Island</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1990</YEAR>
</CD>
<CD>
<TITLE>Stop</TITLE>
<ARTIST>Sam Brown</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>A and M</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1988</YEAR>
</CD>
<CD>
<TITLE>Bridge of Spies</TITLE>
<ARTIST>T'Pau</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Siren</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Private Dancer</TITLE>
<ARTIST>Tina Turner</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>Capitol</COMPANY>
<PRICE>8.90</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Midt om natten</TITLE>
<ARTIST>Kim Larsen</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Medley</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1983</YEAR>
</CD>
<CD>
<TITLE>Pavarotti Gala Concert</TITLE>
<ARTIST>Luciano Pavarotti</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>DECCA</COMPANY>
<PRICE>9.90</PRICE>
<YEAR>1991</YEAR>
</CD>
<CD>
<TITLE>The dock of the bay</TITLE>
<ARTIST>Otis Redding</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>Atlantic</COMPANY>
<PRICE>7.90</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Picture book</TITLE>
<ARTIST>Simply Red</ARTIST>
<COUNTRY>EU</COUNTRY>
<COMPANY>Elektra</COMPANY>
<PRICE>7.20</PRICE>
<YEAR>1985</YEAR>
</CD>
<CD>
<TITLE>Red</TITLE>
<ARTIST>The Communards</ARTIST>
<COUNTRY>UK</COUNTRY>
<COMPANY>London</COMPANY>
<PRICE>7.80</PRICE>
<YEAR>1987</YEAR>
</CD>
<CD>
<TITLE>Unchain my heart</TITLE>
<ARTIST>Joe Cocker</ARTIST>
<COUNTRY>USA</COUNTRY>
<COMPANY>EMI</COMPANY>
<PRICE>8.20</PRICE>
<YEAR>1987</YEAR>
</CD>
</CATALOG>

希望本文所述对大家的javascript程序设计有所帮助。

起一个好听的名字
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JS通过ajax动态读取xml文件内容的方法
10-24
本篇将详细解析如何使用JavaScript通过AJAX动态读取XML文件内容。 首先，我们需要理解AJAX的工作原理。AJAX的核心是XMLHttpRequest对象，它允许JavaScript在后台与服务器进行通信。当用户触发某个事件（如点击按钮...
php处理ajax xml,Ajax对xml信息的接收和处理操作实例分析
weixin_28822657的博客
03-25 120
本文实例讲述了Ajax对xml信息的接收和处理操作。分享给大家供大家参考，具体如下：Ajax负责请求和接收xml信息，DOM负责处理xml信息。DOM：php中，DOM是php 与 xml(html)之间沟通的桥梁JavaScript中，DOM是JavaScript 与 html(xml)之间沟通的桥梁xml需要从服务器端返回到客户端被JavaScript处理Ajax负责请求xml，DOM(Jav...
ajax读取XML文件并显示到下拉列表框中
weixin_34054866的博客
08-17 161
ajax读取XML文件并显示到下拉列表框中 --XML文件（ExchangeRates.xml） <?xml version="1.0" encoding="utf-8" ?> <!-- List of Exchange Rates --> <ExchangeRates> <currenc...
通过ajax获取xml数据并显示
当你迷路时，放慢一下脚步
11-17 2181
Ajax-js             $(function(){     $("#input").click(function(){     $.ajax({     type:"POST",     url:"http://localhost:8080/AjaxJs/example.xml",     error:function(xml){     alert("err
AJAX读取XML内容并按排列显示
GreatNeyo的专栏
06-05 395
实现功能：点击按扭，显示出JSP页面中通过out.println传过来的xml信息 一、含XML的JSP页面 <% response.setContentType("text/xml"); String txt = request.getParameter("username"); out.println("张三21男"); %> 二、AJAX处理并显示返回页面
ajax动态查询数据库数据并显示在前台的方法
12-04
在本文中，我们将深入探讨如何使用Ajax技术动态地从数据库查询数据并将其显示在前端页面。Ajax（Asynchronous JavaScript and XML）是一种创建交互式网页应用的技术，它允许页面不需刷新即可与服务器交换数据并更新...
使用Spry轻松将XML数据显示到HTML页的方法
10-30
5. 在“Options”中，可以配置数据集的行为，比如设置自动更新（实时刷新数据）和无刷新显示（使用AJAX技术）。 6. 绑定数据到HTML元素。使用`<spry:repeat>`或`<tr spry:repeat>`等 Spry 标签，循环遍历XML数据，并...
AJAX+JSP实现读取XML内容并按排列显示输出的方法示例
10-18
主要介绍了AJAX+JSP实现读取XML内容并按排列显示输出的方法,结合实例形式分析了ajax与后台jsp页面交互实现xml内容的排列输出相关操作技巧,需要的朋友可以参考下
ajax读取xml内容方法,JS通过ajax动态读取xml文件内容的方法
weixin_32795125的博客
08-06 325
本文实例讲述了JS通过ajax动态读取xml文件内容的方法。分享给大家供大家参考。具体分析如下：下面的JS代码读取note.xml文件，并填充显示相关字段HTML文件代码如下function loadXMLDoc(url){var xmlhttp;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrome, Opera, Safarix...
Ajax读取XML文件实例
07-21
利用Ajax读取XML文件实例，实现简单的无刷新效果
使用JSP+XML实现数据存储和动态显示
07-04
使用JSP+XML实现数据存储和动态显示
jQuery+ajax读取并解析XML文件的方法
milijiangjun的博客
06-12 2523
转自自：https://www.jb51.net/article/92329.htmajax.xml：?1234567891011&lt;?xml version="1.0" encoding="UTF-8"?&gt;&lt;stulist&gt;&lt;student email="1@1.com"&gt;&lt;name&gt;zhangsan&lt;/name
ajax获取xml数据并使用,JS使用ajax从xml文件动态获取数据显示的方法
weixin_39831170的博客
08-06 441
本文实例讲述了JS使用ajax从xml文件动态获取数据显示的方法。分享给大家供大家参考。具体分析如下：下面的JS代码通过ajax检索xml文件的内容动态展示到网页，真个页面无刷新function loadXMLDoc(url){var xmlhttp;var txt,x,xx,i;if (window.XMLHttpRequest){// code for IE7+, Firefox, Chrom...
js的静态获取和动态获取
weixin_45243726的博客
11-04 1467
一、动态获取 1、getElementById() 2、getElementsByClassName() //返回伪数组 3、getElementsByTagName()//返回伪数组 4、getELementsByName() //返回伪数组 二、静态获取 1、querySelector():根据css选择器来获取对象，获取的是第一个满足条件的元素，返回一个节点对象 2、querySelectorAll():根据css选择器来获取对象，获取的是所有满足条件的元素，返回一个伪数组 ...
用Ajax读取xml文件的简单例子
huminghai的专栏
11-04 481
 Ajax的原理很简单，就是在客户端创建一个XMLHttpRequest对象（用来与服务器进行异步通信，这就是Ajax的核心，其实我们早就在用异步通信了，只是没把这项技术用在网页设计中而已），为该对象的onreadystatechange 属性添加一个事件，当对象的readyState改变的时候就会引发指定的事件。到此就可以就发送请求读取服务器端的XML数据了，最后要做的就是处理数据了。 关于XM
JS通过ajax动态读取xml文件内容
weixin_30379973的博客
01-08 195
http://www.sharejs.com/codes/javascript/8178 HTML文件代码如下 <!DOCTYPE html> <html> <head> <script> function loadXMLDoc(url) { var xmlhttp; if (window.XMLHttpRequest) ...
JS AJAX--- XML文件
望望byte的博客
08-06 199
AJAX 可用于同 XML文件进行交互式通信 AJAX XML 实例 下面的例子演示网页如何通过 AJAX 从 XML 文件读取信息： 当用户点击“获取 CD 信息”按钮时，执行 loadDoc() 函数。 loadDoc() 函数创建 XMLHttpRequest 对象，添加当服务器响应就绪时执行的函数，并向服务器发送请求。 当服务器响应就绪后，构建 HTML 表格，从 XML 文件提取节点（因素），最后使用由 XML 数据填充的 HTML 表格对元素“demo”进行更新： <!DOCTYP.
用Ajax和JavaScript实现对XML的解析
qq_42109746的博客
12-07 302
用Ajxa和JavaScript实现省份城市的三级联动 以下是要解析的XML文件（data.xml）： &lt;?xml version="1.0" encoding="utf-8" ?&gt; &lt;provicelist&gt;   &lt;provice&gt;     &lt;name&gt;上海&lt;/name&gt;     &lt;citylist&
DOM方法详解：AJAX在XML文档中的应用与XMLHttpRequest对象
本文档主要介绍了如何在Java AJAX环境中处理XML文档的DOM方法...这篇文档为开发者提供了处理XML文档的DOM方法在Java AJAX环境中的详细操作指南，有助于理解如何利用DOM技术结合AJAX来实现动态网页和高效的前后端交互。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值