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

首先介绍简单的理论：

对于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);
}

方法内有具体的解析，我不再啰嗦，对于解析的内容，分为字符串和文本两种。

首先定义一个字符串：

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内节点的属性和子节点的内容。对于一般应用来说，我觉得上面内容已经足够了。我会在之后补充一些其他操作。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 微信小程序引入模块中wxml、wxss、js的方法示例

    先描述下目录结构,见下图 UI页面见下图 其中ok按键是引入的log模块,log模块非page页 indexButton是index页本身拥有的组件,index页直接导入Log模块中的组件,css,事件响应函数. 显示效果如下 app.json的内容如下 下面附上 index.js.index.wxml.index.wxss的代码 下面附上 log.js.log.wxml.log.wxss的代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • Python中xml和json格式相互转换操作示例

    Python中xml和json格式相互转换操作示例

    本文实例讲述了Python中xml和json格式相互转换操作.分享给大家供大家参考,具体如下: Python中xml和json格式是可以互转的,就像json格式转Python字典对象那样. xml格式和json格式互转用到的xmltodict库 安装xmltodict库 C:\Users\Administrator>pip3 install xmltodict Collecting xmltodict   Downloading xmltodict-0.11.0-py2.py3-none-any

  • 一文秒懂python读写csv xml json文件各种骚操作

    Python优越的灵活性和易用性使其成为最受欢迎的编程语言之一,尤其是对数据科学家而言. 这在很大程度上是因为使用Python处理大型数据集是很简单的一件事情. 如今,每家科技公司都在制定数据战略. 他们都意识到,拥有正确的数据(干净.尽可能多)会给他们带来关键的竞争优势. 数据,如果使用有效,可以提供深层次的.隐藏在表象之下的信息. 多年来,数据存储的可能格式显著增加,但是,在日常使用中,还是以 CSV . JSON 和 XML 占主导地位. 在本文中,我将与你分享在Python中使用这三种流

  • 微信小程序实现通过js操作wxml的wxss属性示例

    微信小程序实现通过js操作wxml的wxss属性示例

    本文实例讲述了微信小程序实现通过js操作wxml的wxss属性.分享给大家供大家参考,具体如下: 微信小程序如何通过js操作html的css属性: 在web端.手机端.webApp中可以通过js获取dom的方式设置dom属性. 微信小程序中,不能通过这种方式进行操作. 如何在微信小程序中在wxml中操作wxss的属性. 实现思路: 通过利用数据绑定实现动态改变样式, 1.在wxxml标签内嵌css属性上绑定js的date值 2.通过js中绑定css属性的date值改变wxml标签内嵌的css属性

  • java实现Xml与json之间的相互转换操作示例

    java实现Xml与json之间的相互转换操作示例

    本文实例讲述了java实现Xml与json之间的相互转换操作.分享给大家供大家参考,具体如下: 旁白: 最近关于xml与json之间的转换都搞蒙了,这里写一个demo,以后备用. 正题: project格式是: jar包是一个一个检出来的,还算干净了. 代码: 工具类: package exercise.xml; import net.sf.json.JSON; import net.sf.json.JSONSerializer; import net.sf.json.xml.XMLSerial

  • JS XMLHttpRequest原理与使用方法深入详解

    本文实例讲述了JS XMLHttpRequest原理与使用方法.分享给大家供大家参考,具体如下: 你真的会使用XMLHttpRequest吗? 看到标题时,有些同学可能会想:"我已经用xhr成功地发过很多个Ajax请求了,对它的基本操作已经算挺熟练了." 我之前的想法和你们一样,直到最近我使用xhr时踩了不少坑儿,我才突然发现其实自己并不够了解xhr,我知道的只是最最基本的使用. 于是我决定好好地研究一番xhr的真面目,可拜读了不少博客后都不甚满意,于是我决定认真阅读一遍W3C的XML

  • 如何在wxml中直接写js代码(wxs)

    这篇文章主要介绍了如何在wxml中直接写js代码(wxs),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 我们在h5开发中,很多时候要在html中写到js代码,这个很容易实现.但是在微信小程序开发中,是不能直接在wxml中写js代码的,因此就有了wxs.在wxml中用wxs代码,有以下几种方式(在小程序文档中写的很清楚,我只不过是总结下) 第一种:直接在wxml文件中使用<wxs>标签 <wxs module="dateMod

  • JSON是什么？有哪些优点？JSON和XML的区别？

    有一种叫做JSON (JavaScript Object Notation) 的轻量级数据交换格式能够替代XML的工作.它就是JSON.各语言对JSON支持的特别好,自从Ajax的流行,JSON格式传输就更流行了. 一.JSON是什么? 有一种叫做JSON (JavaScript Object Notation) 的轻量级数据交换格式能够替代XML的工作.它就是JSON. 数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小. 易于解析这种语言, 客户端JavaScript可以简单的通过

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

    首先介绍简单的理论: 对于XML,我们可以理解它是一种树结构,它包含根,元素,属性,文本等内容.不同浏览器都有自己的解析器,把XML读入内存,并把它转换为可被 JavaScript 访问的 XML DOM 对象. 微软的 XML 解析器与其他浏览器中的解析器是有差异的.微软的解析器支持对 XML 文件和 XML 字符串(文本)的加载,而其他浏览器使用单独的解析器.不过,所有的解析器都含有遍历 XML 树.访问.插入及删除节点的函数. 如果你使用的是一个本地文件或者网络文件且该文件在是在本服务器,

  • JAVA DOM解析XML文件过程详解

    JAVA DOM解析XML文件过程详解

    这篇文章主要介绍了JAVA DOM解析XML文件过程详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 代码如下 import java.io.IOException; import javax.xml.parsers.*; import org.w3c.dom.Document; import org.w3c.dom.Element; import org.w3c.dom.NamedNodeMap; import org.w3c.dom.No

  • JS实现的跨浏览器解析XML文件实例

    本文实例讲述了JS实现的跨浏览器解析XML文件的方法.分享给大家供大家参考,具体如下: 下列代码把一个 XML 文档 ("note.xml") 载入 XML 解析器中: <script type="text/javascript"> function GetXmlHttpObject() { var xmlHttp=null; try { // Firefox, Opera 8.0+, Safari xmlHttp=new XMLHttpRequest(

  • JavaScript处理解析JSON数据过程详解

    JSON (JavaScript Object Notation)一种简单的数据格式,比xml更轻巧. JSON 是 JavaScript 原生格式,这意味着在 JavaScript 中处理 JSON 数据不需要任何特殊的 API 或工具包. JSON的规则很简单: 对象是一个无序的"'名称/值'对"集合.一个对象以"{"(左括号)开始,"}"(右括号)结束.每个"名称"后跟一个":"(冒号):"

  • JAVA通过XPath解析XML性能比较详解

    JAVA通过XPath解析XML性能比较详解

    最近在做一个小项目,使用到XML文件解析技术,通过对该技术的了解和使用,总结了以下内容. 1 XML文件解析的4种方法 通常解析XML文件有四种经典的方法.基本的解析方式有两种,一种叫SAX,另一种叫DOM.SAX是基于事件流的解析,DOM是基于XML文档树结构的解析.在此基础上,为了减少DOM.SAX的编码量,出现了JDOM,其优点是,20-80原则(帕累托法则),极大减少了代码量.通常情况下JDOM使用时满足要实现的功能简单,如解析.创建等要求.但在底层,JDOM还是使用SAX(最常用).D

  • PHP使用xpath解析XML的方法详解

    本文实例讲述了PHP使用xpath解析XML的方法.分享给大家供大家参考,具体如下: XML文件在PHP网站开发的轻量级应用中使用非常广泛,而PHP解析和读取XML文件的方式有很多种,比如JS DOM.SimpleXml.Xpath等方式解析XML文件,今天来讲讲在PHP中使用Xpath解析XML的实例,同时通过Xpath解析XML的实例来介绍部分基础的Xpath语法. Xpath是什么? Xapth主要用来在XML文档中查询信息的工具,通过使用路径表达式可以解析XML文件,读取XML文件中的数

  • Android基于Pull方式解析xml的方法详解

    本文实例讲述了Android基于Pull方式解析xml的方法.分享给大家供大家参考,具体如下: Pull解析和Sax解析很相似,都是轻量级的解析,在Android的内核中已经嵌入了Pull,所以我们不需要再添加第三方jar包来支持Pull. Pull解析和Sax解析不一样的地方有: (1)pull读取xml文件后触发相应的事件调用方法返回的是数字 (2)pull可以在程序中控制想解析到哪里就可以停止解析. 来看看实例: book.xml如下: <?xml version="1.0"

  • Android编程创建与解析xml的常用方法详解

    Android编程创建与解析xml的常用方法详解

    本文实例讲述了Android编程创建与解析xml的常用方法.分享给大家供大家参考,具体如下: 今天我今天给大家讲解一下Android创建xml以及一些解析xml的常用方法. 首先是创建,我们用XmlSerializer这个类来创建一个xml文件,其次是解析xml文件,常用的有dom,sax,XmlPullParser等方法,由于sax代码有点复杂,本节只讲解一下dom与XmlPullParser解析,sax我将会在下一节单独讲解,至于几种解析xml的优缺点我就不再讲述了. 为了方便理解,我做了一

  • php解析xml方法实例详解

    本文以实例形式详细讲述了php解析xml方法.分享给大家供大家参考.具体分析如下: books.xml文件如下: <?xml version="1.0" encoding="ISO-8859-1"?> <bookstore> <book category="children"> <title lang="en">Harry Potter</title> <aut

  • JS跨域(Access-Control-Allow-Origin)前后端解决方案详解

    浏览器的同源安全策略 同源策略,它是由Netscape提出的一个著名的安全策略.现在所有支持JavaScript的浏览器都会使用这个策略.所谓同源是指,域名,协议,端口相同.同源策略是浏览器的行为,是为了保护本地数据不被JavaScript代码获取回来的数据污染,因此拦截的是客户端发出的请求回来的数据接收,即请求发送了,服务器响应了,但是无法被浏览器接收.同源:协议 + 域名 + 端口.所以,怎么才算跨域呢? 什么是跨域 什么是跨域,简单地理解就是因为JavaScript同源策略的限制,a.co

随机推荐