Ajax数据传递新方案:深入解析JSON格式与XML对比

作者:橙子

时间:2026-10-25

浏览:321

本文深入探讨Ajax中基于JavaScript Object Notation (JSON)的数据传递模式。JSON作为轻量级数据格式,利用JavaScript数组和对象字面量语法,简化了数据交互。文章详细解析了JSON的语法结构、编码解码方法(如JSON.parse和JSON.stringify),并对比了JSON与XML在数据冗余、解析性能及跨域可行性方面的差异,分析了其适用场景与局限性。

文章目录

JSON概述与核心概念

Ajax的全称是“异步JavaScript和XML”,这一概念已广为人知。尽管XML常被视为其核心组成部分,但它并非不可或缺。资深软件工程师Douglas Crockford开发了一种内建于JavaScript的数据格式,名为JavaScript对象表示法(JSON,读作“Jason”)。这种格式允许直接使用JavaScript对象来传递信息,从而简化了数据传输过程。


1. 什么是 JSON

JSON的概念非常直观,它是一种轻量级的数据格式,基于JavaScript语法的子集,主要涉及数组和对象表示。由于直接使用JavaScript语法,JSON定义可以直接嵌入JavaScript文件中,无需像XML那样通过额外的语言进行解析。然而,在使用JSON之前,必须深入理解JavaScript中数组和对象字面量的特殊语法。


JSON语法基础:数组与对象

1.1 数组字面量


数组字面量由一对包含用逗号分隔的JavaScript值的方括号组成,例如:


代码如下:

 
var aNames=["hello", 12, true , null];
[html]
1.2 对象字面量
对象字面量通过一对花括号定义。花括号内可以包含任意数量的“名称-值”对,格式为字符串值。除了最后一行外,每个“名称-值”对后必须跟随一个逗号(这与Perl中的联合数组定义类似)。例如:
[code]
var oCar = {
"color": "red",
"doors" : 4,
"paidFor" : true
}; 

1.3 混合字面量


我们可以混合使用对象和数组字面量,以创建对象数组或包含数组的对象。例如:


代码如下:

 
{comments:[
{ 
id:1,
author:"someone1",
url:"http://someone1.x2design.net",
content:"hello"
}, 
{ 
id:2,
author:"someone2",
url:"http://someone2.x2design.net",
content:"hello"
}, 
{ 
id:3,
author:"someone3",
url:"http://someone3.x2design.net",
content:"hello"
} 
]}; 

JSON在Ajax中的应用与处理

1.4 JSON 语法


在Ajax应用中,服务器可以直接生成JavaScript语句,客户端获取后使用eval方法将其转换为对象,从而避免了XML解析带来的性能损耗。此外,在JavaScript通信中使用JSON作为数据格式的优势明显,因为它允许立即获取数据值,从而加快数据访问速度。


var oCarInfo = eval("(" + sJSON + ")");


请注意:在JavaScript中,花括号本身也是一个语句。要让解析器识别花括号表示的是对象而非语句,关键在于是否存在封装它的圆括号(圆括号用于表明代码是表达式而非语句)。


JSON的编码、解码与安全处理

1.5 JSON 编码和解码


作为JSON资源的一部分,Crockford开发了一个工具,能够实现JSON与JavaScript对象之间的直接解码和编码。该工具的源代码可在www.crockford.com/JSON/json.js下载。


前文提到的eval()方法存在固有缺陷:它会对传入的任何JavaScript代码进行求值,而不仅仅是JSON。因此,在企业级Web应用程序开发中,这带来了显著的安全隐患。为解决此问题,可以使用专门将JSON代码转换为JavaScript的解析器JSON.parse()方法。例如:


var oObject = JSON.parse (sJSON);


同时,该工具还提供了一种将JavaScript对象转换为JSON字符串(用于数据传输)的方法(JavaScript中无内置此功能)。只需将对象传入JSON.Stringify()方法即可。请看以下示例:


代码如下:

 
var oCar = new Object();
oCar.doors = 4;
oCar.color = "blue";
oCar.year = 1995;
oCar.drivers = new Array("Penny", "Dan" , "Kris");
document.write(JSON.stringify(oCar));

这段代码将输出如下所示的JSON字符串:


{"doors" : 4, "color" : "blue", "year" :1995, "drivers" : ["Penny", "Dan" , "Kris"]}




2. JSON 与 XML

JSON与XML的对比分析

正如前文所述,JSON相比XML的一大优势在于其简洁性。


请看XML数据表示实例:


使用XML表示:


代码如下:

 
<comments>
<comment>
<id>1</id>
<author>someone1</author>
<url>http://someone1.x2design.net</url>
<content>hello</content>
</comment>
<comment>
<id>2</id>
<author>someone2</author>
<url>http://someone2.x2design.net</url>
<content>someone1</content>
</comment>
<comment>
<id>3</id>
<author>someone3</author>
<url>http://someone3.x2design.net</url>
<content>hello</content>
</comment>
</comments>

使用JSON表示:


代码如下:

 
{comments:[
{ 
id:1,
author:"someone1",
url:"http://someone1.x2design.net",
content:"hello"
}, 
{ 
id:2,
author:"someone2",
url:"http://someone2.x2design.net",
content:"hello"
}, 
{ 
id:3,
author:"someone3",
url:"http://someone3.x2design.net",
content:"hello"
} 
]}; 

很容易发现,许多冗余信息已消失。由于无需匹配开始标签(opening tag)和结束标签(closing tag),传输相同信息所需的字节数大幅降低。创始人Crockford将其称为“XML的减肥方案”。


JSON格式数据相比XML的缺点在于,对外行人而言可读性较差。当然,有一种观点认为数据交换格式并非用于肉眼观察。如果数据是通过工具创建和解析的,确实没有理由要求数据必须易于人类阅读。问题的关键在于是否存在可用的JSON工具。



3. 服务器端 JSON 工具

服务器端JSON工具与跨域优势

java:java JSON工具,由Douglas Crockford开发,可在www.crockford.com/JSON/java/


中下载,它可以在JSP中使用。



4. JSON 优势与缺点

JSON不仅减少了解析XML带来的性能和兼容性问题,而且对于JavaScript来说非常易用,可以通过遍历数组和访问对象属性方便地获取数据,其可读性也不错,基本具备了结构化数据的性质。不得不说这是一个很好的方法,而且事实上Google Maps并未采用XML传递数据,而是采用了JSON方案。



JSON的另一个优势是跨域可行性,例如在www.xxx.com的网页中使用是完全可行的,这意味着可以跨域传递信息。而使用XMLHttpRequest却无法获取跨域信息,这是JavaScript内部安全性质所限制的。



JSON的局限性与未来展望

JSON看起来非常优秀,是否就能完全取代XML呢?事实并非如此,原因在于XML的优势:通用性。要使服务器端生成语法合格的JavaScript代码并非易事,这主要发生在大型系统中,服务器端和客户端由不同的开发人员负责。他们必须协商对象格式,这很容易导致错误。



无论如何,JSON是一项诱人的技术,值得进行大量试用。希望届时可以获取显著的性能提升。

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章