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 相关文章推荐
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
jQuery实现的一个tab切换效果内部还嵌有切换
Aug 10 Javascript
javascript使用smipleChart实现简单图表
Jan 02 Javascript
JS处理json日期格式化问题
Oct 01 Javascript
谈谈我对JavaScript DOM事件的理解
Dec 18 Javascript
JQuery 传送中文乱码问题的简单解决办法
May 24 Javascript
javascript 利用arguments实现可变长参数
Nov 21 Javascript
JS函数多个参数默认值指定方法分析
Nov 28 Javascript
jQuery基于正则表达式的表单验证功能示例
Jan 21 Javascript
BootStrap 标题设置跨行无效的解决方法
Oct 25 Javascript
Node.js中sequelize时区的配置方法
Dec 10 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
Apr 20 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的相似度计算函数:levenshtein的使用介绍
2013/04/15 PHP
Yii不依赖Model的表单生成器用法实例
2014/12/04 PHP
thinkphp,onethink和thinkox中验证码不显示的解决方法分析
2016/06/06 PHP
php中的依赖注入实例详解
2019/08/14 PHP
laravel入门知识点整理
2020/09/15 PHP
JavaScript版DateAdd和DateDiff函数代码
2012/03/01 Javascript
通过onmouseover选项卡实现img图片的变化
2014/02/12 Javascript
JQuery实现简单的图片滑动切换特效
2015/11/22 Javascript
Angular 应用技巧总结
2016/09/14 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
JavaScript时间戳与时间日期间相互转换
2017/12/11 Javascript
Angular4实现图片上传预览路径不安全的问题解决
2017/12/25 Javascript
Node.js使用Angular简单示例
2018/05/11 Javascript
js数据类型检测总结
2018/08/05 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
js设置鼠标悬停改变背景色实现详解
2019/06/26 Javascript
微信小程序嵌入腾讯视频源过程详解
2019/08/08 Javascript
Vue实现简单的跑马灯
2020/05/25 Javascript
JS的时间格式化和时间戳转换函数示例详解
2020/07/27 Javascript
[46:25]DOTA2上海特级锦标赛主赛事日 - 4 败者组第五轮 MVP.Phx VS EG第二局
2016/03/05 DOTA
深入理解Python对Json的解析
2017/02/14 Python
python中ASCII码和字符的转换方法
2018/07/09 Python
python操作日志的封装方法(两种方法)
2019/05/23 Python
python 一篇文章搞懂装饰器所有用法(建议收藏)
2019/08/23 Python
Python 共享变量加锁、释放详解
2019/08/28 Python
python实现银行实战系统
2020/02/26 Python
Mysql数据库反向生成Django里面的models指令方式
2020/05/18 Python
python如何代码集体右移
2020/07/20 Python
智乐游戏测试笔试题
2014/05/21 面试题
专升本学生毕业自我鉴定
2014/10/04 职场文书
太空授课观后感
2015/06/17 职场文书
聘任通知书
2015/09/21 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
十大最强水系宝可梦,最美宝可梦排第三,榜首大家最熟悉
2022/03/18 日漫
netty 实现tomcat的示例代码
2022/06/05 Servers