如何在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 表格操作(交替显示、拖动表格行、选择行等)
Jul 29 Javascript
javascript闭包入门示例
Apr 30 Javascript
jquery事件preventDefault()方法用法实例
Jan 16 Javascript
js实现iframe自动自适应高度的方法
Feb 17 Javascript
js图片翻书效果代码分享
Aug 20 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
Bootstrap Table使用方法详解
Aug 01 Javascript
BootStrap无限级分类(无限极分类封装版)
Aug 26 Javascript
Vue组件BootPage实现简单的分页功能
Sep 12 Javascript
JS实现标签页切换效果
May 04 Javascript
Node.js学习教程之Module模块
Sep 03 Javascript
js前端传json后台接收‘‘被转为quot的问题解决
Nov 12 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中如何同时使用session和cookie来保存用户登录信息
2013/07/05 PHP
smarty内置函数{loteral}、{ldelim}和{rdelim}用法实例
2015/01/22 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
PHP从二维数组得到N层分类树的实现代码
2016/10/11 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
无语,javascript居然支持中文(unicode)编程!
2007/04/12 Javascript
js 变量类型转换常用函数与代码[比较全]
2009/12/01 Javascript
json格式的javascript对象用法分析
2016/07/04 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
JavaScript中boolean类型之三种情景实例代码
2016/11/21 Javascript
用Webpack构建Vue项目的实践
2017/11/07 Javascript
使用Ajax和Jquery配合数据库实现下拉框的二级联动的示例
2018/01/25 jQuery
JS回调函数原理与用法详解【附PHP回调函数】
2019/07/20 Javascript
JavaScript 继承 封装 多态实现及原理详解
2019/07/29 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
Vue 封装防刷新考试倒计时组件的实现
2020/06/05 Javascript
jenkins自动构建发布vue项目的方法步骤
2021/01/04 Vue.js
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
解决tensorflow1.x版本加载saver.restore目录报错的问题
2018/07/26 Python
python 快速把超大txt文件转存为csv的实例
2018/10/26 Python
解决在Python编辑器pycharm中程序run正常debug错误的问题
2019/01/17 Python
python 缺失值处理的方法(Imputation)
2019/07/02 Python
通过字符串导入 Python 模块的方法详解
2019/10/27 Python
Python自动化完成tb喵币任务的操作方法
2019/10/30 Python
python入门之井字棋小游戏
2020/03/05 Python
浅谈在JupyterNotebook下导入自己的模块的问题
2020/04/16 Python
python3.8.1+selenium实现登录滑块验证功能
2020/05/22 Python
纯CSS3实现地球自转实现代码(图文教程附送源码)
2012/12/26 HTML / CSS
新春文艺演出主持词
2014/03/27 职场文书
班主任经验交流会主持词
2014/04/01 职场文书
病人写给医生的感谢信
2015/01/23 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
班组长如何制订适合本班组的工作计划?
2019/07/10 职场文书
Pytorch中Softmax与LogSigmoid的对比分析
2021/06/05 Python