原生JS操作XML

2016年10月16日Web前端0

虽然现在广泛使用json数据格式，但是xml这种数据格式也是有他的作用的。html作为xml的先驱，我们可以用JS操作html的节点（DOM），所以操作xml也不会是太复杂。

生成XML

xml的规范不在此篇的讨论范围之中。下面说明我们如何用原生的JS来创建xml节点，以生成xml文档。

现代浏览器（IE9+）

首先我们创建xml文档，

// 创建一个新的、文档元素为<root>的xml文档
var xmldom = document.implementation.createDocument('', 'root', null);
var child = xmldom.createElement('child');
var text = xmldom.createTextNode('hello');
child.setAttribute('a', 'dd'); // 可以像在html中一样为元素添加属性
child.appendChild(text);
xmldom.documentElement.appendChild(child);

我们可以用DOMParser类型来将xml字符串转换为文档，

var parser = new DOMParser(); // 要先创建一个DOMParser实例
// 第一个参数是xml字符串格式，也可以写成<root><child/></root>这种形式，第二个参数不可以省略
var xmldom = parser.parseFromString('<root><child></child></root>', 'text/xml');

用这种方法和第一种方法所达到的效果是一样的。 既然我们可以将xml的字符串形式转换成xml文档，那么也可以将xml文档序列化，

var serializer = new XMLSerializer();
var xmlstring = serializer.serializeToString(xmldom);

这样我们就可以得到序列化的xml文档。

IE8-

我们需要用到ActiveObject对象，首先创建xml对象，

// 创建XML对象
function createDocument() {
    if (typeof arguments.callee.activeXString != "string") {
        var versions = ["MSXML2.DOMDocument.6.0", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument"],
            i, 
            len;
        for (i = 0, len = versions.length; i < len; i++) {
            try {
                new ActiveXObject(versions[i]);
                arguments.callee.activeXString = versions[i];
                break;
            } catch (ex) {
            //pass
            }
        }
    }
    return new ActiveXObject(arguments.callee.activeXString);
}

var xmldom = createDocument();
xmldom.loadXML("<root><child></child></root>");

我们就得到了xml文档，当然如果你像创建xml文档，也得使用这种方式，

var xmldom = createDocument();
xmldom.loadXML("<root></root>");
var xmldom2 = xmldom.createElement("child");
var text = xmldom.createTextNode('hello');
xmldom2.appendChild(text);
xmldom.documentElement.appendChild(xmldom2);

读取XML文件

现代浏览器（IE9+）

chrome

由于他的安全机制的限制，不可以读取本地的XML文件。可以通过在本地设置服务器的方式来读取文件，类似与原生Ajax请求，这里用同步方式来实现，

var xml = new XMLHttpRequest();
xml.open("GET", xmlFile, false);
xml.send(null);
if(xmlhttp.readyState == 4){
    xmldom = xmlhttp.responseXML.documentElement;
}

firefox

我们可以用以下方法来获取我们本机上的xml文件

var xmldom = document.implementation.createDocument("", "", null);
xmldom.async = false; // 同步
xmldom.load('aa.xml');

IE8-

继续使用先前的createDocument函数，用以下方法创建，

var xmldom = createDocument();
xmldom.async = false;
xmldom.load('aa.xml');

加载方式和ff比较相近。

错误处理

现代浏览器（IE9+）

DOM2级处理xml错误时，没有用对象来捕获错误，而是直接生成一个错误的XML文档，通过这个文档可以获得错误信息。

var errors = xmldom.getElementsByTagName('parsererror');
if (errors.length) {
    console.log(errors[0].textContent);
}

IE8-

在低版本的IE下，错误是xml文档的一个属性（无错时返回0），我们可以直接去获取，

if (xmldom.parseError != 0) {
    // 处理错误
}

XPath

现代浏览器（非IE）

我们使用DOM3级的Xpath来处理这个问题。首先，我们需要得到XpathResult对象，有以下两种方法，

一、

var eva = new XPathEvaluator();
var result = eva.evaluate('root/child', xmldom, null, XPathResult.OROERED_NODE_IIERATOR_TYPE, null);

二、

var result = xmldom.evaluate('root/child', xmldom, null, XPathResult.OROERED_NODE_IIERATOR_TYPE, null);

两个函数看上去参数十分的多，共有5个参数，第一个参数是XPath的路径，第二个参数是上下文节点对象，就是需要解析的xml文档对象，第三个参数是命名空间求解器（通常是null），第四个参数是返回的结果类型，第五个参数是保存结果的XPathResult对象（通常是null）。

返回的结果类型共有十种，将在以后进行介绍。

我们可以用以下方法来获得一个单一的节点，

if (result != null) {
    console.log(result.singleNodeValue.tagName);
}

对于节点集合，我们可以这样去处理，

var nodes = [];
if (result != null) {
    while ((node = result.iteraNext()) != null) {
        nodes.push(node);
    } 
}

IE

ie下是基于ActiveX的xmlDOM文档对象实现的，在每个节点提供两个方法，selectSingleNode()和selectNodes()方法。两个方法都接受一个XPath模式的查找路径，找到匹配的返回，无则返回null。

var xmlele = xmldom.selectSingleNode('life/city'); // 得到第一个city节点，直接省略life根节点会出错
xmlele.xml // "<city><people><name>aaaa</name><age>11</age></people></city>"
xmlele.tagName // "city"    xmlele.nodeName 也可以得到

操作十分类似与对html的操作。 对于路径的写法，有以下几种情况，

  • selectSingleNode('life/city[n]')  获取第n个节点  XPath的路径是从1开始的
  • selectSingleNode('life/city/text()')  获取节点中得值
  • selectSingleNode('//city')  在整个xml中，获得city，不关心层次
  • selectSingleNode('life//city')  life层下取得city节点，中间的层次不关心
var xmlele = xmldom.selectNodes('life/city');  // 获得一个集合（数组）
xmlele.length  // 1

最后，在异步加载中，我们可以为onreadystatechange添加处理程序，共有4个状态（readyState），

  1. ：DOM正在加载数据
  2. ：DOM已经加载完成数据
  3. ：DOM已经可以使用，某些部分可能无法访问
  4. ：DOM已经完全可以使用

至于，整个一个大的兼容函数怎么写，我们只需要一次对各个不同的浏览器进行判断就可以了。

JavaScript

目录