Json和Jsonp的区别是什么？

Question

Json和Jsonp的区别是什么？

Answer 1

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

Answer 2

论点：

• 如果通过ajax请求一个跨域的json，会被拒绝，说跨域

• jsonp 是用于跨域取数据，默认情况只支持GET方式

• jsonp和ajax没半毛钱关系

• jsonp和json也没半毛钱关系

证明：

1. script:src 是不会跨域的，这是主要论据
   <script src="http://xxx.com/1.js"></script>

2. 这个1.js的内容为：

   var RESULT = {"data": .....};

   这样加载之后，大家都可以获得RESULT这个变量，这个很容易理解。

3. 那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，我已经加载完毕了
   }

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

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

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

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

   所以聪明的前端工程师想到

   calljQueryWhoAmI({"data": ....});

   只要这个calljQueryWhoAmI是不停变化，我就知道是谁返回给我的

5. 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

为什么 jsonp 和json没任何关系：

根据浏览器的安全特性
同域的任何文本，比如xml、html、jpg都可以被ajax请求到，其实都是当做文本来处理
当然，json就是文本的一种
然后javascript无缝支持 JSON.parse(文本)
你就得到了json值，就这样

而 jsonp更近似于 getscript 的处理方式，连JSON.parse都不用，所以，他们有什么关系？
唯一的关系是：json == javascript's Object

Answer 3

JSON是一种格式：

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

JSONP是跨域用的规则。。

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

这两个差的还是蛮多的

Answer 4

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

Answer 5

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

Answer 6

• json 属于一种文件格式类型.

• jsonp 属于一种hack技术, 利用动态添加script标签支持跨域, 返回js代码并执行。如果你请求的接口地址与你的源域不一致,那么想要获取到接口的数据, 就可以利用jsonp技术.