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 IFrame 强制刷新代码
Jul 23 Javascript
event.X和event.clientX的区别分析
Oct 06 Javascript
用js来刷新当前页面保留参数的具体实现
Dec 23 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
Dec 18 Javascript
javascript模拟命名空间
Apr 17 Javascript
canvas实现图像放大镜
Feb 06 Javascript
鼠标拖动改变DIV等网页元素的大小的实现方法
Jul 06 Javascript
vue2.x select2 指令封装详解
Oct 12 Javascript
JavaScript查看代码运行效率console.time()与console.timeEnd()用法
Jan 18 Javascript
详解Js里的for…in和for…of的用法
Mar 28 Javascript
vue 封装 Adminlte3组件的实现
Mar 18 Javascript
js中Map和Set的用法及区别实例详解
Feb 15 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
Apache环境下PHP利用HTTP缓存协议原理解析及应用分析
2010/02/16 PHP
Smarty Foreach 使用说明
2010/03/23 PHP
PHP如何利用P3P实现跨域
2013/08/24 PHP
PHP实现对图片的反色处理功能【测试可用】
2018/02/01 PHP
javascript下操作css的float属性的特殊写法
2007/08/22 Javascript
js 复制或插入Html的实现方法小结
2010/05/19 Javascript
jQuery实现 注册时选择阅读条款 左右移动
2013/04/11 Javascript
在Javascript中 声明时用&quot;var&quot;与不用&quot;var&quot;的区别
2013/04/15 Javascript
JS获取url链接字符串 location.href
2013/12/23 Javascript
2014最热门的JavaScript代码高亮插件推荐
2014/11/25 Javascript
深入解析JavaScript中的立即执行函数
2016/05/21 Javascript
基于BootStrap的图片轮播效果展示实例代码
2016/05/23 Javascript
JavaScript中Number对象的toFixed() 方法详解
2016/09/02 Javascript
jQuery使用JSONP实现跨域获取数据的三种方法详解
2017/05/04 jQuery
jQuery Datatables表头不对齐的解决办法
2017/11/27 jQuery
Vue多选列表组件深入详解
2021/03/02 Vue.js
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[50:27]Secret vs VG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python使用cPickle模块序列化实例
2014/09/25 Python
python: 判断tuple、list、dict是否为空的方法
2018/10/22 Python
用Python实现读写锁的示例代码
2018/11/05 Python
使用pycharm设置控制台不换行的操作方法
2019/01/19 Python
pycharm重命名文件的方法步骤
2019/07/29 Python
Python代码中如何读取键盘录入的值
2020/05/27 Python
日本最大的药妆连锁店:Matsukiyo松本清药妆店
2017/11/23 全球购物
Shopty西班牙:缝纫机在线销售
2018/01/26 全球购物
介绍一下Linux中的链接
2016/06/05 面试题
卫校护理专业毕业生求职信
2013/11/26 职场文书
网上开商店的创业计划书
2014/01/19 职场文书
土地转让协议书范本
2014/04/15 职场文书
质量提升方案
2014/06/16 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
公司离职证明标准格式
2014/11/18 职场文书
优秀共青团员事迹材料
2014/12/25 职场文书
导游词之张家界
2019/10/31 职场文书
Nginx如何配置Http、Https、WS、WSS的方法步骤
2021/05/11 Servers