编程 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 相关文章推荐

Javascript Tab 导航插件 (23个)

Jun 11 Javascript

8个超棒的学习 jQuery 的网站推荐收藏

Apr 02 Javascript

Jquery判断IE6等浏览器的代码

Apr 05 Javascript

JS刷新当前页面的几种方法总结

Dec 24 Javascript

Get中文乱码IE浏览器Get中文乱码解决方案

Dec 26 Javascript

jQuery中:animated选择器用法实例

Dec 29 Javascript

JavaScript严格模式详解

Nov 18 Javascript

jquery ztree实现模糊搜索功能

Feb 25 Javascript

Ztree新增角色和编辑角色回显问题的解决

Oct 25 Javascript

Javascript调试之console对象——你不知道的一些小技巧

Jul 10 Javascript

Vue中的slot使用插槽分发内容的方法

Mar 01 Javascript

ES6 Object方法扩展的应用实例分析

Jun 25 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

You might like

php 清除网页病毒的方法

2008/12/05 PHP

PHP 查找字符串常用函数介绍

2012/06/07 PHP

屏蔽机器人从你的网站搜取email地址的php代码

2012/11/14 PHP

Yii入门教程之目录结构、入口文件及路由设置

2014/11/25 PHP

php基于jquery的ajax技术传递json数据简单实例

2016/04/15 PHP

PHP入门教程之操作符与控制结构流程详解

2016/09/09 PHP

php处理静态页面：页面设置缓存时间实例

2017/06/22 PHP

ThinkPHP5.0多个文件上传后找不到临时文件的修改方法

2018/07/30 PHP

PHP示例演示发送邮件给某个邮箱

2019/04/03 PHP

JavaScript中令你抓狂的魔术变量

2006/11/30 Javascript

Javascript 类与静态类的实现(续)

2010/04/02 Javascript

javascript中的prototype属性使用说明(函数功能扩展)

2010/08/16 Javascript

javascript 学习笔记（八）javascript对象

2011/04/12 Javascript

使用node.js 获取客户端信息代码分享

2014/11/26 Javascript

jquery实现简单实用的打分程序实例

2015/07/23 Javascript

jQuery使用contains过滤器实现精确匹配方法详解

2016/02/25 Javascript

JavaScript基础教程——入门必看篇

2016/05/20 Javascript

Spring MVC中Ajax实现二级联动的简单实例

2016/07/06 Javascript

利用Node.js对文件进行重命名

2017/03/12 Javascript

vue组件初学_弹射小球(实例讲解)

2017/09/06 Javascript

js技巧之十几行的代码实现vue.watch代码

2018/06/09 Javascript

vue实现表单录入小案例

2019/09/27 Javascript

JavaScript 反射和属性赋值实例解析

2019/10/28 Javascript

详细分析vue表单数据的绑定

2020/07/20 Javascript

用Python写的图片蜘蛛人代码

2012/08/27 Python

基于ID3决策树算法的实现(Python版)

2017/05/31 Python

scrapy数据存储在mysql数据库的两种方式(同步和异步)

2020/02/18 Python

基于python检查SSL证书到期情况代码实例

2020/04/04 Python

python进度条显示之tqmd模块

2020/08/22 Python

Python中qutip用法示例详解

2020/10/02 Python

video下autoplay属性无效的解决方法(添加muted属性)

2020/05/19 HTML / CSS

英国专业美容产品在线：Mylee（从指甲到脱毛）

2020/07/06 全球购物

外企测试工程师面试题

2015/02/01 面试题

婚前协议书范本

2014/10/27 职场文书

2015年度质量工作总结报告

2015/04/27 职场文书

接触艺术对孩子学习思维有益

2019/08/06 职场文书