JS跨浏览器解析XML应用过程详解


Posted in Javascript onOctober 16, 2020

首先介绍简单的理论:

对于XML,我们可以理解它是一种树结构,它包含根,元素,属性,文本等内容。不同浏览器都有自己的解析器,把XML读入内存,并把它转换为可被 JavaScript 访问的 XML DOM 对象。

微软的 XML 解析器与其他浏览器中的解析器是有差异的。微软的解析器支持对 XML 文件和 XML 字符串(文本)的加载,而其他浏览器使用单独的解析器。不过,所有的解析器都含有遍历 XML 树、访问、插入及删除节点的函数。

如果你使用的是一个本地文件或者网络文件且该文件在是在本服务器,那么对于IE和其他浏览器来说都可以通过load(uRl),loadXML(strXML)来创建Xdom对象。但是对于文本,除IE外需要一个单独的解析器来处理。

以下函数用于根据不同的浏览器来创建Xdom对象:

function loadXMLDoc() { 
  var xmlDoc; 
  // code for IE 
  if (window.ActiveXObject){ 
   xmlDoc=new ActiveXObject("Microsoft.XMLDOM");//创建空的微软 XML 文档对象 
   //xmlDoc.load(uRl); 
   //loadXML() 方法用于加载字符串(文本),而 load() 用于加载文件 
   xmlDoc.loadXML(xmlstr); 
  } 
  // code for Mozilla, Firefox, Opera, etc. 
  else if(document.implementation&&document.implementation.createDocument){  
   xmlDoc=document.implementation.createDocument("","",null); 
   //xmlDoc.load(uRl); 
   //Internet Explorer 使用 loadXML() 方法来解析 XML 字符串,而其他浏览器使用 DOMParser 对象 
   parser=new DOMParser(); 
   xmlDoc=parser.parseFromString(txt,"text/xml"); 
  }else{ 
   alert('Your browser cannot handle this script'); 
  } 
  //关闭异步加载,这样可确保在文档完整加载之前,解析器不会继续执行脚本 
  xmlDoc.async=false;  
  createTable(xmlDoc); 
}

方法内有具体的解析,我不再??拢?杂诮馕龅哪谌荩?治?址??臀谋玖街帧?/p>

首先定义一个字符串:

var xmlstr="<?xml version=\"1.0\" encoding=\"UTF-8\"?><goodss><goods id=\"1\"><name>数码相机</name><price>3206(元)</price></goods><goods id=\"2\"><name>联想笔记本电脑</name><price>3206(元)</price></goods></goodss>";

然后定义一个goods.xml文件:

文件内容为:

<?xml version="1.0" encoding="UTF-8"?> 
<goodss> 
  <goods id="1"> 
    <name>数码相机</name> 
    <price>3206(元)</price> 
  </goods> 
  <goods id="2"> 
    <name>联想笔记本电脑</name> 
    <price>3206(元)</price> 
  </goods> 
</goodss>

通过取消和注释方式来选择是文本还是字符串。

这个方法可以是通用的,下面再来解析这个Xdom对象:

function createTable(xmldoc){ 
  var goodss=xmldoc.getElementsByTagName("goods"); 
  for(var i=0;i<goodss.length;i++){ 
    var g=goodss[i]; 
    if (g.nodeType==1){ 
      var name=g.getElementsByTagName("name")[0].childNodes[0].nodeValue; 
      var price=g.getElementsByTagName("price")[0].childNodes[0].nodeValue; 
      var id=g.getAttribute("id"); 
      document.write(id + "-->" + name + "-->" + price); 
      document.write("<br />"); 
    } 
  }   
}

对于使用到的函数和属性我们来解析一下:

/* 
一些典型的 DOM 属性 
x.nodeName - x 的名称 
x.nodeValue - x 的值 
x.parentNode - x 的父节点 
x.childNodes - x 的子节点 
x.attributes - x 的属性节点 
x.firstChild - x 的第一个子节点,等同于childNodes[0] 
x.lastChild - x 的最后一个子节点 
x.data - x 的内容,等同nodeValue 
x.length - x 的长度 
x.nodeType - x 的类型:1,元素,2,属性,3,文本,4,注释,5,文档 
在上面的列表中,x 是一个节点对象 
XML DOM 方法 
x.getElementsByTagName(name) - 获取带有指定标签名称的所有元素,返回的是数组 
x.getAttribute(name) - 返回属性的值 
*/ 
/*出于安全方面的原因,现代的浏览器不允许跨域的访问。 
这意味着,网页以及它试图加载的 XML 文件,都必须位于相同的服务器上。 
否则,xmlDoc.load() 将产生错误 "Access is denied"。 
*/

早页面增加一个按钮来调用函数:

<input type="button" name="bxml" value="Read" onclick="loadXMLDoc()" />

页面将会输出XMl内节点的属性和子节点的内容。对于一般应用来说,我觉得上面内容已经足够了。我会在之后补充一些其他操作。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
Jul 31 Javascript
jquery拖动插件(jquery.drag)使用介绍
Jun 18 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
动态载入js提高网页打开速度的方法
Jul 04 Javascript
浅析jQuery Mobile的初始化事件
Dec 03 Javascript
原生JS实现简单放大镜效果
Feb 08 Javascript
深入浅出es6模板字符串
Aug 26 Javascript
详解vue项目中使用token的身份验证的简单实践
Mar 08 Javascript
深入理解es6块级作用域的使用
Mar 28 Javascript
Vue项目中使用WebUploader实现文件上传的方法
Jul 21 Javascript
vue-quill-editor插入图片路径太长问题解决方法
Jan 08 Vue.js
JavaScript实现消消乐的源代码
Jan 12 Javascript
JS实现简易图片自动轮播
Oct 16 #Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 #Javascript
基于JQuery和DWR实现异步数据传递
Oct 16 #jQuery
JS绘图Flot应用图形绘制异常解决方案
Oct 16 #Javascript
swiper4实现移动端导航栏tab滑动切换
Oct 16 #Javascript
JS highcharts动态柱状图原理及实现
Oct 16 #Javascript
如何手动实现一个 JavaScript 模块执行器
Oct 16 #Javascript
You might like
正则表达式语法
2006/10/09 Javascript
thinkPHP删除前弹出确认框的简单实现方法
2016/05/16 PHP
PHP树形结构tree类用法示例
2019/02/01 PHP
基于Jquery实现表格动态分页实现代码
2011/06/21 Javascript
ECMAScript6的新特性箭头函数(Arrow Function)详细介绍
2014/06/07 Javascript
网页收藏夹显示ICO图标(代码少)
2015/08/04 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
node.js实现端口转发
2016/04/14 Javascript
值得分享的Bootstrap Table使用教程
2016/11/23 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
2016/11/25 Javascript
如何防止INPUT按回车自动提交表单FORM
2016/12/06 Javascript
vue省市区三联动下拉选择组件的实现
2017/04/28 Javascript
基于JavaScript实现简单的音频播放功能
2018/01/07 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
大转盘抽奖小程序版 转盘抽奖网页版
2020/04/16 Javascript
js Math数学简单使用操作示例
2020/03/13 Javascript
jquery+css3实现的经典弹出层效果示例
2020/05/16 jQuery
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python编写百度贴吧的简单爬虫
2015/04/02 Python
Python正则表达式匹配HTML页面编码
2015/04/08 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
python实现通过队列完成进程间的多任务功能示例
2019/10/28 Python
为什么说python适合写爬虫
2020/06/11 Python
python用tkinter实现一个gui的翻译工具
2020/10/26 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
大四自我鉴定范文
2013/10/06 职场文书
应届大学生简历中的自我评价
2014/01/15 职场文书
八一演出活动方案
2014/02/03 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
社区工作者个人总结
2015/02/28 职场文书
大学生十八大感想
2015/08/11 职场文书
《酸的和甜的》教学反思
2016/02/18 职场文书
2016医师资格考试考生诚信考试承诺书
2016/03/25 职场文书
详解CSS故障艺术
2021/05/25 HTML / CSS
mysql聚集索引、辅助索引、覆盖索引、联合索引的使用
2022/02/12 MySQL