如何在JS中实现相互转换XML和JSON


Posted in Javascript onJuly 19, 2016

开发中有时候会遇到XML和JSON相互转换,要求在JS中使用,网上找了好多,竟然每一个好用的,要么缺胳膊少腿,要么词不达意,太没天理了,果断自己实现一个。

JSON与XML的区别比较

1.定义介绍

(1).XML定义

扩展标记语言 (Extensible Markup Language, XML) ,用于标记电子文件使其具有结构性的标记语言,可以用来标记数据、定义数据类型,是一种允许用户对自己的标记语言进行定义的源语言。 XML使用DTD(document type definition)文档类型定义来组织数据;格式统一,跨平台和语言,早已成为业界公认的标准。
XML是标准通用标记语言 (SGML) 的子集,非常适合 Web 传输。XML 提供统一的方法来描述和交换独立于应用程序或供应商的结构化数据。

(2).JSON定义

JSON(JavaScript Object Notation)一种轻量级的数据交换格式,具有良好的可读和便于快速编写的特性。可在不同平台之间进行数据交换。JSON采用兼容性很高的、完全独立于语言文本格式,同时也具备类似于C语言的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等)体系的行为。这些特性使JSON成为理想的数据交换语言。
JSON基于JavaScript Programming Language , Standard ECMA-262 3rd Edition - December 1999 的一个子集。

2.XML和JSON优缺点

(1).XML的优缺点

<1>.XML的优点

A.格式统一,符合标准;

B.容易与其他系统进行远程交互,数据共享比较方便。

<2>.XML的缺点

A.XML文件庞大,文件格式复杂,传输占带宽;

B.服务器端和客户端都需要花费大量代码来解析XML,导致服务器端和客户端代码变得异常复杂且不易维护;

C.客户端不同浏览器之间解析XML的方式不一致,需要重复编写很多代码;

D.服务器端和客户端解析XML花费较多的资源和时间。

(2).JSON的优缺点

<1>.JSON的优点:

A.数据格式比较简单,易于读写,格式都是压缩的,占用带宽小;

B.易于解析,客户端JavaScript可以简单的通过eval()进行JSON数据的读取;

C.支持多种语言,包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言,便于服务器端的解析;

D.在PHP世界,已经有PHP-JSON和JSON-PHP出现了,偏于PHP序列化后的程序直接调用,PHP服务器端的对象、数组等能直接生成JSON格式,便于客户端的访问提取;

E.因为JSON格式能直接为服务器端代码使用,大大简化了服务器端和客户端的代码开发量,且完成任务不变,并且易于维护。

<2>.JSON的缺点

A.没有XML格式这么推广的深入人心和喜用广泛,没有XML那么通用性;

B.JSON格式目前在Web Service中推广还属于初级阶段。

在Javascript中实现XML和JSON相互转换

先看调用例子:

<viewport id="menuPane" layout="border">

    <panel region="center" border="0" layout="border">

        <tbar>

            <toolbar text="XXXX">

                <menu>

                    <text text="11">

                    </text>

                    <text text="22">

                    </text>

                    <text text="33">

                    </text>

                </menu>

            </toolbar>

            <toolbar text="XXXX">

                <menu>

                    <text text="44">

                    </text>

                    <text text="55">

                    </text>

                    <menu>

                        <text text="6 6">

                        </text>

                    </menu>

                    <text text="77">

                    </text>

                </menu>

            </toolbar>

        </tbar>

    </panel>

</viewport>

var xmlParser = new XmlToJson();

var json = xmlParser.parse(xml);

console.log( JSON.stringify(json) );

var jsonParser = new JsonToXml();

var xml = jsonParser.parse(json);

console.log( xml );

XML转换为JSON:

function XmlToJson() {

}

XmlToJson.prototype.setXml = function(xml) {

    if(xml && typeof xml == "string") {

        this.xml = document.createElement("div");

        this.xml.innerHTML = xml;

        this.xml = this.xml.getElementsByTagName("*")[0];

    }

    else if(typeof xml == "object"){

        this.xml = xml;

    }

};

XmlToJson.prototype.getXml = function() {

    return this.xml;

};

XmlToJson.prototype.parse = function(xml) {

    this.setXml(xml);

    return this.convert(this.xml);

};

XmlToJson.prototype.convert = function(xml) {

    if (xml.nodeType != 1) {

        return null;

    }

    var obj = {};

    obj.xtype = xml.nodeName.toLowerCase();

    var nodeValue = (xml.textContent || "").replace(/(\r|\n)/g, "").replace(/^\s+|\s+$/g, "");

    

    if(nodeValue && xml.childNodes.length == 1) {

        obj.text = nodeValue;

    }

    if (xml.attributes.length > 0) {

        for (var j = 0; j < xml.attributes.length; j++) {

            var attribute = xml.attributes.item(j);

            obj[attribute.nodeName] = attribute.nodeValue;

        }

    }

    if (xml.childNodes.length > 0) {

        var items = [];

        for(var i = 0; i < xml.childNodes.length; i++) {

            var node = xml.childNodes.item(i);

            var item = this.convert(node);

            if(item) {

                items.push(item);

            }

        }

        if(items.length > 0) {

            obj.items = items;

        }

    }

    return obj;

};

JSON转换为XML:

function JsonToXml() {

 this.result = [];

}

JsonToXml.prototype.spacialChars = ["&","<",">","\"","'"];

JsonToXml.prototype.validChars = ["&","<",">",""","'"];

JsonToXml.prototype.toString = function(){

 return this.result.join("");

};

JsonToXml.prototype.replaceSpecialChar = function(s){

    for(var i=0;i<this.spacialChars.length;i++){

        s=s.replace(new RegExp(this.spacialChars[i],"g"),this.validChars[i]);

    }

    return s;

};

JsonToXml.prototype.appendText = function(s){

    s = this.replaceSpecialChar(s);

    this.result.push(s);

};

JsonToXml.prototype.appendAttr = function(key, value){

    this.result.push(" "+ key +"=\""+ value +"\"");

};

JsonToXml.prototype.appendFlagBeginS = function(s){

 this.result.push("<"+s);

};

JsonToXml.prototype.appendFlagBeginE = function(){

 this.result.push(">");

};

JsonToXml.prototype.appendFlagEnd = function(s){

 this.result.push("</"+s+">");

};

JsonToXml.prototype.parse = function(json){

 this.convert(json);

 return this.toString();

};

JsonToXml.prototype.convert = function(obj) {

 var nodeName = obj.xtype || "item";

 this.appendFlagBeginS(nodeName);

 var arrayMap = {};

 for(var key in obj) {

  var item = obj[key];

  if(key == "xtype") {

   continue;

  }

  if(item.constructor == String) {

   this.appendAttr(key, item);

  }

  if(item.constructor == Array) {

   arrayMap[key] = item;

  }

 }

 this.appendFlagBeginE();

 for(var key in arrayMap) {

  var items = arrayMap[key];

  for(var i=0;i<items.length;i++) {

   this.convert(items[i]);

  }

 }

 this.appendFlagEnd(nodeName);

};

以上就是为大家整理的在Javascript中实现XML和JSON相互转换,希望本文所述对大家学习javascript有所帮助。

关于XML和JSON互相转换感兴趣的朋友还可参考在线工具:

Javascript 相关文章推荐
破解Session cookie的方法
Jul 28 Javascript
学习YUI.Ext 第三天
Mar 10 Javascript
关于javascript DOM事件模型的两件事
Jul 22 Javascript
JavaScript实现文字跟随鼠标特效
Aug 06 Javascript
jQuery隐藏和显示效果实现
Apr 06 Javascript
跨域资源共享 CORS 详解
Apr 26 Javascript
BootstrapValidator超详细教程(推荐)
Dec 07 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
Jan 09 Javascript
three.js中3D视野的缩放实现代码
Nov 16 Javascript
vscode 开发Vue项目的方法步骤
Nov 25 Javascript
详解JavaScript函数callee、call、apply的区别
Mar 08 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 #Javascript
js实现动态创建的元素绑定事件
Jul 19 #Javascript
用js动态添加html元素,以及属性的简单实例
Jul 19 #Javascript
详谈JS中实现种子随机数及作用
Jul 19 #Javascript
全面了解JavaScript对象进阶
Jul 19 #Javascript
EasyUI中在表单提交之前进行验证
Jul 19 #Javascript
jQuery EasyUI提交表单验证
Jul 19 #Javascript
You might like
ThinkPHP Where 条件中常用表达式示例(详解)
2017/03/31 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
Laravel框架文件上传功能实现方法示例
2019/04/16 PHP
关于laravel后台模板laravel-admin select框的使用详解
2019/10/03 PHP
jquery 3D球状导航的文章分类
2010/07/06 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
JSONP之我见
2015/03/24 Javascript
JS+CSS实现六级网站导航主菜单效果
2015/09/28 Javascript
Ext JS动态加载JavaScript创建窗体的方法
2016/06/23 Javascript
在页面中引入js的两种方法(推荐)
2017/08/29 Javascript
详解ES6中的代理模式——Proxy
2018/01/08 Javascript
Vue引用第三方datepicker插件无法监听datepicker输入框的值的解决
2018/01/27 Javascript
vue mounted组件的使用
2018/06/18 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
Vue实现跑马灯效果
2020/05/25 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
python zip文件 压缩
2008/12/24 Python
Python实现批量把SVG格式转成png、pdf格式的代码分享
2014/08/21 Python
在Python的Flask框架中实现单元测试的教程
2015/04/20 Python
解读Python中degrees()方法的使用
2015/05/18 Python
让python在hadoop上跑起来
2016/01/27 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
Python3简单实例计算同花的概率代码
2017/12/06 Python
Python基于递归和非递归算法求两个数最大公约数、最小公倍数示例
2018/05/21 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
浅谈pytorch池化maxpool2D注意事项
2020/02/18 Python
详解Python中如何将数据存储为json格式的文件
2020/11/18 Python
吉列剃须刀美国官网:Gillette美国
2018/07/13 全球购物
HEMA法国:荷兰原创设计
2019/02/21 全球购物
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
社区八一活动方案
2014/02/03 职场文书
暑期研修感言
2014/02/17 职场文书
各营销点岗位职责范本
2014/03/05 职场文书
市场营销专业毕业生求职信
2014/03/26 职场文书
房地产广告策划方案
2014/05/15 职场文书
如何做好工作总结!
2019/04/10 职场文书