如何在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 相关文章推荐
javascript 面向对象全新理练之数据的封装
Dec 03 Javascript
jquery中ajax学习笔记一
Oct 16 Javascript
值得分享的Bootstrap Table使用教程
Nov 23 Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
jQuery插件HighCharts绘制的2D堆柱状图效果示例【附demo源码下载】
Mar 14 Javascript
详解如何构建Angular项目目录结构
Jul 13 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
微信小程序仿知乎实现评论留言功能
Nov 28 Javascript
bootstrap table实现iview固定列的效果实例代码详解
Sep 30 Javascript
JavaScript前端实现压缩图片功能
Mar 06 Javascript
JS对象属性的检测与获取操作实例分析
Mar 17 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
给初学PHP的5个入手程序
2006/11/23 PHP
PHP与SQL注入攻击防范小技巧
2011/09/16 PHP
php 获取今日、昨日、上周、本月的起始时间戳和结束时间戳的方法
2013/09/28 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
JS+XML 省份和城市之间的联动实现代码
2009/10/14 Javascript
仿百度的关键词匹配搜索示例
2013/09/25 Javascript
Javascript全局变量var与不var的区别深入解析
2013/12/09 Javascript
jQuery学习笔记之基础中的基础
2015/01/19 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
jQuery表单域属性过滤器用法分析
2015/02/10 Javascript
jquery easyUI中ajax异步校验用户名
2016/08/19 Javascript
浅谈js键盘事件全面控制
2016/12/01 Javascript
浅谈JavaScript的计时器对象
2016/12/26 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
纯JS单页面赛车游戏制作代码分享
2017/03/03 Javascript
vue.js如何更改默认端口号8080为指定端口的方法
2017/07/14 Javascript
JavaScript简单实现合并两个Json对象的方法示例
2017/10/16 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
2017/11/17 Javascript
Angular利用trackBy提升性能的方法
2018/01/26 Javascript
详解JS浏览器事件循环机制
2019/03/27 Javascript
Vue组件间通信方法总结(父子组件、兄弟组件及祖先后代组件间)
2019/04/17 Javascript
如何利用JavaScript编写一个格斗小游戏
2021/01/06 Javascript
Python3.x中自定义比较函数
2015/04/24 Python
python列表的增删改查实例代码
2018/01/30 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
Django 多环境配置详解
2019/05/14 Python
python中id函数运行方式
2020/07/03 Python
python爬虫今日热榜数据到txt文件的源码
2021/02/23 Python
天猫精选:上天猫,就够了
2016/09/21 全球购物
大家检讨书5000字
2014/02/03 职场文书
新教师工作感言
2014/02/16 职场文书
安全资料员岗位职责范本
2014/06/28 职场文书
档案工作汇报材料
2014/08/21 职场文书
导航工程专业自荐信
2014/09/02 职场文书
个人授权委托书
2014/09/15 职场文书
市场部经理岗位职责
2015/02/02 职场文书