JSON ( JavaScript Object Notation )
- JSON是一种格式，基于文本，优于轻量，用于交换数据；
- 相比XML这个前辈，JSON更加轻量，XML需要用到很多标签，感受一下就好了
- 像上面的例子中，你可以明显看到XML格式的数据中标签本身占据了很多空间，JSON比较轻量，即相同数据，以JSON的格式占据的带宽更小，这在有大量数据请求和传递的情况下是有明显优势的。
- 但更重要的JSON是易于阅读、编写和机器解析的，即这个JSON对人和机器都是友好的，而且又轻，独立于语言（因为是基于文本的），所以JSON被广泛用于数据交换。
- 前端Er对这个套路肯定很熟悉，发送AJAX从API中获取JSON格式的数据，然后执行页面的逻辑，下面以前端JS进行AJAX的POST请求为例，后端PHP处理请求为例：
- 前端构造一个JS对象，用于包装要传递的数据，然后将JS对象转化为JSON字符串，再发送请求到后端；
2. 后端PHP接收到这个JSON字符串，将JSON字符串转化为**PHP对象**，然后处理请求。
3. 可以看到，相同的数据在这里有3种不同的表现形式，分别是前端的**JS对象**、传输的**JSON字符串**、后端的**PHP对象**，JS对象和PHP对象明显不是一个东西，但是由于大家用的都是**JSON**来传递数据，大家都能理解这种数据格式，都能把**JSON这种数据格式很容易地转化为自己能理解的数据结构**；
JSON 是 JavaScript 的子集？
- 我一直以为JSON就是JS的子集，是为什么形成了这种理解呢？
// JS对象
let foo = {};
// JS对象，只不过你可以把这个称之为JSON格式的 JavaScript对象
let bar = {
"name": "bar",
"price": 1000,
"buyer": [1, 2, 3]
}；
// 这个就是JSON格式的字符串
let str1 = JSON.stringify(bar);
let str2 = '{"name": "bar", "price": 1000, "buyer": [1, 2, 3]}';
- 你看不仅能相互转换，嵌套格式和语法都一样，再看看下面一个POST请求，场景是一个复杂的配置信息
const postData = {
"attribution": 1,
"category": 2,
"groupid": 3,
"parentid": 4,
"shopid": 5,
"groupname": "foo",
"config": {
"tagfilter": [{"id": 123, "name": "group-XX"}],
"product": [{"id": "123123123123123", "name": "prod-YY"}]
}
};
$.ajax({
url: '/api/xxx/yyy', //api接口地址
data: postData, //复杂的配置信息
contentType: "application/json;charset=utf-8", // 客户端请求格式
type: 'POST', // 数据传输方式
dataType: 'json', // 服务端返回数据格式
}).done((res) => {
if (res.success && res.data) {
console.log(res.data);
} else {
layer.msg(res.msg);
}
}).fail(() => {
layer.msg('网络开小差~请稍后再试！');
}).always( ()=> {
utils.loadingOff();
});
- 你看，既然你需要一个JSON，我就给你好了，就如同你给我的JSON一样，我直接把JS的一个对象给POST过去，还异想天开的给加了一个
contentType，嗯~后端拿到就是一个JSON，然后Chrome直接默认给我转换成了表单提交过去了···；
JSON & JavaScript Object？
1. 两个本质不同的东西为什么那么密切?
-
JSON 是一种语法用来序列化对象、数组、数值、字符串、布尔值和 null
。它基于 JavaScript 语法，但与之不同：一些JavaScript不是JSON，一些JSON不是JavaScript -
JSON和JS对象本质上完全不是同一个东西，就像“斑马线”和“斑马”，“斑马线”基于“斑马”身上的条纹来呈现和命名，但是斑马是活的，斑马线是非生物。
-
同样，"JSON"全名"JavaScript Object Notation"，所以它的格式（语法）是基于JS的，但它就是一种格式，而JS对象是一个实例，是存在于内存的一个东西。
-
说句玩笑话，如果JSON是基于PHP的，可能就叫PON了，形式可能就是这样的了['propertyOne' => 'foo', 'propertyTwo' => 42,]，如果这样，那么JSON可能现在是和PHP比较密切了。
-
此外，JSON是可以传输的，因为它是文本格式，但是JS对象是没办法传输的，在语法上，JSON也会更加严格，但是JS对象就很松了。那么两个不同的东西为什么那么密切，因为JSON毕竟是从JS中演变出来的，语法相近。
-
至于更详细的区别可以看MDN
2. 如何通过AJAX传输复杂的JSON格式呢？
-
这锅不归jQuery;
调用
$.ajax函数时，即使设置contentType为application/json; charset=utf-8，如果不设置，默认给你一个application/x-www-form-urlencoded爽歪歪;如果给data属性传递的是一个的JS对象，这时候jQuery也不会将其自动转换为JSON string,jQuery默认会将给data赋予的对象(除字符串之外的任何东西)处理为适用于”application/x-www-form-urlencoded”的请求字符串。有一个选项processData来控制默认的自动转换，设置其为false,jQuery就不会自动转换对象。
-
JSON.stringify()；
JS 新建一个对象，将复杂的配置信息赋值给这个对象，最后JSON.stringify()一下，将这个JavaScript值转换为一个JSON字符串，那么后端也方便解析，如果你就这么把这个JS对象POST过去，Chrome下就会给你解析成表单提交，如果数据够复杂，让后端解析你的东西都心烦~~~那么你从接口拿到的数据，就会变成字符串了，你就需要用到下面这个方法;
-
JSON.parse()；
一般用到这个，当然不可能是后端会这么给你复杂数据结构，然后你要parse一下其实，我也见过，一般是要往浏览器里面存储临时信息，再次打开浏览器时就算用户没有通过接口保存，也可以方便记忆上次用户的配置~一般和localStorage 和sessionStorage搭配~~
网友评论