编程 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实现检测浏览器及版本的脚本代码

Jan 22 Javascript

基于javascript的COOkie的操作实现只能点一次

Dec 26 Javascript

js实现iGoogleDivDrag模块拖动层拖动特效的方法

Mar 04 Javascript

javascript解析xml实现省市县三级联动的方法

Jul 25 Javascript

JavaScript中的Array 对象（数组对象）

Jun 02 Javascript

深入理解Commonjs规范及Node模块实现

May 17 Javascript

详解Vue2中组件间通信的解决全方案

Jul 28 Javascript

ionic App问题总结系列之ionic点击系统返回键退出App

Aug 19 Javascript

Vue中使用clipboard实现复制功能

Sep 05 Javascript

React 路由懒加载的几种实现方案

Oct 23 Javascript

Nuxt.js实战和配置详解

Aug 05 Javascript

小程序如何支持使用 async/await详解

Sep 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

Discuz 5.0 中读取纯真IP数据库函数分析

2007/03/16 PHP

PHP SEO优化之URL优化方法

2011/04/21 PHP

PHP新手NOTICE错误常见解决方法

2011/12/07 PHP

PHP文件注释标记及规范小结

2012/04/01 PHP

PHP中strnatcmp()函数“自然排序算法”进行字符串比较用法分析(对比strcmp函数)

2016/01/07 PHP

php 基础函数

2017/02/10 PHP

PHP调用QQ互联接口实现QQ登录网站功能示例

2019/10/24 PHP

php判断某个方法是否存在函数function_exists (),method_exists()与is_callable()区别与用法解析

2020/04/20 PHP

JQuery 解析多维的Json数据格式

2009/11/02 Javascript

用jquery和json从后台获得数据集的代码

2011/11/07 Javascript

js 调用本地exe的例子(支持IE内核的浏览器)

2012/12/26 Javascript

iframe子页面获取父页面元素的方法

2013/11/05 Javascript

jquery实现点击消失的代码

2014/03/03 Javascript

JavaScript操作cookie类实例

2015/03/31 Javascript

JavaScript简单下拉菜单实例代码

2015/09/07 Javascript

jquery获取复选框checkbox的值实现方法

2016/05/30 Javascript

jquery mobile 实现自定义confirm确认框效果的简单实例

2016/06/17 Javascript

对jQuary选择器的全面总结

2016/06/20 Javascript

Js获取当前日期时间及格式化代码

2016/09/17 Javascript

浅谈react 同构之样式直出

2017/11/07 Javascript

Vue 2.0 中依赖注入 provide/inject组合实战

2019/06/20 Javascript

Vue-cli3项目引入Typescript的实现方法

2019/10/18 Javascript

vue3.0 自适应不同分辨率电脑的操作

2021/02/06 Vue.js

[01:03]悬念揭晓 11月26日DOTA2完美盛典不见不散

2017/11/23 DOTA

[44:22]完美世界DOTA2联赛循环赛 FTD vs PXG BO2第一场 11.01

2020/11/02 DOTA

Python中使用PIL库实现图片高斯模糊实例

2015/02/08 Python

Linux下通过python获取本机ip方法示例

2019/09/06 Python

实现Python与STM32通信方式

2019/12/18 Python

Hanro官网：奢华男士和女士内衣、睡衣和家居服

2018/10/25 全球购物

《商鞅南门立木》教学反思

2014/02/16 职场文书

技术总监管理岗位职责

2014/03/09 职场文书

学生喝酒检讨书500字

2014/11/02 职场文书

大专护理专业自荐信

2015/03/25 职场文书

opencv读取视频并保存图像的方法

2021/06/04 Python

Python中json.load()和json.loads()有哪些区别

2021/06/07 Python