美文网首页
js处理xml(不同浏览器兼容)

js处理xml(不同浏览器兼容)

作者: 帅气滴糟老头 | 来源:发表于2018-09-25 19:44 被阅读0次

    记录下工作中用到的处理xml的通用代码,顺便吐槽下IE(#狗头)


    区分当前浏览器是不是ie浏览器

    window.ActiveXObject说明:
    ie10以下,window.ActiveXObject返回一个对象,可以用 !!window.ActiveXObject 来判断是否是ie浏览器。
    但是从ie11开始,window.ActiveXObject返回的是undefined,但是尽管如此,window.ActiveXObject === undefined 在ie11中是不成立的。下图是在ie11控制台做的测试结果:

    ie11测试

    其他非ie浏览器(如chrome,firefox,opera,甚至ie的亲弟弟edge),window.ActiveXObject都是undefined,但是和ie11不同,window.ActiveXObject === undefined是成立的,下面只举例在chrome控制台做的测试结果:

    chrome测试

    所以现在可以用window.ActiveXObject !== undefined来判断当前浏览器,返回true就说明是ie浏览器。

    String字符串与xml对象间的互相转换:

    /**
     * 字符串转xml对象
     * @param xmlString
     * @returns {*}
     * @constructor
     */
    function string2Xml(xmlString) {
        if (window.ActiveXObject !== undefined) { // for IE
            var xmlObject = new ActiveXObject("Microsoft.XMLDOM");
            xmlObject.async = "false";
            xmlObject.loadXML(xmlString);
            return xmlObject;
        }
        else { // for other browsers
            var parser = new DOMParser();
            var xmlObject = parser.parseFromString(xmlString, "text/xml");
            return xmlObject;
        }
    }
    
    /**
     * xml对象转字符串
     * @param xmlObject
     * @returns {*}
     * @constructor
     */
    function xml2String(xmlObject) {
        if (window.ActiveXObject !== undefined) { // for IE
            return xmlObject.xml;
        }
        else { // for other browsers
            return (new XMLSerializer()).serializeToString(xmlObject);
        }
    }
    

    xml对象转json对象

    ie浏览器不支持children属性,只能用childNodes属性,下面是xml对象转json的代码实现,可以当做工具类使用:

    /**
     * 将xml对象转json对象
     * @param xml
     */
    function Xml2Json(xml) {
        var js_obj = {};
        if (xml.nodeType === Node.ELEMENT_NODE) { // 元素节点
            var _attr = xml.attributes;
            if (_attr.length > 0) {
                for (var j = 0; j < _attr.length; j++) {
                    // 属性前面用‘@’标注,可以自定义
                    js_obj['@' + _attr[j].nodeName] = _attr[j].value;
                }
            }
        } else if (xml.nodeType === Node.TEXT_NODE) { // 文本
            // 下面正则意思是去掉文本里的空格换行和回车
            js_obj = (xml.nodeValue.replace(/[\ +\r\n]/g, "") === "") ? "" : xml.nodeValue;
        }
        if (xml.hasChildNodes()) {
            var nodes = xml.childNodes;
            for (var i = 0; i < nodes.length; i++) {
                var nodeName = nodes[i].nodeName;
                if (typeof(js_obj[nodeName]) === "undefined") {
                    var _jsObj = Xml2Json(nodes[i]); // 递归
                    if (_jsObj !== "") {
                        js_obj[nodeName] = _jsObj;
                    }
                } else {
                    if (typeof(js_obj[nodeName].push) === "undefined") {
                        var old = js_obj[nodeName];
                        js_obj[nodeName] = [];
                        js_obj[nodeName].push(old);
                    }
                    var _jsObj = Xml2Json(nodes[i]); // 递归
                    if (_jsObj !== "") {
                        js_obj[nodeName].push(_jsObj);
                    }
                }
            }
        }
        return js_obj;
    }
    

    节点类型(xml.nodeType)判断:
    Node.ELEMENT_NODE:值为1,元素节点
    Node.TEXT_NODE:值为3,文本
    Node.COMMENT_NODE:值为8,注释节点
    Node.DOCUMENT_NODE:值为9,document节点


    下面的是综合上面代码实现的xml对象转json对象的html页面,可以用浏览器打开查看运行结果:

    <!DOCTYPE html>          
    <html lang="en">          
    <head>          
        <meta charset="UTF-8">          
        <title>js实现xml转json</title>    
    </head>                
    <script type="text/javascript">    
    /**
     * 字符串转xml对象
     * @param xmlString
     * @returns {*}
     * @constructor
     */
    function string2Xml(xmlString) {
        if (window.ActiveXObject !== undefined) { // for IE
            var xmlObject = new ActiveXObject("Microsoft.XMLDOM");
            xmlObject.async = "false";
            xmlObject.loadXML(xmlString);
            return xmlObject;
        }
        else { // for other browsers
            var parser = new DOMParser();
            var xmlObject = parser.parseFromString(xmlString, "text/xml");
            return xmlObject;
        }
    }
    
    /**
     * 将xml对象转json对象
     * @param xml
     */
    function Xml2Json(xml) {
        var js_obj = {};
        if (xml.nodeType === Node.ELEMENT_NODE) { // 元素节点
            var _attr = xml.attributes;
            if (_attr.length > 0) {
                for (var j = 0; j < _attr.length; j++) {
                    // 属性前面用‘@’标注,可以自定义
                    js_obj['@' + _attr[j].nodeName] = _attr[j].value;
                }
            }
        } else if (xml.nodeType === Node.TEXT_NODE) { // 文本
            js_obj = (xml.nodeValue.replace(/[\ +\r\n]/g, "") === "") ? "" : xml.nodeValue;
        }
        if (xml.hasChildNodes()) {
            var nodes = xml.childNodes;
            for (var i = 0; i < nodes.length; i++) {
                var nodeName = nodes[i].nodeName;
                if (typeof(js_obj[nodeName]) === "undefined") {
                    var _jsObj = Xml2Json(nodes[i]); // 递归
                    if (_jsObj !== "") {
                        js_obj[nodeName] = _jsObj;
                    }
                } else {
                    if (typeof(js_obj[nodeName].push) === "undefined") {
                        var old = js_obj[nodeName];
                        js_obj[nodeName] = [];
                        js_obj[nodeName].push(old);
                    }
                    var _jsObj = Xml2Json(nodes[i]); // 递归
                    if (_jsObj !== "") {
                        js_obj[nodeName].push(_jsObj);
                    }
                }
            }
        }
        return js_obj;
    }
    
    // xml字符串
    var xmlstr = '<?xml version="1.0" encoding="UTF-8"?> '+
                  '<students>'+
                    '<student id="1" no="20010001" name="张三" sex="男">'+
                      '<birthday>1999-1-1</birthday>'+
                    '</student>'+
                    '<student id="2" no="20010002" name="李四" sex="男">'+
                      '<birthday>1998-1-1</birthday>'+
                    '</student>'+
                  '</students>';
    
    var xml_Obj = string2Xml(xmlstr);
    var json_Obj = Xml2Json(xml_Obj);
    document.write(JSON.stringify(json_Obj));
    console.log(JSON.stringify(json_Obj));
    
    </script>   
    <body>            
    </body>          
    </html>
    

    运行结果如下:

    {
      "students": {
        "student": [
          {
            "@id": "1",
            "@no": "20010001",
            "@name": "张三",
            "@sex": "男",
            "birthday": {
              "#text": "1999-1-1"
            }
          },
          {
            "@id": "2",
            "@no": "20010002",
            "@name": "李四",
            "@sex": "男",
            "birthday": {
              "#text": "1998-1-1"
            }
          }
        ]
      }
    }
    

    相关文章

      网友评论

          本文标题:js处理xml(不同浏览器兼容)

          本文链接:https://www.haomeiwen.com/subject/tinanftx.html