编程 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表单验证 - Parsley.js使用和配置

Jan 25 Javascript

javascript中常用编程知识

Apr 08 Javascript

浅谈JavaScript事件的属性列表

Mar 01 Javascript

jquery实现仿Flash的横向滑动菜单效果代码

Sep 17 Javascript

JQuery实现Ajax加载图片的方法

Dec 24 Javascript

利用yarn实现一个webpack+react种子

Oct 25 Javascript

关于javascript获取内联样式与嵌入式样式的实例

Jun 01 Javascript

微信小程序内拖动图片实现移动、放大、旋转的方法

Sep 04 Javascript

基于vue2.0的活动倒计时组件countdown(附源码下载)

Oct 09 Javascript

在移动端使用vue-router和keep-alive的方法示例

Dec 02 Javascript

React中使用UMEditor的方法示例

Dec 27 Javascript

JS实现碰撞检测效果

Mar 12 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实现zip压缩文件解压缩代码分享（简单易懂）

2014/05/10 PHP

php5.3以后的版本连接sqlserver2000的方法

2014/07/28 PHP

PHP使用Redis替代文件存储Session的方法

2017/02/15 PHP

利用php操作memcache缓存的基础方法示例

2017/08/02 PHP

thinkphp3.2框架中where条件查询用法总结

2019/08/13 PHP

扩展String功能方法

2006/09/22 Javascript

JavaScript高级程序设计阅读笔记（十七） js事件

2012/08/14 Javascript

JS测试显示屏分辨率以及屏幕尺寸的方法

2013/11/22 Javascript

js的正则test,match,exec详细解析

2014/01/29 Javascript

js清空表单数据的两种方式(遍历+reset)

2014/07/18 Javascript

Javascript前端UI框架Kit使用指南之kitjs事件管理

2014/11/28 Javascript

JavaScript简单下拉菜单实例代码

2015/09/07 Javascript

原生js模拟淘宝购物车项目实战

2015/11/18 Javascript

js鼠标经过tab选项卡时实现切换延迟

2017/03/24 Javascript

react-router JS 控制路由跳转实例

2017/06/15 Javascript

JavaScript剩余操作符Rest Operator详解

2019/07/20 Javascript

详解vue 中 scoped 样式作用域的规则

2020/09/14 Javascript

Python multiprocessing模块中的Pipe管道使用实例

2015/04/11 Python

Django中redis的使用方法(包括安装、配置、启动)

2018/02/21 Python

python scrapy重复执行实现代码详解

2019/12/28 Python

python自动下载图片的方法示例

2020/03/25 Python

Python 实现图片转字符画的示例(静态图片,gif皆可)

2020/11/05 Python

中东地区最大的奢侈品市场：The Luxury Closet

2019/04/09 全球购物

开普敦通行证：Cape Town Pass

2019/07/18 全球购物

工商治理实习生的自我评价分享

2014/02/20 职场文书

产品开发计划书

2014/04/27 职场文书

工地质量标语

2014/06/12 职场文书

党员作风建设自查报告

2014/10/23 职场文书

深入开展党的群众路线教育实践活动心得体会

2014/11/05 职场文书

党员思想汇报材料

2014/12/19 职场文书

怎样写离婚协议书

2015/01/26 职场文书

结婚典礼主持词

2015/06/29 职场文书

浅谈golang package中init方法的多处定义及运行顺序问题

2021/05/06 Golang

JVM入门之类加载与字节码技术(类加载与类的加载器)

2021/06/15 Java/Android

python Django框架快速入门教程（后台管理）

2021/07/21 Python

Android开发EditText禁止输入监听及InputFilter字符过滤

2022/06/10 Java/Android