《JavaScript高级程序设计》阅读笔记（二十一）：JavaScript中的XML-阿里云开发者社区

虽然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。

《JavaScript高级程序设计》阅读笔记（二十一）：JavaScript中的XML

一、IE中的XML DOM支持

二、Mozilla中的XML DOM支持

三、通用接口

四、其他浏览器

本文转自Artwl博客园博客，原文链接：http://www.cnblogs.com/artwl/，如需转载请自行联系原作者

热门文章

最新文章

相关课程

相关电子书

相关实验场景