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 学习笔记(十三)Dom创建表格
Jan 21 Javascript
基于jquery打造的百分比动态色彩条插件
Sep 19 Javascript
获取select元素被选中的文本内容的js代码
Jan 29 Javascript
js统计录入文本框中字符的个数并加以限制不超过多少
May 23 Javascript
JavaScript异步回调的Promise模式封装实例
Jun 07 Javascript
jQuery鼠标事件汇总
Aug 30 Javascript
详解JavaScript时间格式化
Dec 23 Javascript
Three.js学习之几何形状
Aug 01 Javascript
浅谈Vuejs Prop基本用法
Aug 17 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
详解AngularJS 过滤器的使用
Jun 02 Javascript
vue-cli3.x配置全局的scss的时候报错问题及解决
Apr 30 Vue.js
使用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删除数组中空值的方法介绍
2014/04/14 PHP
浅谈PHP解析URL函数parse_url和parse_str
2014/11/11 PHP
php返回相对时间(如:20分钟前,3天前)的方法
2015/04/14 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
jQuery 动画弹出窗体支持多种展现方式
2010/04/29 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
JavaScript基础函数整理汇总
2015/01/30 Javascript
javascript中使用new与不使用实例化对象的区别
2015/06/22 Javascript
基于jquery实现全屏滚动效果
2015/11/26 Javascript
分析js闭包引起的事件注册问题
2016/03/29 Javascript
基于jquery实现轮播焦点图插件
2016/03/31 Javascript
javascript检测移动设备横竖屏
2016/05/21 Javascript
Bootstrap CDN和本地化环境搭建
2016/10/26 Javascript
JS编写函数实现对身份证号码最后一位的验证功能
2016/12/29 Javascript
微信小程序 ecshop地址三级联动实现实例代码
2017/02/28 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
Vue SPA 首屏优化方案
2021/02/26 Vue.js
Python引用类型和值类型的区别与使用解析
2017/10/17 Python
python selenium 获取标签的属性值、内容、状态方法
2018/06/22 Python
对pandas的行列名更改与数据选择详解
2018/11/12 Python
Python实现最常见加密方式详解
2019/07/13 Python
简单了解python中的与或非运算
2019/09/18 Python
Python面向对象之继承原理与用法案例分析
2019/12/31 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
详解python内置常用高阶函数(列出了5个常用的)
2020/02/21 Python
纯css3实现的鼠标悬停动画按钮
2014/12/23 HTML / CSS
CSS3自定义滚动条样式的示例代码
2017/08/21 HTML / CSS
柏林通行证:Berlin Pass
2018/04/11 全球购物
Notino瑞典:购买香水和美容产品
2019/07/26 全球购物
物业客服专员岗位职责
2013/11/30 职场文书
领导的自我鉴定
2013/12/28 职场文书
工作会议方案
2014/05/21 职场文书
2014年学生会工作总结
2014/11/07 职场文书
2014年会计个人工作总结
2014/11/24 职场文书
SpringBoot2 参数管理实践之入参出参与校验的方式
2021/06/16 Java/Android