浅谈JSON和JSONP的区别

以前经常把JSON和JSONP搞混淆，最近特意查阅了相关资料终于搞明白两者关系了，简单说一下。

JSON
JSON是一种基于文本的数据交换格式，用于描述复杂的数据，举个例子，描述一个学生的信息可以这样子写：

var student = {
    "id":"001",
    "name":"张三",
    "sex":"男",
    "age":20
}

console.log(student.id);     //001
console.log(student.name);   //张三

然后就可以通过student.id，student.name这种方式获取这个学生的学号和姓名。

如果描述多个学生信息的话也大同小异，可以这样写：

var student =[
    {
        "id":"001",
        "name":"张三",
        "sex":"男",
        "age":20
    },
    {
        "id":"002",
        "name":"李四",
        "sex":"女",
        "age":21
    },
    {
        "id":"003",
        "name":"王五",
        "sex":"男",
        "age":19
    }
]

console.log(student[0].id);     //001
console.log(student[1].name);   //李四

然后就可以通过student[0].id，student[1].name这种方式获取这些学生的学号和姓名了。

JSON其实应用得很广泛，不难理解，但是JSONP就很容易被误解了， 以为跟JSON一样，实际上是两个不同的东西。

JSONP
如果你理解了JSON是一种数据交换格式，那么JSONP就是一个跨域交互协议，可以理解为，JSONP约定了JSON的这个数据怎样进行传递。

再讲详细点，跨域是指从一个域名去请求另一个域名的资源，我们知道，如果直接用AJAX请求的时候，由于浏览器同源策略的存在，很容易产生跨域问题，同源策略是指域名、协议、端口均相同，如果不同则视为跨域请求，跨域请求一律都是不行的。

想要跨域请求资源，除非我们运用js的特性：script标签中的链接可以访问跨域的js文件，于是跨域服务器可以这样做，它把客户端需要的数据动态包装成js文件然后提供给客户端请求。这种数据传递方式慢慢就形成了一种传输协议，这就是JSONP了。