编程 Javascript

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

Posted in Javascript onMarch 24, 2015

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

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

<!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文件内容如下

<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程序设计有所帮助。

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

- Author -

feiwen

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

JQuery 无废话系列教程(一) jquery入门 [推荐]

Jun 23 Javascript

jquery animate 动画效果使用说明

Nov 04 Javascript

jquery中ajax函数执行顺序问题之如何设置同步

Feb 28 Javascript

深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制

Jun 10 Javascript

让IE8浏览器支持function.bind()方法

Oct 16 Javascript

Javascript基础教程之数据类型（字符串 String）

Jan 18 Javascript

Boostrap模态窗口的学习小结

Mar 28 Javascript

jquery简单插件制作(fn.extend)完整实例

May 24 Javascript

AngularJS入门教程之AngularJS 模板

Aug 18 Javascript

通过一个简单的例子学会vuex与模块化

Nov 22 Javascript

微信小程序中如何计算距离某个节日还有多少天

Jul 15 Javascript

深入讲解Vue中父子组件通信与事件触发

Mar 22 Vue.js

推荐10 款 SVG 动画的 JavaScript 库

Mar 24 #Javascript

JavaScript中textRange对象使用方法小结

Mar 24 #Javascript

jQuery实现防止提交按钮被双击的方法

Mar 24 #Javascript

使用AngularJS 应用访问 Android 手机的图片库

Mar 24 #Javascript

jQuery插件实现控制网页元素动态居中显示

Mar 24 #Javascript

jQuery实现提交按钮点击后变成正在处理字样并禁止点击的方法

Mar 24 #Javascript

超级简单实现JavaScript MVC 样式框架

Mar 24 #Javascript

You might like

php 静态变量与自定义常量的使用方法

2010/01/26 PHP

PHP连接操作access数据库实例

2015/03/30 PHP

PHP实现图的邻接矩阵表示及几种简单遍历算法分析

2017/11/24 PHP

JAVASCRIPT IE 与 FF中兼容问题小结

2009/02/18 Javascript

JQuery 网站换肤功能实现代码

2009/11/02 Javascript

关于ExtJS4.1:快捷键支持的问题

2013/04/24 Javascript

jQuery实现按键盘方向键翻页特效

2015/03/18 Javascript

jQuery实现冻结表格行和列

2015/04/29 Javascript

JavaScript+canvas实现七色板效果实例

2016/02/18 Javascript

JavaScript数组操作函数汇总

2016/08/05 Javascript

jQuery组件easyui对话框实现代码

2016/08/25 Javascript

Node.js利用debug模块打印出调试日志的方法

2017/04/25 Javascript

js自定义Tab选项卡效果

2017/06/05 Javascript

Vue 应用中结合vux使用微信 jssdk的方法

2018/08/28 Javascript

解决vue组件props传值对象获取不到的问题

2019/06/06 Javascript

JavaScript代理模式原理与用法实例详解

2020/03/10 Javascript

vue中实现点击变成全屏的多种方法

2020/09/27 Javascript

对于Python的Django框架部署的一些建议

2015/04/09 Python

菜鸟使用python实现正则检测密码合法性

2016/01/05 Python

django表单实现下拉框的示例讲解

2018/05/29 Python

python学生信息管理系统（完整版）

2020/04/05 Python

python之拟合的实现

2019/07/19 Python

使用pandas实现连续数据的离散化处理方式(分箱操作)

2019/11/22 Python

python 通过视频url获取视频的宽高方式

2019/12/10 Python

解决python web项目意外关闭,但占用端口的问题

2019/12/17 Python

Python中sorted()排序与字母大小写的问题

2020/01/14 Python

python实现单机五子棋

2020/08/28 Python

澳大利亚领先的在线药房：Pharmacy Online（有中文站）

2020/02/22 全球购物

贯彻学习两会心得体会范文

2014/03/17 职场文书

主题实践活动总结

2014/05/08 职场文书

求职信格式要求

2014/05/23 职场文书

数控专业毕业生求职信

2014/06/12 职场文书

学校领导班子对照检查材料

2014/08/28 职场文书

小学语文复习计划

2015/01/19 职场文书

各种货币符号快捷输入

2022/02/17 杂记

Nginx+Tomcat负载均衡多实例详解

2022/04/11 Servers