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 相关文章推荐
jquery获得页面元素的坐标值实现思路及代码
Apr 15 Javascript
JavaScript判断textarea值是否为空并给出相应提示
Sep 04 Javascript
Jquery搜索父元素操作方法
Feb 10 Javascript
jQuery图片轮播滚动切换代码分享
Apr 20 Javascript
JS+CSS实现经典的左侧竖向滑动菜单效果
Sep 23 Javascript
JS实现的网页背景闪电闪烁效果代码
Oct 17 Javascript
JavaScript地理位置信息API
Jun 11 Javascript
jquery 判断div show的状态实例
Dec 03 Javascript
js实现城市级联菜单的2种方法
Jun 23 Javascript
vue store之状态管理模式的详细介绍
Jun 13 Javascript
浅谈vue单页面中有多个echarts图表时的公用代码写法
Jul 19 Javascript
小程序实现筛子抽奖
May 26 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
基于mysql的论坛(1)
2006/10/09 PHP
六酷社区论坛HOME页清新格调免费版 下载
2007/03/07 PHP
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
用PHP为SHOPEX增加日志功能代码
2010/07/02 PHP
php中url传递中文字符,特殊危险字符的解决方法
2013/08/17 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
PHP中让curl支持sock5的代码实例
2015/01/21 PHP
jQuery入门第一课 jQuery选择符
2010/03/14 Javascript
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
javascript模拟地球旋转效果代码实例
2013/12/02 Javascript
JS获取下拉框显示值和判断单选按钮的方法
2015/07/09 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
2015/10/29 Javascript
nodejs初步体验篇
2015/11/23 NodeJs
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
React创建组件的三种方式及其区别
2017/01/12 Javascript
浅析JS抽象工厂模式
2017/12/14 Javascript
解决Vue2.0中使用less给元素添加背景图片出现的问题
2018/09/03 Javascript
webpack4+express+mongodb+vue实现增删改查的示例
2018/11/08 Javascript
用VueJS写一个Chrome浏览器插件的实现方法
2019/02/27 Javascript
Vue实现按钮级权限方案
2019/11/21 Javascript
jquery实现图片无缝滚动 蒙版遮蔽效果
2020/01/11 jQuery
vue制作toast组件npm包示例代码
2020/10/29 Javascript
Python数据结构与算法之图的基本实现及迭代器实例详解
2017/12/12 Python
Pytorch入门之mnist分类实例
2018/04/14 Python
Python绘制热力图示例
2019/09/27 Python
python 读写文件包含多种编码格式的解决方式
2019/12/20 Python
Python控制台输出时刷新当前行内容而不是输出新行的实现
2020/02/21 Python
详解tf.device()指定tensorflow运行的GPU或CPU设备实现
2021/02/20 Python
全世界最美丽的四星和五星级酒店预订:Prestigia.com
2017/11/15 全球购物
财务人员个人求职信范文
2013/12/04 职场文书
关于幸福的感言
2015/08/03 职场文书
vue实现简单数据双向绑定
2021/04/28 Vue.js
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
Go 内联优化让程序员爱不释手
2022/06/21 Golang