JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML


Posted in Javascript onSeptember 14, 2012

一、IE中的XML DOM支持

IE对XML的支持是基于ActiveX的MSXML库。

1、DOM创建

对每个新版本的MSXML,都会创建出不同的XML DOM对象,所以尽量选择新的XML DOM版本。

2、载入XML

载入XML分两种,即:

载入XML字符串:loadXML(xml字符串)

载入xml文件:load(xml文件路径)。默认情况下文件载入是异步的,如果要改为同步把asynce特性改为true即可。异步载入文件时要用到readyState和onreadystatechange事件处理函数。readyState共有五种可能的值:

0——DOM尚未初始化任何信息;

1——DOM正在载入数据;

2——DOM完成了数据载入;

3——DOM已经可用,不过某些部分可能还不能用;

4——DOM已经完全被载入,可以使用了。

3、获取XML

微软为每个节点增加了xml特性,所以获取XML非常方便,见后面的示例。

4、解释错误

可以用parseError来处理XML载入过程中出现的错误。

parseError特性实际上是包含以下特性的对象:

errorCode:错误类型数字代码,没有错误为0

filePos:错误发生在文件中的位置

line:遇到错误的行号

linepos:在遇到错误的那一行上的字符的位置

reason:对错误的一个解释

srcText:造成错误的代码

url:造成错误的文件的URL

5、示例:

function createXMLDOM(){ 
var arrSignatures=["MSXML2.DOMDocument.5.0","MSXML2.DOMDocument.4.0","MSXML2.DOMDocument.3.0","MSXML2.DOMDocument","Microsoft.XmlDom"]; 
for(var i=0;i<arrSignatures.length;i++){ 
try{ 
var oXmlDom=new ActiveXObject(arrSignatures[i]); 
return oXmlDom; 
} catch(oError){ 
} 
} 
throw new Error("MSXML is not installed on your system"); 
} 
var oXmlDom=createXMLDOM(); 
//方式一:加载字符串 
oXmlDom.loadXML("<root><child/></rot>"); 
//处理错误 
if(oXmlDom.parseError != 0){ 
var oError=oXmlDom.parseError; 
alert("An Error occurred:\nError Code:" + oError.errorCode 
+ "\nLine:" + oError.line + "\nLine Pos:" + oError.linepos 
+ "\nReason:" + oError.reason); 
} else { 
var childNodes=oXmlDom.documentElement.childNodes; 
console.log(childNodes.length+" "+childNodes[0].xml);// 1 <child/> 
} 
//方式二:加载XML文件 
oXmlDom.onreadystatechange = function(){ 
//文档加载完毕 
if(oXmlDom.readyState == 4){ 
if(oXmlDom.parseError != 0){ 
var oError=oXmlDom.parseError; 
alert("An Error occurred:\nError Code:" + oError.errorCode 
+ "\nLine:" + oError.line + "\nLine Pos:" + oError.linepos 
+ "\nReason:" + oError.reason); 
} else { 
var childNodes=oXmlDom.documentElement.childNodes; 
console.log(childNodes.length+" "+childNodes[0].xml);// 1 <child/> 
} 
} 
} 
oXmlDom.load("test.xml");

二、Mozilla中的XML DOM支持

1、创建DOM

DOM标准指出,document.implementation有个 createDocument() 方法:
var oXmlDom=document.implementation.createDocument("","",null);

其中,第一个参数为文档的命名空间URL,文档元素的标签名,和文档类型对象(总是为null,因为在Mozilla中还没有支持)。

2、载入XML

Mozilla只支持一个载入XML的方法:load(文件名)。

同步或异步由async决定,默认为异步。

如果是XML字符串,要用DOMParser对象来转换成DOM,用法如下:

var oParser = new DOMParser(); 
var oXmlDom = oParser.parseFromString("<root/>","text/xml");

 parseFromString方法第一个参数为XML字符串,第二个参数为内容类型。可以是 "text/xml" 或 "application/xml"。

3、获取XML

微软提供的xml特性因为不是标准,所以Mozilla不支持,Mozilla提供了XMLSerializer对象:

var oSerializer = new XMLSerializer(); 
var sXml = oSerializer.serializeToString(oXmlDom,"text/xml");在后面的例子中我们可以看到如何用defineGetter()方法来定义一个xml特性。

4、解析错误

在XML文件的解析过程中发生错误时,XML DOM会创建文档来解释这个错误。常常用正则来输出错误信息:

var reError = />([\s\S]*?)Location:([\s\S]*?)Line Number (\d+),Column (\d+):<sourcetext>([\s\S]*?)(?:\-*\^)/; 
if(oXmlDom.documentElement.tagName == "parsererror"){ 
reError.test(oXmlDom.xml); 
alert("An error occurred:\nDescription: " + RegExp.$1 +"\n" 
+ "File: " + RegExp.$2 + "\n" 
+ "Line: " + RegExp.$3 + "\n" 
+ "Line Pos: " + RegExp.$4 + "\n" 
+ "Source: " + RegExp.$5); 
}

5、示例
var oXmlDom=document.implementation.createDocument("","<root>",null); 
oXmlDom.async = false; 
oXmlDom.onload = function(){ 
alert('Done'); 
} 
var reError = />([\s\S]*?)Location:([\s\S]*?)Line Number (\d+),Column (\d+):<sourcetext>([\s\S]*?)(?:\-*\^)/; 
if(oXmlDom.documentElement.tagName == "parsererror"){ 
reError.test(oXmlDom.xml); 
alert("An error occurred:\nDescription: " + RegExp.$1 +"\n" 
+ "File: " + RegExp.$2 + "\n" 
+ "Line: " + RegExp.$3 + "\n" 
+ "Line Pos: " + RegExp.$4 + "\n" 
+ "Source: " + RegExp.$5); 
} 
Node.prototype.__defineGetter__("xml", function () { 
var oSerializer = new XMLSerializer(); 
return oSerializer.serializeToString(this, "text/xml"); 
}); 
oXmlDom.load('test.xml'); 
alert(oXmldom.xml); 
var oNode = oXmlDom.documentElement.childNodes[1]; 
alert(oNode.xml);

三、通用接口

下面是兼容IE和FireFox的通用接口:

function XmlDom() { 
if (window.ActiveXObject) {//IE 
var arrSignatures = ["MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", 
"MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument", "Microsoft.XmlDom"]; 
for (var i = 0; i < arrSignatures.length; i++) { 
try { 
var oXmlDom = new ActiveXObject(arrSignatures[i]); 
return oXmlDom; 
} 
catch (oError) { 
//ignore 
} 
} 
throw new Error("MSXML is not installed on your system."); 
} else if (document.implementation && document.implementation.createDocument) { 
var oXmlDom = document.implementation.createDocument("", "", null); 
oXmlDom.parseError = {valueOf:function () { 
return this.errorCode; 
}, toString:function () { 
return this.errorCode.toString(); 
}}; 
oXmlDom.__initError__(); 
oXmlDom.addEventListener("load", function () { 
this.__checkForErrors__(); 
this.__changeReadyState__(4); 
}, false); 
return oXmlDom; 
} else { 
throw new Error("Your browser doesn't support an XML DOM object."); 
} 
} 
if (isMoz) { 
Document.prototype._readyState_ = 0; 
Document.prototype.onreadystatechange = null; 
Document.prototype.__changeReadyState__ = function (iReadyState) { 
this._readyState_ = iReadyState; 
if (typeof this.onreadystatechange == "function") { 
this.onreadystatechange(); 
} 
}; 
Document.prototype.__initError__ = function () { 
this.parseError.errorCode = 0; 
this.parseError.filepos = -1; 
this.parseError.line = -1; 
this.parseError.linepos = -1; 
this.parseError.reason = null; 
this.parseError.srcText = null; 
this.parseError.url = null; 
}; 
Document.prototype.__checkForErrors__ = function () { 
if (this.documentElement.tagName == "parsererror") { 
var reError = />([\s\S]*?)Location:([\s\S]*?)Line Number (\d+),Column (\d+):<sourcetext>([\s\S]*?)(?:\-*\^)/; 
reError.test(this.xml); 
this.parseError.errorCode = -999999; 
this.parseError.reason = RegExp.$1; 
this.parseError.url = RegExp.$2; 
this.parseError.line = parseInt(RegExp.$3); 
this.parseError.linepos = parseInt(RegExp.$4); 
this.parseError.srcText = RegExp.$5; 
} 
}; 
Document.prototype.loadXML = function (sXml) { 
this.__initError__(); 
this.__changeReadyState__(1); 
var oParser = new DOMParser(); 
var oXmlDom = oParser.parseFromString(sXml, "text/xml"); 
while (this.firstChild) { 
this.removeChild(this.firstChild); 
} 
for (var i = 0; i < oXmlDom.childNodes.length; i++) { 
var oNewNode = this.importNode(oXmlDom.childNodes[i], true); 
this.appendChild(oNewNode); 
} 
this.__checkForErrors__(); 
this.__changeReadyState__(4); 
}; 
Document.prototype.__load__ = Document.prototype.load; 
Document.prototype.load = function (sURL) { 
this.__initError__(); 
this.__changeReadyState__(1); 
this.__load__(sURL); 
}; 
Document.prototype.getReadyState = function () { 
return this._readyState_; 
}; 
Node.prototype.__defineGetter__("xml", function () { 
var oSerializer = new XMLSerializer(); 
return oSerializer.serializeToString(this, "text/xml"); 
}); 
}

四、其他浏览器

本书中没有讲到其他浏览器,如现在很火的Chrome,最新版的主流浏览器现在都已支持上面讲到的Mozilla方式。如果不支持,可以用AJAX来读取处理XML。
作者:Artwl
出处:http://artwl.cnblogs.com

Javascript 相关文章推荐
网页禁用右键实现代码(JavaScript代码)
Oct 29 Javascript
js函数setTimeout延迟执行的简单介绍
Jul 17 Javascript
JavaScript实现Flash炫光波动特效
May 14 Javascript
原生js封装二级城市下拉列表的实现代码
Jun 16 Javascript
js方法数据验证的简单实例
Sep 17 Javascript
解决vue里碰到 $refs 的问题的方法
Jul 13 Javascript
浅谈Vuex的状态管理(全家桶)
Nov 04 Javascript
Vue 创建组件的两种方法小结(必看)
Feb 23 Javascript
nuxt.js中间件实现拦截权限判断的方法
Nov 21 Javascript
ES6 Symbol在对象中的作用实例分析
Jun 06 Javascript
vue v-model的用法解析
Oct 19 Javascript
原生JS生成指定位数的验证码
Oct 28 Javascript
IE6-IE9不支持table.innerHTML的解决方法分享
Sep 14 #Javascript
javascript时区函数介绍
Sep 14 #Javascript
推荐40个简单的 jQuery 导航插件和教程(下篇)
Sep 14 #Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
Sep 14 #Javascript
基于JQuery的一句话搞定手风琴菜单
Sep 14 #Javascript
JQuery select控件的相关操作实现代码
Sep 14 #Javascript
11个用于提高排版水平的基于jquery的文字效果插件
Sep 14 #Javascript
You might like
索尼SONY ICF-SW7600GR电路分析与改良
2021/03/02 无线电
php在线生成ico文件的代码
2007/10/09 PHP
提高PHP编程效率 引入缓存机制提升性能
2010/02/15 PHP
PHP chmod 函数与批量修改文件目录权限
2010/05/10 PHP
使用php的HTTP请求的库Requests实现美女图片墙
2015/02/22 PHP
thinkphp5.0整合phpsocketio完整攻略(绕坑)
2018/10/12 PHP
在javascript中关于节点内容加强
2013/04/11 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
浅析Js(Jquery)中,字符串与JSON格式互相转换的示例(直接运行实例)
2013/07/09 Javascript
JavaScript中常用的验证reg
2016/10/13 Javascript
vue获取dom元素注意事项
2017/12/28 Javascript
关于redux-saga中take使用方法详解
2018/02/27 Javascript
微信小程序scroll-view实现字幕滚动
2018/07/14 Javascript
JavaScript实现数组全排列、去重及求最大值算法示例
2018/07/30 Javascript
js仿360开机效果
2019/12/26 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
[46:23]OG vs EG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
Python自定义主从分布式架构实例分析
2016/09/19 Python
Python画柱状统计图操作示例【基于matplotlib库】
2018/07/04 Python
Python实现查找数组中任意第k大的数字算法示例
2019/01/23 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python队列RabbitMQ 使用方法实例记录
2019/08/05 Python
如何在python中写hive脚本
2019/11/08 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
2014/12/30 HTML / CSS
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
护士个人简历自荐信
2013/10/18 职场文书
护理专科毕业推荐信
2013/11/10 职场文书
个人素质的自我评价分享
2013/12/16 职场文书
公司承诺书格式
2014/05/21 职场文书
检讨书1000字
2014/10/11 职场文书
销售开票员岗位职责
2015/04/15 职场文书
2016应届毕业生就业指导课心得体会
2016/01/15 职场文书
高一英语教学反思
2016/03/03 职场文书
asyncio异步编程之Task对象详解
2022/03/13 Python