如何在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 相关文章推荐
jQuery中读取json文件示例代码
May 10 Javascript
JQuery事件e参数的方法preventDefault()取消默认行为
Sep 26 Javascript
javascript字符串替换及字符串分割示例代码
Dec 12 Javascript
JQuery教学之性能优化
May 14 Javascript
实践中学习AngularJS表单
Mar 21 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
Angular.js自定义指令学习笔记实例
Feb 24 Javascript
jquery 键盘事件的使用方法详解
Sep 13 jQuery
静态页面实现 include 引入公用代码的示例
Sep 25 Javascript
JavaScript数组去重算法实例小结
May 07 Javascript
vuejs 动态添加input框的实例讲解
Aug 24 Javascript
Vue Autocomplete 自动完成功能简单示例
May 25 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
全国FM电台频率大全 - 15 山东省
2020/03/11 无线电
来自PHP.NET的入门教程
2006/10/09 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
浅析PHP编程中10个最常见的错误
2014/08/08 PHP
Zend Framework创建自己的动作助手详解
2016/03/05 PHP
thinkphp中常用的系统常量和系统变量
2014/03/05 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
js实现显示当前状态的导航效果代码
2015/08/28 Javascript
JavaScript运行过程中的“预编译阶段”和“执行阶段”
2015/12/16 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
loading动画特效小结
2017/01/22 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
bootstrap实现点击删除按钮弹出确认框的实例代码
2018/08/16 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
深入探索VueJS Scoped CSS 实现原理
2019/09/23 Javascript
简单使用webpack打包文件的实现
2019/10/29 Javascript
vue 实现通过vuex 存储值 在不同界面使用
2019/11/11 Javascript
vue 组件简介
2020/07/31 Javascript
针对Vue路由history模式下Nginx后台配置操作
2020/10/22 Javascript
[04:40]2016国际邀请赛中国区预选赛全程TOP10镜头集锦
2016/07/01 DOTA
利用Python绘制数据的瀑布图的教程
2015/04/07 Python
Python实现多条件筛选目标数据功能【测试可用】
2018/06/13 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
对python中Librosa的mfcc步骤详解
2019/01/09 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
详解H5本地储存Web Storage
2017/07/03 HTML / CSS
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
伯克斯奥特莱斯:Burkes Outlet
2019/03/30 全球购物
英文翻译的自我评价语句
2013/10/04 职场文书
给水排水工程专业毕业生推荐信
2013/10/28 职场文书
任命书模板
2014/06/04 职场文书
2014年社区民政工作总结
2014/12/02 职场文书
房地产公司财务总监岗位职责
2015/04/03 职场文书
茶花女读书笔记
2015/06/29 职场文书
用python实现监控视频人数统计
2021/05/21 Python