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 06 Javascript
jQuery EasyUI API 中文文档 可调整尺寸
Sep 29 Javascript
可简单避免的三个JS发布错误的详细介绍
Aug 02 Javascript
jquery中animate动画积累的解决方法
Oct 05 Javascript
JavaScript动态修改背景颜色的方法
Apr 16 Javascript
基于JavaScript制作霓虹灯文字 代码 特效
Sep 01 Javascript
jQuery绑定事件-多种实现方式总结
May 09 Javascript
利用Jasmine对Angular进行单元测试的方法详解
Jun 12 Javascript
JS处理数据四舍五入(tofixed与round的区别详解)
Oct 26 Javascript
Vue父组件如何获取子组件中的变量
Jul 24 Javascript
js实现抽奖功能
Nov 24 Javascript
js 数组 fill() 填充方法
Nov 02 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
PHP中Closure类的使用方法及详解
2015/10/09 PHP
使用PHP连接多种数据库的实现代码(mysql,access,sqlserver,Oracle)
2016/12/21 PHP
js跨浏览器实现将字符串转化为xml对象的方法
2013/09/25 Javascript
checkbox勾选判断代码分析
2014/06/11 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
jQuery Validate初步体验(一)
2015/12/12 Javascript
JavaScript中Window对象的属性及事件
2015/12/25 Javascript
JS拖拽组件学习使用
2016/01/19 Javascript
深入剖析javascript中的exec与match方法
2016/05/18 Javascript
JavaScript仿flash遮罩动画效果
2016/06/15 Javascript
CSS3 3D 技术手把手教你玩转
2016/09/02 Javascript
jquery获取下拉框中的循环值
2017/02/08 Javascript
微信小程序 登录的简单实现
2017/04/19 Javascript
微信小程序开发animation心跳动画效果
2017/08/16 Javascript
JS实现简单的选择题测评系统代码思路详解(demo)
2017/09/03 Javascript
Angular4绑定html内容出现警告的处理方法
2017/11/03 Javascript
JavaScript实现的简单加密解密操作示例
2018/06/01 Javascript
Python模块搜索路径代码详解
2018/01/29 Python
Python数据分析之双色球基于线性回归算法预测下期中奖结果示例
2018/02/08 Python
python生成tensorflow输入输出的图像格式的方法
2018/02/12 Python
Python 判断文件或目录是否存在的实例代码
2018/07/19 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
对python操作kafka写入json数据的简单demo分享
2018/12/27 Python
使用TensorFlow实现二分类的方法示例
2019/02/05 Python
为什么python比较流行
2020/06/19 Python
使用Python制作一个数据预处理小工具(多种操作一键完成)
2021/02/07 Python
你的自行车健身专家:FaFit24
2016/11/16 全球购物
戛纳奢侈品商店:Jacques Loup法国
2019/11/04 全球购物
工程开工庆典邀请函
2014/02/01 职场文书
索桥的故事教学反思
2014/02/06 职场文书
2014教师“四风问题”对照检查材料思想汇报
2014/09/16 职场文书
2014年医务科工作总结
2014/12/18 职场文书
css 中多种边框的实现小窍门
2021/04/07 HTML / CSS
python 下载文件的几种方式分享
2021/04/07 Python
MySQL时间盲注的五种延时方法实现
2021/05/18 MySQL