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 相关文章推荐
用JS写的一个TableView控件代码
Jan 23 Javascript
模拟电子签章盖章效果的jQuery插件源码
Jun 24 Javascript
Backbone.js中的集合详解
Jan 14 Javascript
jQuery插件 Jqplot图表实例
Jun 18 Javascript
ros::spin() 和 ros::spinOnce()函数的区别及详解
Oct 01 Javascript
jQuery+正则+文本框只能输入数字的实现方法
Oct 07 Javascript
将JSON字符串转换成Map对象的方法
Nov 30 Javascript
微信小程序 中wx.chooseAddress(OBJECT)实例详解
Mar 31 Javascript
Vue CLI 2.x搭建vue(目录最全分析)
Feb 27 Javascript
JS桶排序的简单理解与实现方法示例
Nov 25 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 Vue.js
基于JavaScript实现简单扫雷游戏
Jan 02 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
php侧拉菜单 漂亮,可以向右或者向左展开,支持FF,IE
2009/10/15 PHP
PHP仿博客园 个人博客(2) 数据库增添改删
2013/07/05 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
php递归遍历删除文件的方法
2015/04/17 PHP
枚举JavaScript对象的函数
2006/12/22 Javascript
Javascript技巧之不要用for in语句对数组进行遍历
2010/10/20 Javascript
完美兼容IE,chrome,ff的设为首页、加入收藏及保存到桌面js代码
2014/12/17 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
javascript嵌套函数和在函数内调用外部函数的区别分析
2016/01/31 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
vuex 使用文档小结篇
2018/01/11 Javascript
p5.js入门教程之小球动画示例代码
2018/03/15 Javascript
JavaScript基于遍历操作实现对象深拷贝功能示例
2019/03/05 Javascript
运用js实现图层拖拽的功能
2019/05/24 Javascript
详解在Vue.js编写更好的v-for循环的6种技巧
2020/04/14 Javascript
简单了解vue 插值表达式Mustache
2020/07/22 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
python 动态获取当前运行的类名和函数名的方法
2014/04/15 Python
python的Tqdm模块的使用
2018/01/10 Python
DataFrame中去除指定列为空的行方法
2018/04/08 Python
Python JSON格式数据的提取和保存的实现
2019/03/22 Python
python二进制文件的转译详解
2019/07/03 Python
python config文件的读写操作示例
2019/09/27 Python
草莓网化妆品澳大利亚站:Strawberrynet AU
2017/12/18 全球购物
Madewell澳大利亚官方网站:美国休闲服饰品牌
2019/07/18 全球购物
高级文秘工作总结的自我评价
2013/09/28 职场文书
体育专业学生自我评价范文
2014/01/17 职场文书
2014学年自我鉴定
2014/02/23 职场文书
车间主任岗位职责
2014/03/16 职场文书
三八妇女节活动主持词
2014/03/17 职场文书
班子群众路线教育实践个人对照检查材料思想汇报
2014/09/30 职场文书
个人思想政治总结
2015/03/05 职场文书
《打电话》教学反思
2016/02/22 职场文书
Vue中使用import进行路由懒加载的原理分析
2022/04/01 Vue.js
使用scrapy实现增量式爬取方式
2022/06/21 Python