JS通过ajax动态读取xml文件内容的方法


Posted in Javascript onMarch 24, 2015

本文实例讲述了JS通过ajax动态读取xml文件内容的方法。分享给大家供大家参考。具体分析如下:

下面的JS代码读取note.xml文件,并填充显示相关字段

HTML文件代码如下

<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc(url)
{
var xmlhttp;
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)
  {
  document.getElementById('A1').innerHTML=xmlhttp.status;
  document.getElementById('A2').innerHTML=xmlhttp.statusText;
  document.getElementById('A3').innerHTML=xmlhttp.responseText;
  }
 }
xmlhttp.open("GET",url,true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>Retrieve data from XML file</h2>
<p><b>Status:</b><span id="A1"></span></p>
<p><b>Status text:</b><span id="A2"></span></p>
<p><b>Response:</b><span id="A3"></span></p>
<button onclick="loadXMLDoc('note.xml')">Get XML data</button>
</body>
</html>

xml文件内容如下

<note>
<to>Tove</to>
<from>Jani</from>
<heading>Reminder</heading>
<body>Don't forget me this weekend!</body>
</note>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
一些javascript一些题目的解析
Dec 25 Javascript
再谈javascript图片预加载技术(详细演示)
Mar 12 Javascript
JavaScript中json对象和string对象之间相互转化
Dec 26 Javascript
Jquery实现的tab效果可以指定默认显示第几页
Oct 16 Javascript
JS将数字转换成三位逗号分隔的样式(示例代码)
Feb 19 Javascript
JavaScript实现的圆形浮动标签云效果实例
Aug 06 Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 Javascript
javascript 中的try catch应用总结
Apr 01 Javascript
vue插件vue-resource的使用笔记(小结)
Aug 04 Javascript
小程序自定义组件实现城市选择功能
Jul 18 Javascript
vue中音频wavesurfer.js的使用方法
Feb 20 Vue.js
全面解析JavaScript Module模式
Jul 24 Javascript
使用JavaScript 实现的人脸检测
Mar 24 #Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 #Javascript
JS使用ajax从xml文件动态获取数据显示的方法
Mar 24 #Javascript
推荐10 款 SVG 动画的 JavaScript 库
Mar 24 #Javascript
JavaScript中textRange对象使用方法小结
Mar 24 #Javascript
jQuery实现防止提交按钮被双击的方法
Mar 24 #Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 #Javascript
You might like
世界咖啡生产者论坛呼吁:需要立即就咖啡价格采取认真行动
2021/03/06 咖啡文化
Extended CHM PHP 语法手册之 DIY
2006/10/09 PHP
15种PHP Encoder的比较
2007/04/17 PHP
比较简单的百度网盘文件直链PHP代码
2013/03/24 PHP
PHP实现文件下载详解
2014/11/27 PHP
老生常谈PHP面向对象之标识映射
2017/06/21 PHP
JavaScript中Object和Function的关系小结
2009/09/26 Javascript
浅析JavaScript中的事件机制
2015/06/04 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
jquery通过name属性取值的简单实现方法
2016/06/20 Javascript
js删除Array数组中指定元素的两种方法
2016/08/03 Javascript
JS简单实现数组去重的方法示例
2017/03/27 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
Vue之mixin全局的用法详解
2018/08/22 Javascript
Python 可爱的大小写
2008/09/06 Python
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python列表计数及插入实例
2014/12/17 Python
Python中比较特别的除法运算和幂运算介绍
2015/04/05 Python
简单介绍Python中的filter和lambda函数的使用
2015/04/07 Python
python与C互相调用的方法详解
2017/07/14 Python
python+selenium定时爬取丁香园的新型冠状病毒数据并制作出类似的地图(部署到云服务器)
2020/02/09 Python
python爬虫学习笔记之Beautifulsoup模块用法详解
2020/04/09 Python
可视化pytorch 模型中不同BN层的running mean曲线实例
2020/06/24 Python
Python实现邮件发送的详细设置方法(遇到问题)
2021/01/18 Python
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
Dune London官网:英国著名奢华鞋履品牌
2017/11/30 全球购物
中学生学习生活的自我评价
2013/10/26 职场文书
七匹狼男装广告词
2014/03/21 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
2014年设计师工作总结
2014/11/25 职场文书
开学第一周总结
2015/07/16 职场文书
公司环境卫生管理制度
2015/08/05 职场文书
2016护理专业求职自荐书
2016/01/28 职场文书
2019年最新版见习人员管理制度!
2019/07/08 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS