26、JavaScript中的XML

只有IE秋Mozilla两个浏览器可以支持客户端的XML处理。

IE中的XML DOM支持

1、DOM创建

对每个新版本的MSXML，都会创建出不同的XML DOMain对象，而它们各自的名称也不相同。MSXML最新的版本是6.0，也就是说，存在以下XML DOM实现：

Micorsoft.XmlDom（最原始的）

MSXML2.DOMDocument

MSXML2.DOMDocument.3.0

MSXML2.DOMDocument.4.0

MSXML2.DOMDocument.5.0

MSXML2.DOMDocument.6.0

注：上面所有串使用时与大小写没有关系

 

为了确保使用了正确的XMLDOM版本，也为避免任何其他错误，我们可以创建一个函数测试每个XML DOM字符串，出现错误即捕获：

function createXMLDOM() {

    var arrSignatures = ["MSXML2.DOMDocument.6.0","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 not installed on your system.");           
}
//
var oXmlDom = createXMLDOM();

执行代码后oXmlDom就和DOM Document对象行为一样了。

2、载入XML

通过XML DOM对象就可以载入一些XML了。微软的XML DOM有两种载入XML的方法：loadXML()与load()。

loadXML()方法可直接向XML DOM输入XML字符串：

oXmlDom.loadXML('<root><child/></root>');

load()方法用于从服务器上载入XML文件。不过，load()方法只可以载入包含JavaScript的页面存储于同一服务器上的文件 ，也就是说，不可以通过其他人的服务器载入XML文件。

还有两种载入文件的模式：同步与异步。以同步模式载入文件时，JavaScript代码会等待文件完全载入后才继续执行代码；而以异步模式载入时，不会等待，可以使用事件处理函数来判断文件是否完全载入了 。

默认情况下，文件是按照异步模式载入的，要进行同步载入，只需设置async属性为false ：

oXmlDom.async = false;

然后使用load()方法，并给出要载入的文件名：

oXmlDom.load('test.xml');

执行这一行代码后，oXmlDom会包含能表示XML文件结构的一个DOM文档，这样就可以使用DOM所有的属性与方法了。

 

异步载入文件时，要使用readyState属性和onreadystatechange事件处理函数：

readyState属性有一种上可能的值：

• 0——DOM尚未初始化任何信息
• 1——DOM正在载入数据
• 2——DOM完成了数据载入
• 3——DOM已经可用，不过某些部分可能还不能用
• 4——DOM已经完全载入，可以使用了

一旦readyState属性的值发生变化，就会触发readystatechange事件，如果使用onreadystatechange事件处理函数，就可以在DOM完全载入时，发出通知，必须在调用load()方法前分配好onreadystatechange事件处理函数，如：

oXmlDom.onreadystatechange = function () {
	if (oXmlDom.readyState == 4) {
           alert('done');
	}
};
oXmlDom.load("test.xml");

注：事件处理函数代码中要使用oXmlDom而不是this关键字。这是ActiveX对象特殊之处：使用this关键词可能会出现不可预测的错误。

无论是同步还是异步地载入文件，load()方法都可能接受部分的，相对的或者完整的XML文件路径，如下：

oXmlDom.load('test.xml');

oXmlDom.load('../test.xml');

oXmlDom.load('http://www.mydomanin.com/test.xml');

3、获取XML

把XML载入到DOM中后，还需将XML读取出来，微软为每个节点（包括文档节点）都添加了一个xml 属性，获取载入的XML十分的简单：

oXmlDom.load('test.xml');
alert(oXmldom.xml);

也可以仅获取某个特定节点的XML：

var oNode = oXmlDom.documentElement.childNodes[1];
alert(oNode.xml);

xml属性是只读的，如果尝试直接对其赋值会产生错误。

4、解释错误

在尝试将XML载入到XML DOM对象中时，无论是loadXML()方法还是load()方法，都有可能出现XML格式不正确的情况。微软的XML DOM的parseError的属性包含了关于解析XML代码时所遇到的问题的所有信息。

parseError属性实际上是包含以下属性的对象：

• errorCode——表示所发生的错误类型的数字代号（当没有错误时为0）
• filePos——错误发生在文件中的位置
• line——遇到错误的行号
• linepos——在遇到错误的那一行上的字符的位置
• reason——对错误的一个解释
• srcText——造成错误的代码
• url——造成错误的文件的URL（如果可用）

可以使用parseError对象来创建自己的错误对话框：

if (oXmlDom.parseError != 0) {
	var oError = oXmlDom.parseError;
	alert("An error occurred:\nError Code: " 
	+ oError.errorCode + "\n" + "Line: " 
	+ oError.line + "\n" 
	+ "Line Pos: " + oError.linepos + "\n" 
	+ "Reason: " + oError.reason);
}

检查时应该检查错误代码是否不等于0，因为错误代码可能为正也可能为负。

另一个选项是抛出自己的错误：

if (oXmlDom.parseError != 0) {
	var oError = oXmlDom.parseError;
	throw new Error(oError.reason 
	+ " (at line " + oError.line 
	+ ", position " + oError.linepos 
	+ ")");
}

不管最终如何显示错误，最好在XML DOM载入完毕后就立即检查错误。

注：MSXML ActiveX控件只能在windows上使用，因此，Macintosh上的IE不能利用这个功能。

Mozilla中XML DOM支持

Mozilla提供的XML DOM版本要比IE的更加标准。Mozilla中的XMLDOM实际上是它的JavaScript实现，也就是说它不仅与浏览器一起衍化。与不能在Macintosh上使用XML DOM的IE不同，Mozilla的支持跨越了平台的界限。别外，Mozilla的XML DOM实现了支持DOM Level2的功能，而微软的，仅支持DOM Level1。

1、创建DOM

DOM标准指出，document.implementation 对象有个可用的createDocument()方法。Mozilla严格遵循了这个标准，可以通过此标准创建XML DOM：

 

在Mozilla浏览器中创建XML文档对象的方法如下。

document.implementation.createDocument(namespaceURI , rootname , doctype )

其中namespaceURI参数代表XML文档的命名空间URI，rootname参数代表根节点名称，而doctype表示创建文档的类型，目前Mozilla并没有实现对doctype该参数的支持，因此在实际使用时doctype的赋值为null。

如果namespaceURI和rootname参数为空字符串，那么createDocument方法将创建一个空DOM对象 ，即：

var doc = document.implementation.createDocument("", "", null);

 

要创建包含一个文档元素（根节点）的XMLDOM，只需将标签名作为第二个参数：

var oXmlDom = document.implementation.createDocument('','root',null);

 

 

这行代码创建了代表XML代码<root/>的XML DOM。如果在第一个参数中指定了命令空间URL，可进一步定义文档元素：

var oXmlDom = document.implementation.createDocument('http://www.wrox.com','root',null);

 

 

这行代码创建了表示<a0:root xmlns:a0='http://www.wrox.com'/> 的XML DOM。Mozilla自动创建一个称为a0的命名空间来表示输入的命名空间URL。

2、载入XML

与微软的XML DOM不同，Mozilla只支持一个载入数据的方法：load()。Mozilla中的load()方法和IE中的load()工作方式一样，只要指定要载入的XML文件，以及同步还是异步（默认）载入。

如果同步载入XML文件，代码基本上与IE差不多：

oXmlDom.async = false;
oXmlDom.load('test.xml'); 

如果进行异步载入，情况就有些不同了。Mozilla的XML DOM并不支持微软的readyState属性（实际上，readyState并非Mozilla的实现所遵循的DOM Level3载入和保存规范的一部份）。相反，Mozilla的XML DOM会在文件全载入后触发load事件，也就是说不用使用onload事件处理函数来判断DOM何时可用 ：

oXmlDom.onload = function(){
    alert('Done');
}
oXmlDom.load('test.xml');

注：在1.4版之前，Mozilla支持外部文件的异步载入，在1.4中，Mozilla引用了async属性以及同步载入的能力。

不过，Mozilla的XML DOM并不支持loadXML()方法 ，要将XML字符器解析为DOM,必须使用DOMParser对象：

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

这段代码创建了代表<root/>的XML DOM。每一行创建DOMParser对象，第二行用它唯一方法parseFromString()来创建XML DOM。这个方法接受两个参数，要解析的XML字符串以及字符串的内容类型。要解析XML代码，内容类型可以是'text/xml'或者'application/xml'；任何其他内容类型都被忽略。

因为XML DOM只是Mozilla的JavaScript实现的一部分，所以它可自己添加loadXML()方法。XML DOM实际的类称为Document，所以添加新方法同时使用prototype对象一样容易；

Document.prototype.loadXML = function (sXml) {

    var oParser = new DOMParser();
    var oXmlDom = oParser.parseFromString(sXml, "text/xml");
 		//原来的文档必须清空其内容，可用while循环来删除所有的文档子节点
    while (this.firstChild) {    		
        this.removeChild(this.firstChild);
    }
		//this指向XML DOM对象
    for (var i=0; i < oXmlDom.childNodes.length; i++) {
    		//在删除所有子节点后，所有的oXmlDom的子节点必须导入到文档中
        var oNewNode = this.importNode(oXmlDom.childNodes[i], true);
        //最后添加到XML DOM
        this.appendChild(oNewNode);
    }

};

 

只需包含这段代码，在Mozill中就可以与在IE中一样地使用loadXML()方法了。

注：这段代码会在IE中造成错误，因为不存在Document对象，因此，在代码外要使用浏览器检测来避免这个问题。

3、获取XML

微软的XML DOM提供了xml属性，可以很方便地访问下面的XML代码。因为这个属性并非标准的一部分，Mozilla不支持它。但是，Mozilla提供了可以胜于同样的目的的XMLSerializer对象：

var oSerializer = new XMLSerializer();
var sXml = oSerializer.serializeToString(oXmlDom, "text/xml");

XMLSerializer唯一方法serializerToString()为oXmlDom生成了XML代码。第一个参数为要序列化的节点，第二个为内容类型。内容类型可以是'text/xml'或‘application/xml'。使用这个对象，就可以自己为Mozilla的XML DOM生成xml属性，只需使用一个鲜为人知的defineGetter()方法。

defineGetter()方法只存在于Mozilla中，用于为某个属性定义读取函数(get方法)，在读取属性时，会调用这个函数并返回它的结果，例如：

var sValue = oXmlNode.nodeValue;//读属性
oXmlNode.nodeValue = 'New value';//写属性

第一行代码读取nodeValue属性值，即解释器读取属性的值，如果定义了获取函数，就会调用自定义属性读取函数将结果返回。第二行代码对nodeValue属性进行设置，此时如果定义了属性设置函数，则调用这个函数，并以 New value 作为参数值，创建写属性自定义函数的为 defineSetter() 方法，但在这里用不到。

 

方法 defineGetter() 是按照JavaScript对于私有属性和方法标准隐藏——在名字前后加上两个下划线。

 

因为文档中每种类型的节点都要有xml属性，所以最好将其添加到Node类型中（其他的节点类型都是继承Node的）：

Node.prototype.__defineGetter__("xml", function () {
    var oSerializer = new XMLSerializer();
    return oSerializer.serializeToString(this, "text/xml");
});

为每个Node分配xml属性的读取函数十分简单，对前面的例子唯一改变是：this是serializeToString()方法的第一个参数（在此上下文中，this指向节点自身）。

经过以上处理，现可以与使用微软的xml属性方式一样地使用自定义的xml属性：

oXmlDom.load('test.xml');
alert(oXmldom.xml);

var oNode = oXmlDom.documentElement.childNodes[1];
alert(oNode.xml);

注：这段代码必须包含在浏览器检测中，因为它只能运行在Mozilla中。

4、解析错误

在XML文件的解析过程中发生错误时，XML DOM会创建文档来解释这个错误。假设运行以下代码：

Node.prototype.__defineGetter__("xml", function () {
    var oSerializer = new XMLSerializer();
    return oSerializer.serializeToString(this, "text/xml");
});			
try{
	var oParser = new DOMParser();			
	//var oXmlDom = oParser.parseFromString('<root><child></root>');源码有错，一定要带上类型参数		
	var oXmlDom = oParser.parseFromString('<root><child></root>','text/xml');			
	var x = oXmlDom.xml;	
	if (oXmlDom.documentElement.tagName == "parsererror") {
	 	alert(x);
	 	return;
	}else{
		//do something ...	
	}
}catch (e){
	alert(e.name + '\n' +  e.message);
}

上面代码中XML串不完整，但运行时也未抛出任何错误，此时错误信息会存储在oXmlDom中，我们打印oXmlDom的xml属性，显示的错误提示信息框如下：

由提示信息可知，要判断是否在XML代码的解析过程中是否有错误，必须测试文档元素的标签名，然后还可通过正则式提取详细准确的错误信息（但要注意是中否还是英文的，至少在中英文浏览器上显示的信息是不一样的，这里我觉得不必要提取这些信息，直接弹出上面的框也可以，这里就不实现了）。

XML DOM与HTML DOM中文档对象的documentElement属性

var oParser = new DOMParser();
var oXmlDom = oParser.parseFromString('<root><child1>text1</child1><child2>text2</child2></root>','text/xml');

//oXmlDom的类型与HTML DOM中的document类型是一样的，都是文档对象
alert(oXmlDom.nodeType == Node.DOCUMENT_NODE); //true 
alert(document.nodeType == Node.DOCUMENT_NODE); //true  

//documentElement都是得到文档的根元素
alert(oXmlDom.documentElement.tagName);//root			
alert(document.documentElement.tagName);//HTML	
	
alert(oXmlDom.documentElement.childNodes[0].tagName);//child1
alert(document.documentElement.childNodes[0].tagName);//HEAD

通用接口

1、通用接口实现

由于IE与Mozilla上的XML DOM实现有很大的不同，为了使用时不用区分这两种浏览器，我们需要实现通用脚本。实现的思想是把Mozilla上的XML DOM适配成微软的XML DOM即可。但书上的源码有问题，一是在firefox不同的语言版本上有不同的解析错误（中英问题），所以这里就不用正则试提取错误信息，而是在使用时如果出现错误直接显示出来。二是在firefox上已有readyState属性，而且发现是只读的值 complete ，所有想适配成微软的readyState有难度，这里用添加一个读取它的方法。经过这样做以后，实质上在使用时又不是统一接口，还要根据不现的浏览器来显示不同的错误，唉~有点怪怪的，到目前还没有想出好的办法，后面也附上书的源码...

if (isMoz) {	
    //模拟微软异步加载XML时0,1,4状态，其他状态不好模拟，也不重要，所以就不必模式了
    //0状态表示DOM尚未初始化任何信息，可以直接赋于Document原型中readyState为0，
    //至于1状态，表示DOM正在载入数据，在加载XML前模拟设置即可；最后是4状态，表示
    //DOM已经完全载入，可以使用了，因此可以在XML加载动作之后模拟设置即可   
	Document.prototype._readyState_ = 0;   
     
    //状态改变时要调用的事件处理函数   
	Document.prototype.onreadystatechange = null;   
  
    //加载XML状态改变时实现，私有的，由XMLDOM在加载XML文件动作前与后调用   
	Document.prototype.__changeReadyState__ = function (iReadyState) {
		//此句在 firefox3.7上运行报错：setting a property that has only a getter，因为
		//创建出的xml DOM对象就有readyState属性，且是只读的，所有以这把readyState改为
		//_readyState_
		this._readyState_ = iReadyState;
		if (typeof this.onreadystatechange == "function") {   
            //onreadystatechange由用户自已实现，模式状态改变时调用   
			this.onreadystatechange();
		}
	}; 
           
    //初始化parseError对象内部属性，在load、loadXML方法开头处调用   
	Document.prototype.__initError__ = function () {   
        //表示所发生的错误类型的数字代号（当没有错误时为0）   
		this.parseError.errorCode = 0;
	};   
       
    //加载完（状态为4时）判断加载过程是否有错，如果出错，设置错误信息，在load、loadXML方法后处调用   
	Document.prototype.__checkForErrors__ = function () {   
        //如果加载完XML过程中出错时，提取详细错误信息   
		if (this.documentElement.tagName == "parsererror") {
			this.parseError.errorCode = -999999;
		}
	};   
       
    //给Document对象添加loadXML方法，loadXML方法可以加载XML串，而不是XML文件   
	Document.prototype.loadXML = function (sXml) {   
        //初始化错误信息   
		this.__initError__();   
               
        //解析前修改状态为1   
		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; 
	  
	//为了模拟状态，需修改原load方法，此方法好比代理   
	Document.prototype.load = function (sURL) {
		this.__initError__();   
        //首先将状态设置成1   
		this.__changeReadyState__(1);   
        //然后调用原来的load方法   
		this.__load__(sURL);
	}; 
    
    //在使用时调用此方法模拟获取readyState
	Document.prototype.getReadyState = function () {
		return this._readyState_;
	};   
       
    //给每个节点增加xml属性   
	Node.prototype.__defineGetter__("xml", function () {
		var oSerializer = new XMLSerializer();
		return oSerializer.serializeToString(this, "text/xml");
	});
}
function XmlDom() {   
    //如果是IE浏览器   
	if (window.ActiveXObject) {
		var arrSignatures = ["MSXML2.DOMDocument.6.0","MSXML2.DOMDocument.5.0", "MSXML2.DOMDocument.4.0", 
		"MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument", "Microsoft.XmlDom"];   
        //从最新版本开始尝试，这样可以确保使用最新 XMLDOM   
		for (var i = 0; i < arrSignatures.length; i++) {
			try {   
                //创建XMLDOM对象   
				var oXmlDom = new ActiveXObject(arrSignatures[i]);
				return oXmlDom;
			}
			catch (oError) {   
                //ignore    
			}
		}             
		//否则未安装MSXML组件   
		throw new Error("MSXML is not installed on your system.");
	} else {//否则是否为Mozilla浏览器   
		if (document.implementation && document.implementation.createDocument) {   
            //创建无命令空间，空的 XML DOM   
			var oXmlDom = document.implementation.createDocument("", "", null);   
            
            //为XMLDOM添加微软paseError对象   
			oXmlDom.parseError = {valueOf:function () {
				return this.errorCode;
			}, toString:function () {
				return this.errorCode.toString();
			}};   
            //初始化parseError对象里的内部信息   
			oXmlDom.__initError__();   
           
            //通过load事件模拟状态4   
			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.");
		}
	}
}

2、示例

<html>
    <head>
        <title>Cross-Browser XML DOM Example</title>
        <script type="text/javascript" src="detect.js"></script>
        <script type="text/javascript" src="xmldom.js"></script>
    </head>
    <body>
        <script type="text/javascript">
	var oXmlDom = new XmlDom();
	oXmlDom.onreadystatechange = function () {
		//如果oXmlDom.getReadyState存在则为Mozilla浏览器
		if (oXmlDom.readyState == 4 || (oXmlDom.getReadyState 
							&& oXmlDom.getReadyState() == 4)) {
			//如果解释XML出错
			if (oXmlDom.parseError != 0) {
				//Mozilla
				if (oXmlDom.getReadyState) {
					alert(oXmlDom.xml);
				//IE
				} else {
					var oError = oXmlDom.parseError;
					alert("An error occurred:\nError Code: " 
					+ oError.errorCode + "\n" 
					+ "Line: " + oError.line + "\n" 
					+ "Line Pos: " + oError.linepos + "\n" 
					+ "Reason: " + oError.reason);
				}
			} else {
									//do somethins ...
				alert(oXmlDom.documentElement.tagName);
			}
		}
	};
	oXmlDom.loadXML("<root><child></root>");
	oXmlDom.loadXML("<root><child/></root>");
        </script> 
    </body>
</html>

 

 以下是执行结果图：

 

firefox:

 

 

IE: