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 text()要注意啦
Oct 30 Javascript
Three.js源码阅读笔记(Object3D类)
Dec 27 Javascript
js使浏览器窗口最大化实现代码(适用于IE)
Aug 07 Javascript
浅谈JavaScript字符集
May 22 Javascript
javascript中createElement的两种创建方式
May 14 Javascript
个人总结的一些JavaScript技巧、实用函数、简洁方法、编程细节
Jun 10 Javascript
BootStrap Tooltip插件源码解析
Dec 27 Javascript
JavaScript 自定义事件之我见
Sep 25 Javascript
vue跨域解决方法
Oct 15 Javascript
微信小程序中使用Async-await方法异步请求变为同步请求方法
Mar 28 Javascript
a标签调用js的方法总结
Sep 05 Javascript
JS中的const命令你真懂它吗
Mar 08 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如何写APP接口详解
2016/08/23 PHP
解决form中action属性后面?传递参数 获取不到的问题
2017/07/21 PHP
php+js实现的无刷新下载文件功能示例
2019/08/23 PHP
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
javascript smipleChart 简单图标类
2011/01/12 Javascript
JQuery入门——用one()方法绑定事件处理函数(仅触发一次)
2013/02/05 Javascript
js获取checkbox复选框选中的选项实例
2014/08/24 Javascript
输入框过滤非数字的js代码
2014/09/18 Javascript
Javascript核心读书有感之表达式和运算符
2015/02/11 Javascript
jquery滚动到顶部底部代码
2015/04/20 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
关于JS 预解释的相关理解
2016/06/28 Javascript
Bootstrap风格的WPF样式
2016/12/07 Javascript
实例分析浏览器中“JavaScript解析器”的工作原理
2016/12/12 Javascript
JS一个简单的注册页面实例
2017/09/05 Javascript
JavaScript比较同一天的时间大小实例代码
2018/02/09 Javascript
jQuery动态操作表单示例【基于table表格】
2018/12/06 jQuery
微信小程序顶部导航栏滑动tab效果
2019/01/28 Javascript
vue+web端仿微信网页版聊天室功能
2019/04/30 Javascript
python实现图片变亮或者变暗的方法
2015/06/01 Python
使用python绘制3维正态分布图的方法
2018/12/29 Python
pycharm修改界面主题颜色的方法
2019/01/17 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
python中np是做什么的
2020/07/21 Python
css3让div随鼠标移动而抖动起来
2014/02/10 HTML / CSS
实习鉴定范文
2013/12/19 职场文书
烹饪自我鉴定
2014/03/01 职场文书
计算机毕业生自荐信
2014/06/12 职场文书
县政协领导班子群众路线教育实践活动四风问题整改方案
2014/10/26 职场文书
党委工作总结2015
2015/04/27 职场文书
2016国培学习心得体会
2016/01/08 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
python字符串的多行输出的实例详解
2021/06/08 Python
MySQL系列之十三 MySQL的复制
2021/07/02 MySQL
vue+elementUI实现表格列的显示与隐藏
2022/04/13 Vue.js