JSON与XML的区别对比及案例应用


Posted in Javascript onNovember 11, 2016

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中推广还属于初级阶段。

3.XML和JSON的优缺点对比

(1).可读性方面。

JSON和XML的数据可读性基本相同,JSON和XML的可读性可谓不相上下,一边是建议的语法,一边是规范的标签形式,XML可读性较好些。

(2).可扩展性方面。

XML天生有很好的扩展性,JSON当然也有,没有什么是XML能扩展,JSON不能的。

(3).编码难度方面。

XML有丰富的编码工具,比如Dom4j、JDom等,JSON也有json.org提供的工具,但是JSON的编码明显比XML容易许多,即使不借助工具也能写出JSON的代码,可是要写好XML就不太容易了。

(4).解码难度方面。

XML的解析得考虑子节点父节点,让人头昏眼花,而JSON的解析难度几乎为0。这一点XML输的真是没话说。

(5).流行度方面。

XML已经被业界广泛的使用,而JSON才刚刚开始,但是在Ajax这个特定的领域,未来的发展一定是XML让位于JSON。到时Ajax应该变成Ajaj(Asynchronous Javascript and JSON)了。

(6).解析手段方面。

JSON和XML同样拥有丰富的解析手段。

(7).数据体积方面。

JSON相对于XML来讲,数据的体积小,传递的速度更快些。

(8).数据交互方面。

JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互。

(9).数据描述方面。

JSON对数据的描述性比XML较差。

(10).传输速度方面。

JSON的速度要远远快于XML。

4.XML与JSON数据格式比较

(1).关于轻量级和重量级

轻量级和重量级是相对来说的,那么XML相对于JSON的重量级体现在哪呢?应该体现在解析上,XML目前设计了两种解析方式:DOM和 SAX。

<1>.DOM

DOM是把一个数据交换格式XML看成一个DOM对象,需要把XML文件整个读入内存,这一点上JSON和XML的原理是一样的,但是XML要考虑父节点和子节点,这一点上JSON的解析难度要小很多,因为JSON构建于两种结构:key/value,键值对的集合;值的有序集合,可理解为数组;

<2>.SAX

SAX不需要整个读入文档就可以对解析出的内容进行处理,是一种逐步解析的方法。程序也可以随时终止解析。这样,一个大的文档就可以逐步的、一点一点的展现出来,所以SAX适合于大规模的解析。这一点,JSON目前是做不到得。

所以,JSON和XML的轻/重量级的区别在于:

JSON只提供整体解析方案,而这种方法只在解析较少的数据时才能起到良好的效果;

XML提供了对大规模数据的逐步解析方案,这种方案很适合于对大量数据的处理。

(2).关于数据格式编码及解析难度

<1>.在编码方面。

虽然XML和JSON都有各自的编码工具,但是JSON的编码要比XML简单,即使不借助工具,也可以写出JSON代码,但要写出好的XML代码就有点困难;与XML一样,JSON也是基于文本的,且它们都使用Unicode编码,且其与数据交换格式XML一样具有可读性。

主观上来看,JSON更为清晰且冗余更少些。JSON网站提供了对JSON语法的严格描述,只是描述较简短。从总体来看,XML比较适合于标记文档,而JSON却更适于进行数据交换处理。

<2>.在解析方面。

在普通的web应用领域,开发者经常为XML的解析伤脑筋,无论是服务器端生成或处理XML,还是客户端用 JavaScript 解析XML,都常常导致复杂的代码,极低的开发效率。
实际上,对于大多数Web应用来说,他们根本不需要复杂的XML来传输数据,XML宣称的扩展性在此就很少具有优势,许多Ajax应用甚至直接返回HTML片段来构建动态Web页面。和返回XML并解析它相比,返回HTML片段大大降低了系统的复杂性,但同时缺少了一定的灵活性。同XML或 HTML片段相比,数据交换格式JSON 提供了更好的简单性和灵活性。在Web Serivice应用中,至少就目前来说XML仍有不可动摇的地位。

(3).实例比较

XML和JSON都使用结构化方法来标记数据,下面来做一个简单的比较。

<1>.用XML表示中国部分省市数据如下:

<?xml version="1.0" encoding="utf-8" ?>
<country>
<name>中国</name>
<province>
<name>黑龙江</name>
<citys>
<city>哈尔滨</city>
<city>大庆</city>
</citys> 
</province>
<province>
<name>广东</name>
<citys>
<city>广州</city>
<city>深圳</city>
<city>珠海</city>
</citys> 

</province>
<province>
<name>台湾</name>
<citys>
 <city>台北</city>
 <city>高雄</city>
</citys> 
</province>
<province>
<name>新疆</name>
<citys>
<city>乌鲁木齐</city>
</citys>
</province>
</country>

<2>.用JSON表示中国部分省市数据如下

var country =
{
name: "中国",
provinces: [
{ name: "黑龙江", citys: { city: ["哈尔滨", "大庆"]} },
{ name: "广东", citys: { city: ["广州", "深圳", "珠海"]} },
{ name: "台湾", citys: { city: ["台北", "高雄"]} },
{ name: "新疆", citys: { city: ["乌鲁木齐"]} }
]
}

编码的可读性来说,XML有明显的优势,毕竟人类的语言更贴近这样的说明结构。JSON读起来更像一个数据块,读起来就比较费解了。不过,我们读起来费解的语言,恰恰是适合机器阅读,所以通过JSON的索引country.provinces[0].name就能够读取“黑龙江”这个值。

编码的手写难度来说,XML还是舒服一些,好读当然就好写。不过写出来的字符JSON就明显少很多。去掉空白制表以及换行的话,JSON就是密密麻麻的有用数据,而XML却包含很多重复的标记字符。

案例运用:省的三级联动

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/封装Ajax.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<select name="provence" id="provence" onchange="chooseP(this.value)">
<option>湖北省</option>
</select>
<select name="city" id="city" onchange="chooseC(this.value)">
<option>武汉市</option>
</select>
<select name="area" id="area">
<option>江城区</option>
</select>
</body>
<script> 
objAJAX.getAjax("get", "xml/Provinces.xml", "", callBackOk, callBackFail, "");
function callBackOk(data) {
var provences = data.getElementsByTagName("Province");
/*<Province ID="1" ProvinceName="北京市">北京市</Province> */
for(var i = 0; i < provences.length; i++) {
var Potion = document.createElement("option"); //<option><option/>
Potion.value = provences[i].getAttribute("ID"); //把id传给value
Potion.innerHTML = provences[i].innerHTML;
document.getElementById("provence").appendChild(Potion);
}
}
function callBackFail() {
alert("服务器出错啦")
}
//市级联动
function chooseP(id) {
objAJAX.getAjax("get", "xml/Cities.xml", "", callBackOkP, callBackFailP, "");
function callBackOkP(data) {
document.getElementById("city").innerHTML = "";
//alert( typeof data)
var citys = data.getElementsByTagName("City");
//alert(citys.length)
/*<City ID="1" CityName="北京市" PID="1" ZipCode="100000">北京市</City>*/
for(var i = 0; i < citys.length; i++){
var Coption = document.createElement("option"); //<option><option/>
Coption.value = citys[i].getAttribute("ID"); 
var PID = citys[i].getAttribute("PID");
if(id == PID) {
Coption.innerHTML = citys[i].innerHTML;
var dd=Coption.value;
document.getElementById("city").appendChild(Coption);
}
}
alert(Cvalue); 
chooseC(Cvalue);
}
function callBackFailP() {
alert("服务器出错啦")
} 
}
//县级联动
function chooseC(id) {
objAJAX.getAjax("get", "xml/Districts.xml", "", callBackOkP, callBackFailP, "");
function callBackOkP(data) {
document.getElementById("area").innerHTML = "";
//alert( typeof data)
var districts = data.getElementsByTagName("District");
//alert(citys.length)
/* <District ID="1" DistrictName="东城区" CID="1">东城区</District>*/
for(var i = 0; i < districts.length; i++) {
var Xoption = document.createElement("option"); //<option><option/>
Xoption.value = districts[i].getAttribute("ID");
var CID = districts[i].getAttribute("CID");
if(id == CID) {
Xoption.innerHTML = districts[i].innerHTML;
document.getElementById("area").appendChild(Xoption);
}
}
}
function callBackFailP() {
alert("服务器出错啦")
}
}
</script>
</html>
Javascript 相关文章推荐
HTML DOM的nodeType值介绍
Mar 31 Javascript
PHP开发者必须掌握的6个关键字
Apr 14 Javascript
js自定义鼠标右键的实现原理及源码
Jun 23 Javascript
jQuery链使用指南
Jan 20 Javascript
javascript实现网页字符定位的方法
Jul 14 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
js select实现省市区联动选择
Apr 17 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
Nov 21 Javascript
Angularjs 实现动态添加控件功能
May 25 Javascript
解决node修改后需频繁手动重启的问题
May 13 Javascript
vue2.0 可折叠列表 v-for循环展示的实例
Sep 07 Javascript
vue实现购物车抛物线小球动画效果的方法详解
Feb 13 Javascript
浅谈AngularJS中ng-class的使用方法
Nov 11 #Javascript
JS中数组重排序方法
Nov 11 #Javascript
js编写的treeview使用方法
Nov 11 #Javascript
Vue.js教程之计算属性
Nov 11 #Javascript
JS控制TreeView的结点选择
Nov 11 #Javascript
node+express制作爬虫教程
Nov 11 #Javascript
html中鼠标滚轮事件onmousewheel的处理方法
Nov 11 #Javascript
You might like
PHP的一个完整SMTP类(解决邮件服务器需要验证时的问题)
2006/10/09 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
CodeIgniter基于Email类发邮件的方法
2016/03/29 PHP
PHP检查端口是否可以被绑定的方法示例
2018/08/09 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
jQuery 点击图片跳转上一张或下一张功能的实现代码
2010/03/12 Javascript
通过javascript把图片转化为字符画
2013/10/24 Javascript
jquery制作漂亮的弹出层提示消息特效
2014/12/23 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
Bootstrap弹出带合法性检查的登录框实例代码【推荐】
2016/06/23 Javascript
js中编码函数:escape,encodeURI与encodeURIComponent详解
2017/03/21 Javascript
使用 NodeJS+Express 开发服务端的简单介绍
2017/04/07 NodeJs
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
js数组实现权重概率分配
2017/09/12 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
详解基于webpack&amp;gettext的前端多语言方案
2019/01/29 Javascript
Layui弹框中数据表格中可双击选择一条数据的实现
2020/05/06 Javascript
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
Python程序设计入门(3)数组的使用
2014/06/16 Python
列举Python中吸引人的一些特性
2015/04/09 Python
python中threading超线程用法实例分析
2015/05/16 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
matplotlib subplots 调整子图间矩的实例
2018/05/25 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
使用python切片实现二维数组复制示例
2019/11/26 Python
Nili Lotan官网:Nili Lotan同名品牌
2018/01/07 全球购物
大四毕业生自荐书
2014/07/05 职场文书
中学生运动会通讯稿大全
2014/09/18 职场文书
小学优秀教师材料
2014/12/15 职场文书
给女朋友道歉的话大全
2015/01/20 职场文书
2015年人事专员工作总结
2015/04/29 职场文书
2015年超市员工工作总结
2015/05/04 职场文书
硕士毕业答辩开场白
2015/05/27 职场文书