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 相关文章推荐
学习并汇集javascript匿名函数
Nov 25 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 Javascript
js实现多选项切换导航菜单的方法
Feb 06 Javascript
JavaScript中操作Mysql数据库实例
Apr 02 Javascript
基于JavaScript实现移除(删除)数组中指定元素
Jan 04 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
Oct 24 Javascript
微信小程序实现顶部选项卡(swiper)
Jun 19 Javascript
微信小程序视图template模板引用的实例详解
Sep 20 Javascript
Vue全家桶实践项目总结(推荐)
Nov 04 Javascript
angular ng-model 无法获取值的处理方法
Oct 02 Javascript
vue vantUI实现文件(图片、文档、视频、音频)上传(多文件)
Oct 15 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 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
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
PHP反射实际应用示例
2019/04/03 PHP
基于jQuery的动态表格插件
2011/03/28 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
js的各种排序算法实现(总结)
2016/07/23 Javascript
js定时器实例分享
2016/12/20 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
微信小程序 Button 组件详解及简单实例
2017/01/10 Javascript
微信小程序 高德地图SDK详解及简单实例(源码下载)
2017/01/11 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
Vue2.0 多 Tab切换组件的封装实例
2017/07/28 Javascript
小程序开发基础之view视图容器
2018/08/21 Javascript
Element实现表格分页数据选择+全选所有完善批量操作
2019/06/07 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
Python 命令行非阻塞输入的小例子
2013/09/27 Python
Python学习思维导图(必看篇)
2017/06/26 Python
Python矩阵常见运算操作实例总结
2017/09/29 Python
python中yaml配置文件模块的使用详解
2018/04/27 Python
Django开发中的日志输出的方法
2018/07/02 Python
在django中,关于session的通用设置方法
2019/08/06 Python
python3 requests库文件上传与下载实现详解
2019/08/22 Python
css3实现3d旋转动画特效
2015/03/10 HTML / CSS
梅西百货澳大利亚:Macy’s Australia
2017/07/26 全球购物
会计专业毕业生推荐信
2013/11/05 职场文书
教堂婚礼主持词
2014/03/14 职场文书
说明书格式及范文
2014/05/07 职场文书
诚实守信道德模范事迹材料
2014/08/15 职场文书
2014幼儿园教师师德师风演讲稿
2014/09/10 职场文书
小学生校园广播稿
2014/09/28 职场文书
工作时间调整通知
2015/04/24 职场文书
工程服务质量承诺书
2015/04/29 职场文书
MySQL创建管理HASH分区
2022/04/13 MySQL