首页 >> js开发 >> jsJS跨浏览器解析XML应用过程详解js大全
jsJS跨浏览器解析XML应用过程详解js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:js开发
首先介绍简单的理论：对于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);
}
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="数码相机 3206(元) 联想笔记本电脑 3206(元)
var xmlstr="数码相机 3206(元) 联想笔记本电脑 3206(元)
然后定义一个goods.xml文件：文件内容为：
数码相机
3206(元)
联想笔记本电脑
3206(元)
数码相机
3206(元)
联想笔记本电脑
3206(元)
通过取消和注释方式来选择是文本还是字符串。这个方法可以是通用的，下面再来解析这个Xdom对象：
function createTable(xmldoc){
var goodss=xmldoc.getElementsByTagName("goods");
for(var i=0;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("
");
}
}
}
function createTable(xmldoc){
var goodss=xmldoc.getElementsByTagName("goods");
for(var i=0;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("
");
}
}
} 对于使用到的函数和属性我们来解析一下：
/*
一些典型的 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"。
*/
/*
一些典型的 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"。
*/ 早页面增加一个按钮来调用函数：
页面将会输出XMl内节点的属性和子节点的内容。对于一般应用来说，我觉得上面内容已经足够了。我会在之后补充一些其他操作。以上就是本文的全部内容，希望对大家的学习有所帮助。
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);
}
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="
var xmlstr="
然后定义一个goods.xml文件：文件内容为：
function createTable(xmldoc){
var goodss=xmldoc.getElementsByTagName("goods");
for(var i=0;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("
");
}
}
}
function createTable(xmldoc){
var goodss=xmldoc.getElementsByTagName("goods");
for(var i=0;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("
");
}
}
} 对于使用到的函数和属性我们来解析一下：
/*
一些典型的 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"。
*/
/*
一些典型的 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"。
*/ 早页面增加一个按钮来调用函数：
页面将会输出XMl内节点的属性和子节点的内容。对于一般应用来说，我觉得上面内容已经足够了。我会在之后补充一些其他操作。以上就是本文的全部内容，希望对大家的学习有所帮助。
刚刚发布热门点击发布时间
- [05/19]前端外包开发:git 舍弃本地代码强制从远程库更新
- [05/19]git 提交 忽略husky git 提交 忽略eslint 检测
- [05/18]前端外包工具:如何npm清理缓冲yarn,pnpm 清理缓存
- [05/18]前端开发工具:npm和pnpm有什么区别?pnpm安装
- [05/18]前端开发:npm与yarn的区别
- [07/09]Chrome抓取页面内容代码|chrome插件获取页面数据
- [07/09]谷歌浏览器数据采集插件开发|谷歌浏览器的采集功能
- [07/09]Chrome插件轻松抓取网络数据,Chrome插件轻松抓取网页源码数据
- [07/09]chrome插件怎么安装?chrome插件开发如何安装chrome插件
- [07/09]快速chrome插件开发-北京chrome插件开发外包
- [12/31]清大光德落地护眼灯|清大光德儿童护眼灯
- [07/20]网站无障碍适老化外包改造私有化过程遇到问题整理
- [07/19]适老化改造工信部明确APP适老化规范：禁广告弹窗，网站需提供特大字体
- [07/19]适老化改造包括哪些方面?
- [07/19]什么是适老化改造？
