JSON 与JSONP的温习

之所以要温习JSON和JSONP，不得不说起，周五和后台联调JSONP接口的时候，一直在纠正后台哥哥JSONP的回调函数名不要定死，而应该是由我们前端去定义，而后台哥哥一直在强调他们那边并没有做任何函数名的定义，完全是看我们的。问了一下老同事，才知道是我这边的问题，请求是我发出的，数据能接受成功，有问题应该从自身查起。补充一下：当时并不知道后台做了一层处理，该接口只能在特定的域名下打开，所以所有右键打开都报404。

所以怕再次被打脸，周末赶紧拿起前端宝典《JavaScript 高级程序设计》研读一番，对JSON和JSONP梳理梳理：
1. JSON的温习
2. JSONP的温习
3. 两者的应用场景
4. 两者的比较

JSON的温习

&语法

JSON 的出现是为了替代烦琐冗长的XML，它是一种轻量级的数据交换格式，是基于ECMAScript的一个子集，也是前端和后台合作最密切的一部分，和后台有共同话题就是联调接口^_^
JSON的语法有三种：
* 简单值：字符串、数值、布尔值以及null。但不支持undefined，所有undefined的都会被忽略，而且不会报错；
* 数组：表示一组有序的列表；
* 对象：表示一组无序的键值对；

tips：所有的属性名以及字符串都必须用双引号，任何单引号都会引起报错。

&解析和序列化

解析是指将JSON的字符串解析成为原生的JavaScript值，序列化是指将JavaScript对象序列化为JSON字符串，分别用到parse()和stringify()方法。
大多数时候，项目中用的都是jQuery或者Zepto的ajax去发请求，也许你们也会遇到这种疑问：为什么有时候获取到的数据可以直接去操作，而有些时候则需要解析成为JavaScript对象才能操作？答案在这里： Jquery ajax方法解析返回的json数据
为了避免这些发生，跟后台定接口的时候，应着重跟他讲明直接return一个常量字符串【当然首先你得是个妹子，萌妹子更好】，这样就可以直接操作。

JSONP的温习

这篇文章的起因就是跟后台哥哥争议JSONP的回调函数，所以今天的主角就是JSONP->处理跨域。
我们知道，图片和js的src都支持跨域操作，所以聪明的开发人员想到了用js实现跨域，就是在服务器端写一段动态生成的js，内容仅包含回调函数，并将数据塞到参数里面供我们前端获取。但是问题是我们要怎么告诉远程的js它调用的函数名叫什么？服务器端并不需要事先知道函数名是什么，只要它是动态生成的js，这样调用者可以在请求上传人一个参数告诉服务器帮我生成一个XX函数的js代码给我就行，于是服务器就会按照我们的需求去生成对应的js脚本。在使用jquery请求JSONP的时候，除非跟后台定义了函数名一定是某一个比如“jsonpcb”以外，我们无需自定义callback函数，因为伟大的jquery在处理jsonp类型的ajax时候，会自动帮你生成回调函数并把数据提取出来供success方法调用。傻逼的我周五还在把锅丢给后台哥哥，还好后台哥哥人好不计较。

两者的应用场景

同域名下，与后台实现数据通信非JSON莫属，一般情况下，更倾向于同源操作，毕竟同域名下更安全，联调也更方便。
涉及到跨域，就得提起JSONP。一般是项目中要用到其他域名的接口，而本项目下后台又不想另外造轮子的时候，就不得不跪求别人同你联调。

两者的比较

• JSON和JSONP这两者技术在调用方式上看起来一样，只是ajax的键值有些区别。
• 其实jquery对两者的实现原理完全不一样。json的核心是通过XMLHttpRequest获取非本页内容，而 JSONP的核心则是通过动态添加script标签来调用服务器提供的js代码
• 同源策略下，与后台的数据通信用JSON，而跨域情况下优先考虑JSONP

tips:温故而知新，对知识又有了进一步的了解，不懂就去看，而不是强辩。