首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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 相关文章推荐
[转]JS宝典学习笔记
Feb 07 Javascript
基于mootools插件实现遮罩层新手引导
May 24 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
浅谈JavaScript函数的四种存在形态
Jun 08 Javascript
纯JS前端实现分页代码
Jun 21 Javascript
JS实现刷新父页面不弹出提示框的方法
Jun 22 Javascript
javascript 中的继承实例详解
May 05 Javascript
详解用node-images 打造简易图片服务器
May 08 Javascript
微信页面弹出键盘后iframe内容变空白的解决方案
Sep 20 Javascript
vue单页缓存存在的问题及解决方案(小结)
Sep 25 Javascript
浅谈JS for循环中使用break和continue的区别
Jul 21 Javascript
javascript实现多边形碰撞检测
Oct 24 Javascript
推荐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
DNS服务器(2) GZIP(2) 对撞机(1) .NET Framework(2) IIS7(1) 粒子对撞机(1) 界面设计(1) DBLink(1) 磁盘分区(1) FTP服务器(1)
You might like
用PHP制作静态网站的模板框架
2006/10/09 PHP
模拟OICQ的实现思路和核心程序(一)
2006/10/09 PHP
php 浮点数比较方法详解
2017/05/05 PHP
laravel 5.3中自定义加密服务的方案详解
2017/05/09 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
input按钮的事件处理大全
2010/12/10 Javascript
使用Jquery来实现可以输入值的下拉选单 雏型
2011/12/06 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
jQuery获得子元素个数的方法
2015/04/14 Javascript
javascript中return，return true,return false三者的用法及区别
2015/11/17 Javascript
jQuery+ajax实现文章点赞功能的方法
2015/12/31 Javascript
基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
2016/02/01 Javascript
轻松掌握jQuery中wrap()与unwrap()函数的用法
2016/05/24 Javascript
JQuery Mobile 弹出式登录框的实现方法
2016/05/28 Javascript
点击按钮出现60秒倒计时的简单js代码(推荐)
2016/06/07 Javascript
Angular2内置指令NgFor和NgIf详解
2016/08/03 Javascript
微信小程序开发之录音机 音频播放 动画实例 (真机可用)
2016/12/08 Javascript
Vue实例简单方法介绍
2017/01/20 Javascript
nodejs获取微信小程序带参数二维码实现代码
2017/04/12 NodeJs
Element 默认勾选表格 toggleRowSelection的实现
2019/09/04 Javascript
[03:51]吞吞映像 每周精彩击杀top10第二弹
2014/06/25 DOTA
[03:11]完美世界DOTA2联赛PWL DAY8集锦
2020/11/09 DOTA
深入解析Python中的集合类型操作符
2015/08/19 Python
python numpy 显示图像阵列的实例
2018/07/02 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
Python如何定义有默认参数的函数
2020/08/10 Python
Python利用Pillow(PIL)库实现验证码图片的全过程
2020/10/04 Python
html5移动端价格输入键盘的实现
2019/09/16 HTML / CSS
人力资源部培训专员岗位职责
2014/01/02 职场文书
协议书格式
2014/04/23 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2015应届毕业生自荐信范文
2015/03/05 职场文书
感恩教育主题班会
2015/08/12 职场文书
那些美到让人窒息的诗句，值得你收藏！
2019/08/20 职场文书