JavaScript高级程序设计 阅读笔记（二十一） JavaScript中的XML
更新时间：2012年09月14日 15:56:45 作者：
虽然XML和DOM已经变成Web开发的重要组成部分，但目前仅IE跟Mozilla支持客户端的XML处理
一、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
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解析xml字符串的函数
- JavaScript 解析读取XML文档 实例代码
- javascript 读取XML数据，在页面中展现、编辑、保存的实现
- javascript XMLHttpRequest对象全面剖析
- Javascript(AJAX)解析XML的代码(兼容FIREFOX/IE)
- javascript操作xml(增删改查)例子代码hta版
- JavaScript XML和string相互转化实现代码
- JavaScript高级程序设计 XML、Ajax 学习笔记
- JavaScript操作XML 使用百度RSS作为新闻源示例
- javascript+xml实现简单图片轮换(只支持IE)
- 如何使用Javascript正则表达式来格式化XML内容
- javascript读取Xml文件做一个二级联动菜单示例
- 兼容Firefox的Javascript XSLT 处理XML文件
相关文章
预加载的好处可以让网页更快的呈现给用户，缺点就是可能会增加无用的请求，不多说了，作为一个前端攻城师都懂的，下面分享我做的测试和得到的结果2013-10-10
这篇文章主要分享10个常见的前端手写功能，防抖、节流、深拷贝、异步控制并发数、继承等功能技巧，具有一定的参考价值，需要的小伙伴可以参考一下2022-02-02
javascript 中设置window.location.href跳转无效问题解决办法
这篇文章主要介绍了javascript 中设置window.location.href跳转无效问题解决办法的相关资料,需要的朋友可以参考下2017-02-02
5个可以帮你理解JavaScript核心闭包和作用域的小例子
这篇文章主要介绍了5个可以帮你理解JavaScript核心闭包和作用域的小例子,本文是翻译自国外的一篇文章,短小精悍,需要的朋友可以参考下2014-10-10
最近因为项目需要，有个需求是让实时显示当前时间，然后想想这不简单吗，自己就动手敲代码，但是发现一个问题，通过getMonth()得到月份，总是会比当前月份少1，深深觉得实践出真知啊…之前觉得Date对象挺简单的，有很多细节都没有注意。下面这篇文章就给大家详细介绍下。2016-10-10
这篇文章主要为大家详细介绍了一个仿邮箱登录提示框js开发案例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-07-07
这篇文章主要介绍了JS中使用new Option()实现时间联动效果,需要的朋友可以参考下2018-12-12
这篇文章主要为大家详细介绍了JavaScript正则表达式验证登录实例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-03-03
下面的这段js获取视频时长代码是网上找的，还没有测试,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了webpack4.x打包过程详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-07-07
最新评论