JavaScript XML 跨浏览器

一、浏览器对XML DOM的支持
    1.判断浏览器对DOM2.0级别的XML的支持
        alert(document.implementation.hasFeature("XML", "2.0"));    // true
    2.解析XML
        // 在ie8以下创建XML
        function createXML() {
            if(typeof arguments.callee.activeXString != "string"){
                var versions = ["MSXML2.DOMDocument", "MSXML2.DOMDocument.3.0", "MSXML2.DOMDocument.6.0"], i, len;
                for (i = 0, len = versions.length; i < len ; i++)
                {
                    try
                    {
                        new ActiveXObject(versions[i]);
                        arguments.callee.activeXString = versions[i];
                        break;
                    }
                    catch (error){}
                }
            }
            return new ActiveXObject(arguments.callee.activeXString);
        }
        // 解析XML字符串为XML DOM对象
        function parseXml (xml) {
            var xmlDom;
            if (typeof DOMParser != "undefined")
            {
                xmlDom = (new DOMParser()).parseFromString(xml, "text/xml");
                var errors = xmlDom.getElementsByTagName("parsererror");
                if(errors.length)
                {
                    throw new Error(errors[0].textContent);
                }
                //alert(xmlDom.documentElement.tagName);
            } else if (typeof ActiveXObject != "undefined")
            {
                xmlDom = new createXML();
                xmlDom.loadXML(xml);
                if (xmlDom.parseError != 0)
                {
                    throw new Error(xmlDom.parseError.reason);
                }
                //alert(xmlDom.xml);
            } else {
                throw new Error("不支持xml dom");
            }
            return xmlDom;
        }   
        // 测试
        var xmldom = null;
        try {
            xmldom = parseXml("<root><child/></root>");
        } catch (ex){
            alert(ex.message);
        }
        alert(xmldom);  
    3.序列化xml
        function serializeXml(xmldom){
            if (typeof XMLSerializer != "undefined"){
                return (new XMLSerializer()).serializeToString(xmldom);
            } else if (typeof xmldom.xml != "undefined"){
                // Less IE8
                return xmldom.xml;
            } else {
                throw new Error("Could not serialize XML DOM.");
            }
        }
        // 测试
        var xmldom = null;
        try {
            xmldom = parseXml("<root><child/></root>");
        } catch (ex){
            alert(ex.message);
        }
        var serizlize = serializeXml(xmldom);
        alert(serizlize);   // <root><child/></root>
    4.加载xml文件
        function parseXmlFile(file) {
            try //Internet Explorer
              {
                xmlDoc=new ActiveXObject("Microsoft.XMLDOM");
              }
            catch(e)
              {
                  try //Firefox, Mozilla, Opera, etc.
                    {
                    xmlDoc=document.implementation.createDocument("","",null);
                    }
                  catch(e) {alert(e.message)}
              }
            try 
              {
                  xmlDoc.async=false;
                  xmlDoc.load(file);
              }
            catch(e) {alert(e.message)}

            return xmlDoc;
        }
二、浏览器对XPATH的支持
    1.判断浏览器对DOM3的XPath的支持
        alert(document.implementation.hasFeature("XPath", "3.0"));  // true
    2.跨浏览器兼容
        /**根据 * param context : XML DOM上下文环境 * 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"){
                // 创建命名空间字符串
                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);
                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.");
            }
        }
        var xmldom = null;
        try {
            xmldom = parseXml("<yc:root xmlns:yc=\"http://www.yc.com/\"><yc:child>zhangshan</yc:child><yc:child>lisi</yc:child></yc:root>");
        } catch (ex){
            alert(ex.message);
        }
        var result = selectNodes(xmldom.documentElement, "yc:child",
        { yc: "http://www.yc.com/"});
        for(var i = 0, len = result.length; i < len; i++) {
            alert(result[i].firstChild.nodeValue);  // zhangshan,lisi
        }
三、浏览器对XLST的支持   将xml文件用xsl文件修饰，形成为html文件，html文件包括xml的内容和xsl的样式
    下面我们来讲一个例子，大体是用javascript操作xml文件和xsl文件，将他们合并为html形式的文件当然，
    我们返回的是html形式的字符串，以下是具体步骤：
    1.准备文件cdcatalog.xml和cdcatalog.xsl
        ①cdcatalog.xml文件：
        <?xml version="1.0" encoding="ISO-8859-1"?>
        <!-- Edited with XML Spy v2007 (http://www.altova.com) -->
        <catalog>
            <cd>
                <title>Empire Burlesque</title>
                <artist>Bob Dylan</artist>
                <country>USA</country>
                <company>Columbia</company>
                <price>10.90</price>
                <year>1985</year>
            </cd>
            <cd>
                <title>Hide your heart</title>
                <artist>Bonnie Tyler</artist>
                <country>UK</country>
                <company>CBS Records</company>
                <price>9.90</price>
                <year>1988</year>
            </cd>
        </catalog>
        ②cdcatalog.xsl文件：
        <?xml version="1.0" encoding="ISO-8859-1"?>
        <!-- Edited with XML Spy v2007 (http://www.altova.com) -->
        <xsl:stylesheet version="1.0"
        xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
        <xsl:output method='html' version='1.0' encoding='UTF-8' indent='yes'/>
        <xsl:template match="/">
          <html>
          <body>
          <h2>My CD Collection</h2>
            <table border="1">
              <tr bgcolor="#9acd32">
                <th align="left">Title</th>
                <th align="left">Artist</th>
              </tr>
              <xsl:for-each select="catalog/cd">
              <tr>
                <td><xsl:value-of select="title"/></td>
                <td><xsl:value-of select="artist"/></td>
              </tr>
              </xsl:for-each>
            </table>
          </body>
          </html>
        </xsl:template>
        </xsl:stylesheet>
    2.用javascript将两个文件加载，用上述的parseXmlFile函数
        var xmldom = parseXmlFile("xml/cdcatalog.xml");
        var xsltdom = parseXmlFile("xml/cdcatalog.xsl");
    3.将xml文件和xsl文件转换为字符串
        function transform(context, xslt){
            if (typeof XSLTProcessor != "undefined"){
                // 创建XSLTProcessor对象
                var processor = new XSLTProcessor();
                // 导入xslt样式表
                processor.importStylesheet(xslt);
                // 转化为文档
                var result = processor.transformToDocument(context);
                // 序列化为字符串
                return (new XMLSerializer()).serializeToString(result);
            } else if (typeof context.transformNode != "undefined") {
                return context.transformNode(xslt);
            } else {
                throw new Error("No XSLT processor available.");
            }
        }
        var result = transform(xmldom, xsltdom);
        alert(result);  // html形式的字符串
    4.接下来就是将result返回的字符串拷贝下来，放入一个html文件中就可以看到效果了。