javascript - Json和Jsonp的区别是什么？-PHP中文网问答

javascript - Json和Jsonp的区别是什么？

大家讲道理 2017-04-11 11:49:37

[JavaScript讨论组]

515

Json和Jsonp的区别是什么？

大家讲道理

光阴似箭催人老，日月如移越少年。

全部回复(6)

巴扎黑2017-04-11 11:51:37 6楼

简单的说JSON是一种数据交换格式，而JSONP是一种非官方跨域数据交互协议。JSON是“暗号”，而JSONP则是接头方式。一个是描述信息的格式，一个是信息传递双方约定的方法。

赞 +0

添加回复

阿神2017-04-11 11:51:37 5楼

JSON是一种格式：

{
    test:[
        {
            name:"testname"
        }
    ]
}

JSONP是跨域用的规则。。

$.getScript()
$.ajax(type:"JSONP")

这两个差的还是蛮多的

赞 +0

添加回复

迷茫2017-04-11 11:51:37 4楼

jsonp是一种跨域请求方式。主要原理是利用了script标签可以跨域请求的特点，由其src属性发送请求到服务器，服务器返回js代码，网页端接受响应，然后就直接执行了，这和通过script标签引用外部文件的原理是一样的。
json是一种数据交换的格式。

赞 +0

添加回复

迷茫2017-04-11 11:51:37 3楼

JSON是一种文本格式，JSONP是为了跨域访问其他站点而想出来的一种利用Get请求返回脚本注入函数获取数据交互方式

赞 +0

添加回复

PHP中文网2017-04-11 11:51:37 2楼

论点：

如果通过ajax请求一个跨域的json，会被拒绝，说跨域
jsonp 是用于跨域取数据，默认情况只支持GET方式
jsonp和ajax没半毛钱关系
jsonp和json也没半毛钱关系

证明：

script:src 是不会跨域的，这是主要论据
<script src="http://xxx.com/1.js"></script>
这个1.js的内容为：
```
var RESULT = {"data": .....};
```
这样加载之后，大家都可以获得RESULT这个变量，这个很容易理解。

那jQuery的ajax是如何请求并加载这个页面呢？

$.getScript('http://.../1.js', function(){
    console.log(RESULT.data);
});
或
$.ajax({
    url: 'http://.../1.js',
    dataType: 'script',
    success: function(){
        console.log(RESULT.data);
    }
}

看起来是用ajax请求的，其实是jQuery做了一个模拟，真实代码更像：

var s = document.createElement('script');
s.src = 'http://.../1.js';
s.onload = function(){
    通知jQuery.ajax，我已经加载完毕了
}

为什么会诞生jsonp？
因为在当年，IE 6风行的时候，getScript(或ajax{dataType:'script'}，下同），请求js资源是同步方式（因为浏览器请求jpg/css资源都是同步），也就是请求到一个之后，才会请求下一个，而当年网络上的ajax控件也大部分是做的同步（即使当年ajax支持异步，但是在IE 6下也无法将getScript变成异步，这是浏览器内核的问题）。

---　
同步，的确满足楼主的要求，但是：会卡浏览器，会白屏。

所以：为了异步请求，Chrome诞生了，接着IE、firefox跟进都异步了。

但是异步会到导致一个问题：因为网络的原因，我根本不知道RESULT变量是谁传回来的，并且RESULT会被后请求到的数据覆盖。

所以聪明的前端工程师想到
```
calljQueryWhoAmI({"data": ....});
```
只要这个calljQueryWhoAmI是不停变化，我就知道是谁返回给我的
jsonp流程
- 用户发起jsonp请求
```
$.ajax({
    url:'http://.../1.php?callback=?',
    dataType: 'jsonp',
});
```
- jquery开始做如下工作
  - 这是第5次请求
  - 生成一个callback的随机名字
```
var callback = 'callback_123456789';
```
  - 绑定这个名字到用户请求的ajax的序号5
```
jqueryAjax[5] = callback;
```
  - 替换用户的网址为
```
http://.../1.php?callback=callback_123456789
```
  - 新建一个函数来接受数据
```
var callback_123456789 = function(json) {
    jQuerySuccess([5, json]); //回调第5个success
}
```
  - 开始请求数据
```
createElement('script').src="http://.../1.php?callback=callback_12345789";
```
- 用户收到http://.../1.php?callback=callback_123456789做的工作
```
<?php
$callback = $_GET['callback'];

$data = read database....

echo $callback.'('.json_encode($data).');'
```
  也就是echo
```
callback_12345789({"data": ...})
```
- 当这个<script src="http://.../1.php?callback=callback_12345789"></script>加载完毕时，浏览器会自动去
```
call callback_12345789
```
- 流程继续到jQuery的
```
var callback_123456789 = function(json)
```
- 你通过success接受到数据，开始工作
这里是一个简单的逻辑，具体的实现会更加智能和科学一些，比如：闭包等方式，但是以上观点可以帮助你理解jsonp