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资料prototype 属性
Mar 13 Javascript
List Information About the Binary Files Used by an Application
Jun 11 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
JavaScript中的eval()函数使用介绍
Dec 31 Javascript
JQuery选择器、过滤器大整理
May 26 Javascript
jQuery实现本地预览上传图片功能
Jan 08 Javascript
Ionic2系列之使用DeepLinker实现指定页面URL
Nov 21 Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 Javascript
VueJs 将接口用webpack代理到本地的方法
Nov 27 Javascript
浅谈在vue中使用mint-ui swipe遇到的问题
Sep 27 Javascript
vue动态循环出的多个select出现过的变为disabled(实例代码)
Nov 10 Javascript
解决antd Form 表单校验方法无响应的问题
Oct 27 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 按指定元素值去除数组元素的实现方法
2011/11/04 PHP
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
Smarty局部缓存的几种方法简介
2014/06/17 PHP
php实现上传图片文件代码
2015/07/19 PHP
实例讲解PHP页面静态化
2018/02/05 PHP
PHP堆栈调试操作简单示例
2018/06/15 PHP
PHP7 标准库修改
2021/03/09 PHP
基于JQuery实现异步刷新的代码(转载)
2011/03/29 Javascript
js 静态动态成员 and 信息的封装和隐藏
2011/05/29 Javascript
学习JavaScript的最佳方法分享
2011/10/21 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
Javscript调用iframe框架页面中函数的方法
2014/11/01 Javascript
JavaScript中两个字符串的匹配
2016/06/08 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
vue使用自定义指令实现拖拽
2021/01/29 Javascript
vue 解决computed修改data数据的问题
2019/11/06 Javascript
Vue中正确使用Element-UI组件的方法实例
2020/10/13 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[04:52]DOTA2亚洲邀请赛附加赛 TOP10精彩集锦
2015/01/29 DOTA
[52:02]完美世界DOTA2联赛PWL S2 FTD.C vs SZ 第一场 11.27
2020/11/30 DOTA
python实现简单ftp客户端的方法
2015/06/28 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
Python3随机漫步生成数据并绘制
2018/08/27 Python
Python运维开发之psutil库的使用详解
2018/10/18 Python
python+pyqt5编写md5生成器
2019/03/18 Python
Html5获取高德地图定位天气的方法
2019/12/26 HTML / CSS
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
单身旅行者的单身假期:Just You
2018/04/08 全球购物
Internet体系结构
2014/12/21 面试题
90后毕业生的求职信范文
2013/09/21 职场文书
毕业证丢失证明范本
2014/09/20 职场文书
中秋客户感谢信
2015/01/22 职场文书
社区干部培训心得体会
2016/01/06 职场文书
Go语言基础切片的创建及初始化示例详解
2021/11/17 Golang
mysql的Buffer Pool存储及原理
2022/04/02 MySQL