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

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

时间: 2020-10-15

微信小程序实现通过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属性

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

微信小程序引入模块中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的代码 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

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

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

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

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

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

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

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

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

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

php实现xml与json之间的相互转换功能实例

本文实例讲述了php实现xml与json之间的相互转换功能.分享给大家供大家参考,具体如下: 用php实现xml与json之间的相互转换: 相关函数请查看php手册. 一.参考xml如下 <?xml version="1.0" encoding="UTF-8"?> <humans> <zhangying> <name>张三</name> <sex>男</sex> <old>

C#实现String类型和json之间的相互转换功能示例

本文实例讲述了C#实现String类型和json之间的相互转换功能.分享给大家供大家参考,具体如下: ////Donet2.0 需要添加引用 // 从一个对象信息生成Json串 public static string ObjectToJson(object obj) { return JavaScriptConvert.SerializeObject(obj); } // 从一个Json串生成对象信息 public static object JsonToObject(string jsonS

Java对XML文件增删改查操作示例

本文实例讲述了Java对XML文件增删改查操作.分享给大家供大家参考,具体如下: xml文件: <?xml version="1.0" encoding="UTF-8"?> <books> <book> <name>哈里波特</name> <price>10</price> <memo>这是一本很好看的书.</memo> </book> <b

FastJson对于JSON格式字符串、JSON对象及JavaBean之间的相互转换操作

fastJson对于json格式字符串的解析主要用到了一下三个类: JSON:fastJson的解析器,用于JSON格式字符串与JSON对象及javaBean之间的转换. JSONObject:fastJson提供的json对象. JSONArray:fastJson提供json数组对象. 我们可以把JSONObject当成一个Map<String,Object>来看,只是JSONObject提供了更为丰富便捷的方法,方便我们对于对象属性的操作.我们看一下源码. 同样我们可以把JSONArra

C# XML与Json之间相互转换实例详解

对于这转换其实很简单,其中最重要的就是先要引用类库.可以到官网进行下载引用http://json.codeplex.com. XML转换为Json字符串 复制代码 代码如下: string xml = @"<?xml version=""1.0"" standalone=""no""?>                             <root>                   

JS基于正则截取替换特定字符之间字符串操作示例

本文实例讲述了JS基于正则截取替换特定字符之间字符串操作.分享给大家供大家参考,具体如下: 示例1: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"&

java变量和javascript变量之间的传递示例

最近在用jsp做一个网站,其间涉及到java变量和javascript变量之间的互换,虽然网上资料众多,但是众说纷纭,并且很多都是带有误导性,做了许多尝试,终于比较清楚的搞懂了这个问题.通俗一点来讲,就是说java代码是运行在服务器上的,返回的值只是静态的存在于页面,而javascript是脚本语言,是运行在客户端的!它们是两种完全不同的语言,变量不能直接进行交换,但是通过一定的方式,变量可以传递. java变量传递给javascript变量,这个比较简单,就是平时的普通方法就好: 复制代码 代

JS实现将二维数组转为json格式字符串操作示例

本文实例讲述了JS实现将二维数组转为json格式字符串操作.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>json</title> <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js