JavaScript & XML

原文:JavaScript & XML

检测浏览器能力特性

        //检测浏览器是否支持DOM2级XML
        var hasXmlDom = document.implementation.hasFeature('XML', '2.0');

        //检测浏览器是否支持DOM3级XPath
        var supportsXPath = document.implementation.hasFeature('XPath', '3.0');

DOM2级创建XML文档

        //创建一个新的  文档元素为<root>的xml文档
        var xmldom = document.implementation.createDocument("", "root", null);

        alert(xmldom.documentElement.tagName);  //"root"

        var child = xmldom.createElement("child");
        xmldom.documentElement.appendChild(child);

createDocument方法每一个参数为命名空间、第三个参数为文档类型。（创建一个XML DOM文档没有默认的命名空间，也没有文档类型）

但即使这样也必须传入相应的参数，即使你不需要指定命名空间和文档类型。

DOMParser类型

为了将XML解析为DOM文档，FireFox引入了DOMParser类型。来看一下如何使用。

        var parser = new DOMParser();//firefox引入DOMParser
        var xmldom = parser.parseFromString("<root><child/></root>", "text/xml");// 要解析的xml字符串         第二个参数为内容类型

        alert(xmldom.documentElement.tagName);  //"root"
        alert(xmldom.documentElement.firstChild.tagName); //"child"

        var anotherChild = xmldom.createElement("child");
        xmldom.documentElement.appendChild(anotherChild);

        var children = xmldom.getElementsByTagName("child");
        alert(children.length);   //

DOMParser只能解析格式良好的XML，那如果解析发生错误，我们应该怎么处理呢，看代码

        var parser = new DOMParser(),
            xmldom,
            errors;

        try {
            xmldom = parser.parseFromString("<root>", "text/xml");
            errors = xmldom.getElementsByTagName("parsererror");//如果发生错误将会返回一个文档元素是<parsererror>
            if (errors.length > 0){
                throw new Error("XML Parsing Error:" + (new XMLSerializer()).serializeToString(xmldom, "text/xml"));
            }
        } catch (ex) {
            alert(ex.message);
        }

XMLSerializer类型

上述我们讲了如何把将XML解析为DOM文档，那如果我们需要将DOM文档序列化为XML字符串，怎么办呢，这时XMLSerializer登场了，创建好XMLSerializer实例后我们只需要把文档传入给serializeToString方法即可。看代码：

        var parser = new DOMParser();
        var xmldom = parser.parseFromString("<root><child/></root>", "text/xml");

        //convert back into XML
        var serializer = new XMLSerializer();//先创建XMLSerializer实例
        var xml = serializer.serializeToString(xmldom);//将文档传入到serializeToString
        alert(xml);

XMLSerializer可以序列化任何有效的DOM对象，不仅仅包括个别的节点，也可以是HTML文档。但如果把非DOM对象传入给serializeToString方法将会导致错误。

IE8及之前版本中的XML

        //ie8及之前版本的xml
        function createDocument(){
            if (typeof arguments.callee.activeXString != "string"){
                var versions = ["MSXML2.DOMDocument.6.0", "MSXML2.DOMDocument.3.0",
                                "MSXML2.DOMDocument"];

                for (var i=0,len=versions.length; i < len; i++){
                    try {
                        var xmldom = new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        return xmldom;
                    } catch (ex){
                        //skip
                    }
                }
            }

            return new ActiveXObject(arguments.callee.activeXString);//这里用了“惰性载入”方式进行了createDocument函数的优化
        }

IE下同步方式加载及解析XML

在同步方式下，调用load方法加载好xml文件之后就可以立即解析并执行相关的xml处理了。

用到了example.xml文件代码如下：

<?xml version="1.0"?>
<root><child/></root>

js同步加载的代码：

        var xmldom = createDocument();//这里用到了上面的createDocument方法
        xmldom.async = false;
        xmldom.load("example.xml");

        if (xmldom.parseError != 0) {
            alert("An error occurred:\nError Code: "
                  + xmldom.parseError.errorCode + "\n"//错误类型的数值编码
                  + "Line: " + xmldom.parseError.line + "\n"//发生错误的行
                  + "Line Pos: " + xmldom.parseError.linepos + "\n"//发生错误的行中的字符
                  + "Reason: " + xmldom.parseError.reason);//错误的具体原因
        } else {

            alert(xmldom.documentElement.tagName);  //"root"
            alert(xmldom.documentElement.firstChild.tagName); //"child"

            var anotherChild = xmldom.createElement("child");
            xmldom.documentElement.appendChild(anotherChild);

            var children = xmldom.getElementsByTagName("child");
            alert(children.length);   //

            alert(xmldom.xml);/*<?xml version="1.0"?><root><child/></root>*/

        }

IE下异步加载及解析XML

var xmldom = createDocument();
        xmldom.async = true;//设置为异步

        xmldom.onreadystatechange = function () {//onreadystatechange事件绑定必须在调用load方法之前
            if (xmldom.readyState == 4) {//表示xml文件已经全部加载完毕  readyState表示就绪状态
                if (xmldom.parseError != 0) {
                    alert("An error occurred:\nError Code: "
                          + xmldom.parseError.errorCode + "\n"
                          + "Line: " + xmldom.parseError.line + "\n"
                          + "Line Pos: " + xmldom.parseError.linepos + "\n"
                          + "Reason: " + xmldom.parseError.reason);
                } else {
                    //在方法内部必须使用xmldom而不能使用this对象
                    alert(xmldom.documentElement.tagName);  //"root"
                    alert(xmldom.documentElement.firstChild.tagName); //"child"

                    var anotherChild = xmldom.createElement("child");
                    xmldom.documentElement.appendChild(anotherChild);

                    var children = xmldom.getElementsByTagName("child");
                    alert(children.length);   //

                    alert(xmldom.xml);
                }
            }
        };

        xmldom.load("example.xml");

跨浏览器处理XML

将XML转换为DOM对象

        function parseXml(xml){
            var xmldom = null;

            if (typeof DOMParser != "undefined") {//code for Mozilla, Firefox, Opera, etc.
                xmldom = (new DOMParser()).parseFromString(xml, "text/xml");
                var errors = xmldom.getElementsByTagName("parsererror");
                if (errors.length){
                    throw new Error("XML parsing error:" + errors[0].textContent);
                }
            } else if (typeof ActiveXObject != "undefined") {//code for IE
                xmldom = createDocument();
                xmldom.loadXML(xml);
                if (xmldom.parseError != 0){
                    throw new Error("XML parsing error: " + xmldom.parseError.reason);
                }
            } else {
                throw new Error("No XML parser available.");
            }

            return xmldom;
        }    

将DOM对象转换为XML

        function serializeXml(xmldom){

            if (typeof XMLSerializer != "undefined"){//code for Mozilla, Firefox, Opera, etc.
                return (new XMLSerializer()).serializeToString(xmldom);
            } else if (typeof xmldom.xml != "undefined") {//code for IE
                return xmldom.xml;
            } else {
                throw new Error("Could not serialize XML DOM.");
            }
        }

DOM3级的XPath

讲到xml自然而然不会少了XPath,DOM3级XPath规范定义的类型中，最重要的两个类型是XPathEvaluator和XPathResult

XPathEvaluator用于在特定的上下文中对XPath表达式求值。它主要有以下方法：

主要讲一个evaludate方法各个参数的含义

expression:XPath表达式

context：上下文节点

nsresolver：命名空间求解器

type：返回结果的类型

result：保存结果的 XPathResult对象

看Demo示例：

            var xmldom = (new DOMParser()).parseFromString("<employees><employee title=\"Software Engineer\"><name>Nicholas C. Zakas</name></employee><employee title=\"Salesperson\"><name>Jim Smith</name></employee></employees>", "text/xml");
            var serializer = new XMLSerializer();
            var result = xmldom.evaluate("employee/name", xmldom.documentElement, null, XPathResult.ORDERED_NODE_ITERATOR_TYPE, null);
            //XPathResult.ORDERED_NODE_ITERATOR_TYPE 为最常用的结果类型

            var message = "";
            var count = 0;

            var element = result.iterateNext();
            while (element) {
                message += serializer.serializeToString(element) + "\n";
                count++;
                element = result.iterateNext();//必须使用iterateNext方法从节点中取得匹配的节点
            }

            message = "There are " + count + " matching nodes.\n" + message;

            alert(message);

            var xmldom = (new DOMParser()).parseFromString("<employees><employee title=\"Software Engineer\"><name>Nicholas C. Zakas</name></employee><employee title=\"Salesperson\"><name>Jim Smith</name></employee></employees>", "text/xml");
            var serializer = new XMLSerializer();
            var result = xmldom.evaluate("employee/name", xmldom.documentElement, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
            //XPathResult.ORDERED_NODE_SNAPSHOT_TYPE 快照结果类型
            var message = "There are " + result.snapshotLength + " matching nodes.\n";
            var count = 0;

            if (result != null){
                for (var i = 0; i < result.snapshotLength; i++) {     //如果是快照结果类型，则必须使用snapshotItem方法和snapshotLength属性
                    message += serializer.serializeToString(result.snapshotItem(i)) + "\n";
                }
            }

            alert(message);

            var xmldom = (new DOMParser()).parseFromString("<employees><employee title=\"Software Engineer\"><name>Nicholas C. Zakas</name></employee><employee title=\"Salesperson\"><name>Jim Smith</name></employee></employees>", "text/xml");
            var serializer = new XMLSerializer();
            var result = xmldom.evaluate("employee/name", xmldom.documentElement, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null);
            //XPathResult.FIRST_ORDERED_NODE_TYPE  返回第一个匹配的节点
            if (result != null){
                alert(serializer.serializeToString(result.singleNodeValue));//通过singleNodeValue属性获得其值
            }

            var xmldom = (new DOMParser()).parseFromString("<employees><employee title=\"Software Engineer\"><name>Nicholas C. Zakas</name></employee><employee title=\"Salesperson\"><name>Jim Smith</name></employee></employees>", "text/xml");
            var result = xmldom.evaluate("employee/name", xmldom.documentElement, null, XPathResult.BOOLEAN_TYPE, null);
            alert(result.booleanValue);

          var xmldom = (new DOMParser()).parseFromString("<employees><employee title=\"Software Engineer\"><name>Nicholas C. Zakas</name></employee><employee title=\"Salesperson\"><name>Jim Smith</name></employee></employees>", "text/xml");
            var result = xmldom.evaluate("count(employee/name)", xmldom.documentElement, null, XPathResult.NUMBER_TYPE, null);
            alert(result.numberValue);

            var xmldom = (new DOMParser()).parseFromString("<employees><employee title=\"Software Engineer\"><name>Nicholas C. Zakas</name></employee><employee title=\"Salesperson\"><name>Jim Smith</name></employee></employees>", "text/xml");
            var result = xmldom.evaluate("employee/name", xmldom.documentElement, null, XPathResult.STRING_TYPE, null);

            alert(result.stringValue);

处理命名空间的两种方法：

1. 通过createNSResolver方法来创建XPathNSResolver对象
2. 定义一个函数，让它接收一个命名空间前缀，返回关联的URI

看代码：

            var xmldom = (new DOMParser()).parseFromString("<?xml version=\"1.0\"?><wrox:books xmlns:wrox=\"http://www.wrox.com/\"><wrox:book><wrox:title>Professional JavaScript for Web Developers</wrox:title><wrox:author>Nicholas C. Zakas</wrox:author></wrox:book><wrox:book><wrox:title>Professional Ajax</wrox:title><wrox:author>Nicholas C. Zakas</wrox:author><wrox:author>Jeremy McPeak</wrox:author><wrox:author>Joe Fawcett</wrox:author></wrox:book></wrox:books>", "text/xml");
            var nsresolver = xmldom.createNSResolver(xmldom.documentElement);
            var result = xmldom.evaluate("wrox:book/wrox:author",
                                         xmldom.documentElement, nsresolver,
                                         XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

            alert(result.snapshotLength);   

            var xmldom = (new DOMParser()).parseFromString("<?xml version=\"1.0\"?><wrox:books xmlns:wrox=\"http://www.wrox.com/\"><wrox:book><wrox:title>Professional JavaScript for Web Developers</wrox:title><wrox:author>Nicholas C. Zakas</wrox:author></wrox:book><wrox:book><wrox:title>Professional Ajax</wrox:title><wrox:author>Nicholas C. Zakas</wrox:author><wrox:author>Jeremy McPeak</wrox:author><wrox:author>Joe Fawcett</wrox:author></wrox:book></wrox:books>", "text/xml");
            var nsresolver = function(prefix){
                switch(prefix){
                    case "wrox": return "http://www.wrox.com/";
                }
            };
            var result = xmldom.evaluate("wrox:book/wrox:author",
                                         xmldom.documentElement, nsresolver,
                                         XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);

            alert(result.snapshotLength);

IE下的XPath

用demo示例说话：

demo中用到的xml文件：

<?xml version="1.0"?>
<employees>
    <employee title="Software Engineer">
        <name>Nicholas C. Zakas</name>
    </employee>
    <employee title="Salesperson">
        <name>Jim Smith</name>
    </employee>
</employees>

            var xmldom = createDocument();
            xmldom.async = false;
            xmldom.load("employees.xml");

            var names = xmldom.documentElement.selectNodes("employee/name");

            var message = "There are " + names.length + " matching nodes.\n";

            for (var i=0, len=names.length; i < len; i++) {
                message += names[i].xml + "\n";
            }

            alert(message);

            var xmldom = createDocument();
            xmldom.loadXML("<?xml version=\"1.0\"?><wrox:books xmlns:wrox=\"http://www.wrox.com/\"><wrox:book><wrox:title>Professional JavaScript for Web Developers</wrox:title><wrox:author>Nicholas C. Zakas</wrox:author></wrox:book><wrox:book><wrox:title>Professional Ajax</wrox:title><wrox:author>Nicholas C. Zakas</wrox:author><wrox:author>Jeremy McPeak</wrox:author><wrox:author>Joe Fawcett</wrox:author></wrox:book></wrox:books>");
            xmldom.setProperty("SelectionNamespaces", "xmlns:wrox='http://www.wrox.com/'");//在IE下如果要设置命名空间的话 则需要这样

            var result = xmldom.documentElement.selectNodes("wrox:book/wrox:author");
            alert(result.length);    

跨浏览器使用XPath

        /*
        *@desc:公共函数  利用xpath在规定的命名空间和上下文中选择单个节点
        *@param--context:上下文
        *@param--expression:xpath表达式
        *@param--namespaces:命名空间
        */
        function selectSingleNode(context, expression, namespaces) {
            var doc = (context.nodeType != 9 ? context.ownerDocument : context);//doc变量保存对xml文档的引用

            if (typeof doc.evaluate != "undefined") {//检测文档中是否存在evaluate方法 也就是是否支持DOM3级XPath
                var nsresolver = null;//初始化
                if (namespaces instanceof Object) {//检测传入的namespaces对象
                    nsresolver = function (prefix) {//如果提供了命名空间  将其设置为一个函数
                        return namespaces[prefix];//返回命名空间的URI
                    };
                }

                var result = doc.evaluate(expression, context, nsresolver, XPathResult.FIRST_ORDERED_NODE_TYPE, null);//在确定是节点之后再返回该结果
                return (result !== null ? result.singleNodeValue : null);

            } else if (typeof context.selectSingleNode != "undefined") {//code for IE  检查context节点中是否存在selectSingleNode方法

                //create namespace string
                if (namespaces instanceof Object) {//有选择的构建命名空间信息
                    var ns = "";
                    for (var prefix in namespaces) {//如果传入了namespaces对象  迭代其属性并以适应格式创建一个字符串
                        if (namespaces.hasOwnProperty(prefix)) {//确保 对Object.prototype的任何修改不会影响到当前函数
                            ns += "xmlns:" + prefix + "='" + namespaces[prefix] + "' ";
                        }
                    }
                    doc.setProperty("SelectionNamespaces", ns);
                }
                return context.selectSingleNode(expression);//返回结果
            } else {
                throw new Error("No XPath engine found.");//找不到Xpath处理引擎
            }
        }

        /*
         *@desc:公共函数  利用xpath在规定的命名空间和上下文中选择满足条件的结果集
         *@param--context:上下文
         *@param--expression:xpath表达式
         *@param--namespaces:命名空间
         */
        function selectNodes(context, expression, namespaces) {
            var doc = (context.nodeType != 9 ? context.ownerDocument : context);

            if (typeof doc.evaluate != "undefined") {
                var nsresolver = null;
                if (namespaces instanceof Object) {
                    nsresolver = function (prefix) {
                        return namespaces[prefix];
                    };
                }

                var result = doc.evaluate(expression, context, nsresolver, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);//使用有序快照结果类型   如果没有找到匹配项的情况下返回一个数组
                var nodes = new Array();

                if (result !== null) {
                    for (var i = 0, len = result.snapshotLength; i < len; i++) {
                        nodes.push(result.snapshotItem(i));
                    }
                }

                return nodes;
            } else if (typeof context.selectNodes != "undefined") {//code for IE
                //create namespace string
                if (namespaces instanceof Object) {
                    var ns = "";
                    for (var prefix in namespaces) {
                        if (namespaces.hasOwnProperty(prefix)) {
                            ns += "xmlns:" + prefix + "='" + namespaces[prefix] + "' ";
                        }
                    }
                    doc.setProperty("SelectionNamespaces", ns);
                }
                var result = context.selectNodes(expression);//IE下返回一个NodeList
                var nodes = new Array();

                for (var i = 0, len = result.length; i < len; i++) {
                    nodes.push(result[i]);
                }

                return nodes;//确保都返回数组类型
            } else {
                throw new Error("No XPath engine found.");
            }
        }

IE中的XSLT

可能说起XSLT，大家都不知道所云为何物，先看一个简单的示例，看效果再说理论。

demo中用的的employees.xml文件代码如下：

<?xml version="1.0"?>
<employees>
    <employee title="Software Engineer">
        <name>Nicholas C. Zakas</name>
    </employee>
    <employee title="Salesperson">
        <name>Jim Smith</name>
    </employee>
</employees>

demo中用的的employees.xslt文件代码如下：

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

  <xsl:output method="html" />

  <xsl:template match="/">
    <ul>
      <xsl:apply-templates select="*" />
    </ul>
  </xsl:template>

  <xsl:template match="employee">
    <li>
      <xsl:value-of select="name" />, <em>
        <xsl:value-of select="@title" />
      </em>
    </li>
  </xsl:template>

</xsl:stylesheet>

示例demo的js文件如下所示：

            window.onload = function () {
                var xmldom = createDocument();
                var xsltdom = createDocument();

                xmldom.async = false;
                xsltdom.async = false;

                xmldom.load("employees.xml");//加载一个xml的DOM文档
                xsltdom.load("employees.xslt");//加载一个XSLT样式表的DOM文档

                var result = xmldom.documentElement.transformNode(xsltdom);//result 保存一个转换之后得去的字符串
                var div = document.getElementById("divResult");
                div.innerHTML = result;

            }

页面中看到的效果如下图所示：

再来看一个复杂一点儿的例子：

所用到的employees2.xslt文件如下所示：

<?xml version="1.0"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

    <xsl:output method="html" />

    <xsl:param name="message" />

    <xsl:template match="/">
       <ul>
           <xsl:apply-templates select="*" />
       </ul>
       <p>Message: <xsl:value-of select="$message" /></p>
    </xsl:template>

    <xsl:template match="employee">
        <li><xsl:value-of select="name" />, <em><xsl:value-of select="@title" /></em></li>
    </xsl:template>

</xsl:stylesheet>

页面js文件如下所示：

        /*
        *@desc:创建线程安全的XML文档
        */
        function createThreadSafeDocument() {
            if (typeof arguments.callee.activeXString != "string") {
                var versions = ["MSXML2.FreeThreadedDOMDocument.6.0",
                                "MSXML2.FreeThreadedDOMDocument.3.0",
                                "MSXML2.FreeThreadedDOMDocument"];

                for (var i = 0, len = versions.length; i < len; i++) {
                    try {
                        var xmldom = new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        return xmldom;
                    } catch (ex) {
                        //skip
                    }
                }
            }

            return new ActiveXObject(arguments.callee.activeXString);
        }
        /*
        *@desc:创建XSLT模板
        */
        function createXSLTemplate() {
            if (typeof arguments.callee.activeXString != "string") {
                var versions = ["MSXML2.XSLTemplate.6.0",
                                "MSXML2.XSLTemplate.3.0",
                                "MSXML2.XSLTemplate"],
                    i, len;

                for (i = 0, len = versions.length; i < len; i++) {
                    try {
                        var template = new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        return template
                    } catch (ex) {
                        //skip
                    }
                }
            }

            return new ActiveXObject(arguments.callee.activeXString);
        }

        window.onload = function () {
            var xmldom = createDocument();
            var xsltdom = createThreadSafeDocument();

            xmldom.async = false;
            xsltdom.async = false;

            xmldom.load("employees.xml");
            xsltdom.load("employees2.xslt");

            var template = createXSLTemplate();
            template.stylesheet = xsltdom;

            var processor = template.createProcessor();
            processor.input = xmldom;//必须将要转换的节点指定给input属性
            processor.addParameter("message", "Hello World!");
            processor.transform();//调用transform方法即可执行转换并将结果作为字符串保存在output属性中

            var div = document.getElementById("divResult");
            div.innerHTML = processor.output;

        }

IE页面显示的结果如下图所示：

XSLTProcessor类型

        window.onload = function () {
            //use XHR to load
            //加载两个文件  一个是基于xml  一个是基于xslt
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("get", "employees.xml", false);
            xmlhttp.send(null);
            var xmldom = xmlhttp.responseXML;

            xmlhttp = new XMLHttpRequest();
            xmlhttp.open("get", "employees.xslt", false);
            xmlhttp.send(null);
            var xsltdom = xmlhttp.responseXML;
            //创建一个XSLTProcessor对象
            var processor = new XSLTProcessor();
            processor.importStylesheet(xsltdom);//使用importStylesheet指定XSLT
            //执行转换
            var result = processor.transformToDocument(xmldom); //如果想返回一个完整的DOM对象
            //var fragment = processor.transformToFragment(xmldom, document);//如果想得到一个文档片段对象
            //transformToFragment方法接受的参数  要转换的XML DOM
            var div = document.getElementById("divResult");

            var xml = (new XMLSerializer()).serializeToString(result);
            alert(xml);
            div.innerHTML = xml;

        }

跨浏览器使用XSLT

            /*
            *@desc跨浏览器使用xslt的转换
            *param--context:要执行转换的上下文节点
            *param--xslt:xslt文档对象
            */
            function transform(context, xslt){
                if (typeof XSLTProcessor != "undefined") {//code for Mozilla, Firefox, Opera, etc.
                    var processor = new XSLTProcessor();
                    processor.importStylesheet(xslt);

                    var result = processor.transformToDocument(context);
                    return (new XMLSerializer()).serializeToString(result);//将返回的结果序列化为字符串

                } else if (typeof context.transformNode != "undefined") {//code for IE
                    return context.transformNode(xslt);
                } else {
                    throw new Error("No XSLT processor available.");
                }
            }

页面的js文件如下：

            window.onload = function () {
                //use XHR to load
                var xmlhttp = new XMLHttpRequest();
                xmlhttp.open("get", "employees.xml", false);
                xmlhttp.send(null);
                var xmldom = xmlhttp.responseXML;

                xmlhttp = new XMLHttpRequest();
                xmlhttp.open("get", "employees.xslt", false);
                xmlhttp.send(null);
                var xsltdom = xmlhttp.responseXML; 

                var result = transform(xmldom, xsltdom);
                document.getElementById('divResult').innerHTML = result;

            }

页面的HTML结构图如下所示：

忽然发现这个太难理解了，不过挺实用的。