JSON：轻量级数据交换格式详解及应用-优快云博客

本文链接：https://blog.youkuaiyun.com/WildKingxue/article/details/120266860

一.什么是JSON？

JSON(JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。

它基于ECMAScript(欧洲计算机协会制定的js规范)的一个子集，采用完全独立于编程语言的文本格式来存储和表示数据。

简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

二.历史发展

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999的一个子集。

JSON是Douglas Crockford在2001年开始推广使用的数据格式，在2005年-2006年正式成为主流的数据格式，雅虎和谷歌就在那时候开始广泛地使用JSON格式。

三.JSON与XML

1.JSON与 XML 相同之处

JSON 是纯文本
JSON 具有"自我描述性"（人类可读）
JSON 具有层级结构（值中存在值）
JSON 可通过 JavaScript 进行解析
JSON 数据可使用 AJAX 进行传输

2.JSON与 XML 不同之处

没有结束标签
更短
读写的速度更快
能够使用内建的 JavaScript eval() 方法进行解析
使用数组
不使用保留字

四.为什么要用JSON

对于 AJAX 应用程序来说，JSON 比 XML 更快更易使用：

使用 XML

读取 XML 文档

使用 XML DOM 来循环遍历文档

读取值并存储在变量中

使用 JSON

读取 JSON 字符串

用 eval() 处理 JSON 字符串

五.常用类型

任何支持的类型都可以通过 JSON 来表示，例如字符串、数字、对象、数组等。但是对象和数组是比较特殊且常用的两种类型。

对象：对象在 JS 中是使用花括号包裹 {} 起来的内容，数据结构为 {key1：value1, key2：value2, ...} 的键值对结构。在面向对象的语言中，key 为对象的属性，value 为对应的值。键名可以使用整数和字符串来表示。值的类型可以是任意类型。

数组：数组在 JS 中是方括号 [] 包裹起来的内容，数据结构为 ["java", "javascript", "vb", ...] 的索引结构。在 JS 中，数组是一种比较特殊的数据类型，它也可以像对象那样使用键值对，但还是索引使用得多。同样，值的类型可以是任意类型。

六.校验工具

1.前言

JSON格式取代了xml给网络传输带来了很大的便利,但是却没有了xml的一目了然,尤其是json数据很长的时候,我们会陷入繁琐复杂的数据节点查找中。

但是国人的一款在线工具 BeJson 、SoJson在线工具让众多程序员、新接触JSON格式的程序员更快的了解JSON的结构，更快的精确定位JSON格式错误。

2.功能

JSON格式化校验

JSON视图

压缩转义

JSON在线编辑器

在线发送JSON数据

JSON着色

JSON-XML互转

JSON-VIEW

它和xml一样都是一种数据交换格式

七.JSON的最小化

Eclipse RAP的一个提交者也是领导者的Ralf Sternberg，他只用了十个类就把快速的和轻量级的库整合到了一起。显然，使用精益和解析法真正地改善了服务器的性能，因为服务器进程以更高的效率为大量的客户创建了JSON信息。在外部JSON中不存在依赖关系，代码很容易管理，而且也不会占用很多内存。对于你的全部JSON项目来说，这还远远不够，但这确实带来了几件好事。

八.JSON数据的组成

1.JSON 语法规则

数据为键/值对。
数据由逗号分隔。
大括号保存对象
方括号保存数组

2. JSON 数据 - 一个名称对应一个值

键/值对包括字段名称（在双引号中），后面一个冒号，然后是值：

"name":"Runoob"

3.JSON 对象

“{}”--json对象

“{}”包含---名称/值对【键值对】/ json数组 / json对象

JSON 名称/值对【键值对】中的键，使用双引号包围

JSON 名称/值对【键值对】中的值：

1.数字（整数或浮点数） "age":30

2.字符串（在双引号中）”name”:”zhangsan”

3.逻辑值（true 或 false）"flag":true

4.数组（在中括号中）”array”:[]

5.对象（在大括号中）”obj”:{}

6.null "runoob":null

var student = {
					"stuid": 1001,
					"stuname": "zhangsan",
					"stusex": true,
					"stuaddress": ["西安", "北京"],
					"classinfo": {
						"classid": "20210325",
						"classname": "前端班"
					}
				};

这是一个JSON对象。

4.json数组

“[]”--json数组

“[]”包含---具体数据值/json对象

var address = [{
	"type": "家庭地址",
	"info": "西安高新一路"
},
	{
	"type": "工作地址",
	"info": "西安丈八四路"
	},
];

这是一个JSON数组。

5.json字符串

var studentinfo = "{\"stuid\":1001," +
					"\"stuname\":\"zhangsan\"," +
					"\"stusex\":true," +
					"\"stuaddress\":[\"西安\",\"北京\"]," +
					"\"classinfo\":{\"classid\":\"20210325\"," +
					"\"classname\":\"前端班\"}}";

九.JSON数据的转换

我们得到的json数据有可能是json对象，也有可能是json字符串。因此我们就需要将json对象与json字符串进行转换。

1.json对象转换成json字符串

可以使用 JSON.stringify() 方法将 JavaScript 对象转换为字符串。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>json</title>
		<script type="text/javascript">
			window.onload = function() {
				//对象
				var student = {
					"stuid": 1001,
					"stuname": "zhangsan",
					"stusex": true,
					"stuaddress": ["西安", "北京"],
					"classinfo": {
						"classid": "20210325",
						"classname": "前端班"
					}
				};
				//改成字符串
				var shao=JSON.stringify(student);
				alert(shao);//返回的是字符串
			}
		</script>
	</head>
	<body>
	</body>
</html>

2.json字符串转换为json对象

<1.>使用 JSON.parse() 方法将数据转换为 JavaScript 对象。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>json</title>
		<script>
			window.onload=function(){
				var studentinfo="{\"stuid\":1001,"+
								"\"stuname\":\"zhangsan\","+
								"\"stusex\":true,"+
								"\"stuaddress\":[\"西安\",\"北京\"],"+
								"\"classinfo\":{\"classid\":\"20210325\","+
								"\"classname\":\"前端班\"}}";
				alert(studentinfo);//字符串 	
				//json字符串转换成Json对象
				//1.使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
				var jsonobj=JSON.parse(studentinfo);
				//2.eval("("+字符串+")")
				//var jsonobj=eval("("+studentinfo+")");
				alert(jsonobj);
			}
		</script>
	</head>
	<body>
	</body>
</html>

<2.>eval("("+str+")");

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>json</title>
		<script>
			window.onload=function(){
				var studentinfo="{\"stuid\":1001,"+
								"\"stuname\":\"zhangsan\","+
								"\"stusex\":true,"+
								"\"stuaddress\":[\"西安\",\"北京\"],"+
								"\"classinfo\":{\"classid\":\"20210325\","+
								"\"classname\":\"前端班\"}}";
				alert(studentinfo);//字符串 	
				//json字符串转换成Json对象
				//1.使用 JSON.parse() 方法将数据转换为 JavaScript 对象。
				//var jsonobj=JSON.parse(studentinfo);
				//2.eval("("+字符串+")")
				var jsonobj=eval("("+studentinfo+")");
				alert(jsonobj);
			}
		</script>
	</head>
	<body>
	</body>
</html>

两个运行的结果都为：[object Object]

3.JSON数据的解析

字符串：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>json</title>
		<script>
			window.onload=function(){
				var studentinfo="{\"stuid\":1001,"+
								"\"stuname\":\"zhangsan\","+
								"\"stusex\":true,"+
								"\"stuaddress\":[{\"type\":\"家庭地址\",\"info\":\"西安高新一路\"},"+
								"{\"type\":\"工作地址\",\"info\":\"西安丈八四路\"}],"+//数组
								"\"classinfo\":{\"classid\":\"20210325\","+
								"\"classname\":\"前端班\"}}";//对象
				//studentinfo字符串
				//字符串转换成json对象
				var jsonobj=JSON.parse(studentinfo);
				document.write("<h1>学生编号:"+jsonobj.stuid+"</h1>");
				document.write("<h1>学生姓名:"+jsonobj.stuname+"</h1>");
				//判断为true是为男，为false是为女
				if(jsonobj.stusex){
					document.write("<h1>学生性别:男</h1>");
				}else{
					document.write("<h1>学生性别:女</h1>");
				}
				//数组
				var addressArray=jsonobj.stuaddress;
				//循环输出数组
				for(var i=0;i<addressArray.length;i++){
					document.write("<h1>"+addressArray[i].type+":"+addressArray[i].info+"</h1>");
				}
				//对象
				document.write("<h1>班级编号:"+jsonobj.classinfo.classid+"</h1>");
				document.write("<h1>班级名称:"+jsonobj.classinfo.classname+"</h1>");
				}
		</script>
	</head>
	<body>
	</body>
</html>

对象：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>json</title>
		<script>
			window.onload=function(){
				var student={
					"stuid":1001,
					"stuname":"zhangsan",
					"stusex":false,
					"stuaddress":["西安","北京"],
					"classinfo":{"classid":"20210325","classname":"前端班"}
				};
				//student是一个json对象，不用转换
				document.write("<h1>学生编号:"+student.stuid+"</h1>");
				document.write("<h1>学生姓名:"+student.stuname+"</h1>");
				//判断为true是为男，为false是为女
				if(student.stusex){
					document.write("<h1>学生性别:男</h1>");
				}else{
					document.write("<h1>学生性别:女</h1>");
				}
				//数组
				var addressArray=student.stuaddress;
				var addressstr="";
				//循环输出数组
				for(var i=0;i<addressArray.length;i++){
					addressstr=addressstr+addressArray[i]+",";
				}
				//数组拼接完成后多一个“,”，要去掉最后这个“,”。
				addressstr=addressstr.substring(0,addressstr.lastIndexOf(","));
				document.write("<h1>学生地址:"+addressstr+"</h1>");
				//对象
				document.write("<h1>班级编号:"+student.classinfo.classid+"</h1>");
				document.write("<h1>班级名称:"+student.classinfo.classname+"</h1>");
				}
		</script>
	</head>
	<body>
	</body>
</html>