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 相关文章推荐
js 动态添加标签(新增一行,其实很简单,就是几个函数的应用)
Mar 26 Javascript
JavaScript 构造函数 面相对象学习必备知识
Jun 09 Javascript
jQuery实现灰蓝风格标准二级下拉菜单效果代码
Aug 31 Javascript
jquery trigger实现联动的方法
Feb 29 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
vue登录注册及token验证实现代码
Dec 14 Javascript
vue2.0 资源文件assets和static的区别详解
Apr 08 Javascript
Webpack path与publicPath的区别详解
May 03 Javascript
AngularJS 事件发布机制
Aug 28 Javascript
使用koa2创建web项目的方法步骤
Mar 12 Javascript
利用Electron简单撸一个Markdown编辑器的方法
Jun 10 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分页函数
2006/07/08 PHP
PHP获取昨天、今天及明天日期的方法
2016/02/03 PHP
根据判断浏览器类型屏幕分辨率自动调用不同CSS的代码
2007/02/22 Javascript
ExtJs默认的字体大小改变的几种方法(自己整理)
2013/04/18 Javascript
jsonp原理及使用
2013/10/28 Javascript
JavaScript开发人员的10个关键习惯小结
2014/12/05 Javascript
基于javascript实现的快速排序
2016/12/02 Javascript
DropDownList实现可输入可选择(两种版本可选)
2016/12/07 Javascript
微信小程序 122100版本更新问题解决方案
2016/12/22 Javascript
在vue项目中使用md5加密的方法
2018/09/14 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
微信小程序如何使用canvas二维码保存至手机相册
2019/07/15 Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
2020/05/14 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
[01:43]倾听DOTA2英雄之声 魅惑魔女国服配音鉴赏
2013/06/06 DOTA
Python中使用urllib2防止302跳转的代码例子
2014/07/07 Python
python编程开发之类型转换convert实例分析
2015/11/13 Python
详解Python中类的定义与使用
2017/04/11 Python
神经网络相关之基础概念的讲解
2018/12/29 Python
Python Pandas 如何shuffle(打乱)数据
2019/07/30 Python
利用Python中的Xpath实现一个在线汇率转换器
2020/09/09 Python
ProBikeKit澳大利亚:自行车套件,跑步和铁人三项装备
2016/11/30 全球购物
巴西女装购物网站:Eclectic
2018/04/24 全球购物
荷兰电脑专场:Paradigit
2018/05/05 全球购物
群众路线剖析材料
2014/02/02 职场文书
大学生就业意向书范文
2014/04/01 职场文书
大学优秀班主任事迹材料
2014/05/02 职场文书
感恩母亲节演讲稿
2014/05/07 职场文书
计算机专业自荐信
2014/05/24 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
学习十八届四中全会精神思想汇报
2014/10/23 职场文书
2014年保洁工作总结
2014/11/24 职场文书
2015年采购员工作总结
2015/04/27 职场文书
一小时学会TensorFlow2之基本操作2实例代码
2021/09/04 Python
SQLServer中exists和except用法介绍
2021/12/04 SQL Server