首頁 >web前端 >js教程 >json與jsonp的區別與使用詳解

json與jsonp的區別與使用詳解

php中世界最好的语言原創: 2018-04-04 17:33:331415瀏覽

这次给大家带来json与jsonp的区别和使用详解，使用json与jsonp的注意事项有哪些，下面就是实战案例，一起来看一下。

一言以蔽之，json返回的是一串数据；而jsonp返回的是脚本代码（包含一个函数调用);接下来通过本文给大家介绍json与jsonp区别及通过ajax获得json数据后格式的转换，需要的朋友参考下

有关json与jsonp的区别（json才是目的，jsonp只是手段）介绍如下所示：

一言以蔽之，json返回的是一串数据；而jsonp返回的是脚本代码（包含一个函数调用）；

JSON其实就是JavaScript中的一个对象，跟var obj={}在质上完全一样，只是在量上可以无限扩展。简单地讲，json其实就是JavaScript中的对象(Object)和数组(Array，其实也是对象)这倆好基友在那儿你嵌我我嵌你地套上n多层，以此模拟出许多复杂的数据结构。

json易于人阅读和编写，也易于机器解析和生成，相对网络传输速率较高，功能型网站前后端往往要频繁大量交换数据，而json凭借其强大的表现力和高颜值渐渐地成为理想的前后端数据交换语言。那xml前辈呢，我觉得应该会像微软的xp那样功成身退。

同源（不懂同源策略的童鞋请自行百度）下的前后端数据交换格式确定使用json了，那么问题来了，如果我想获取别人网站上提供的数据肿么做到呢？也就是跨域读取数据问题（不要钻牛角说你不需要读取其他网站的数据，相信我，你早晚得需要），json行不行呢？答案是No Way，为什么呢，因为json只是普通的文本格式，能让你这样就轻松拿到那服务端就没有任何安全和保密性可言了，这样的话互联网世界非乱套不可，这个问题那些牛X的规范制定者早就想到了，所以使用了同源策略来限制文件获取。最后的结果就是只有像img、script、iframe这类可以指定src属性的标签有跨域获取别人网站上数据（图片，脚本，源文件其实都是数据）的能力。比如：

<!--京东商品图片-->
<img src="http://img30.360buyimg.com/jgsq-productsoa/jfs/t2407/323/1635505465/47386/f2d89d88/56615e00N7a475ee6.jpg" />
<!--百度CDN-->
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

看来直接获取json是行不通了，那有没有其他方法能拿到数据呢？于是乎jsonp就这样被聪明的开发者给发现了，为什么说是发现而不是发明呢，因为并没有涉及到任何新技术，就像发现ajax一样。

jsonp原理是这样的，网站A需要获取网站B的数据，网站B说我给你们一个方法，【1. 你们使用标签先获取到open.js文件（网站B的责任），这里边有你们需要的数据。2. 你们获取数据后处理数据（总得处理数据吧）的方法名必须命名为foo（数据请求者的责任和义务）】，这里相当于B网站和请求获取数据者之间建立了一个协议，要求请求者务必按照规则办事，如果请求者不能同时遵守上面两条就不能按预期获取数据。额..，这也算相当于建立了一个潜规则吧

open.js内容

foo({"name":"B","age":23});　　//为什么不直接写成json数据{"name":"B","age":23}呢，原因很简单，在js文件总得合乎js语法吧
//这也是为什么协议中明确规定处理数据的方法名必须命名为foo，因为B网站是在假定请求者的脚本中已经定义了数据处理方法foo的情况下返回数据；
//不然就会报foo is not defined错误

网站A脚本须有

function foo(data){
console.log(data);
//ToDo.. 
}

啊！虽然拐了个弯，但数据总算得到了，网站A，网站B都非常高兴，那么问题又来了，网站C说也需要获取网站B的数据，网站B把协议甩给它，网站C拿过来一看，草泥马啊，foo这个名字已经在自己的脚本文件的6868行用过了，而且已经使用在脚本的各个角落，批量替换会导致很多潜在bug啊，网站B情急之下决定把foo改成fool，网站A立马蹦起来，因为自己的网站已经在很多地方使用foo引用了数据。

为了避免上面情况发生，那些牛X哄哄的开发者使用了动态生成js文件的方法，php版本如下：

open.php

<?php
header(&#39;Content-type: application/javascript&#39;);
$jsonCallback = htmlspecialchars($_REQUEST [&#39;callback&#39;]); //获取请求者自定义的回调函数名
$jsonData =&#39;{"name":"B","age":23}&#39;; //待返回的json数据
echo $jsonCallback . "(" . $jsonData . ")"; //输出jsonp格式的数据，即一行函数调用语句
?>

额 ..，至于php为什么能返回js格式文件，自行百度。

于是网站A用来请求数据，不需要修改任何变量，返回给A的脚本文件内容是：

foo({"name":"B","age":23}); //所谓的jsonp，就是一句函数调用，数据都被包裹传递到参数中了，千万别穿个马甲就不认识了 
网站C就用<script src="http://www.B.com/open.php?callback=blah"></script>来请求数据，返回给C的脚本文件内容是：
blah({"name":"B","age":23}); 
网站N就用<script src="http://www.B.com/open.php?callback=what"></script>来请求数据，返回给N的脚本文件内容是：
what({"name":"B","age":23});

Problem Solved，大家都取到了期望的数据，并且避免了命名冲突。

jsonp全名叫做json with padding，很形象，就是把json对象用符合js语法的形式包裹起来以使其它网站可以请求得到，也就是将json数据封装成js文件；

json是理想的数据交换格式，但没办法跨域直接获取，于是就将json包裹(padding)在一个合法的js语句中作为js文件传过去。这就是json和jsonp的区别，json是想要的东西，jsonp是达到这个目的而普遍采用的一种方法，当然最终获得和处理的还是json。所以说json是目的，jsonp只是手段。json总会用到，而jsonp只有在跨域获取数据才会用到。

理解了json和jsonp的区别之后，其实ajax里的跨域获取数据就很好理解和实现了，同源时候并没有什么特别的，直接取就行，跨域时候需要拐个弯来达到目的。

附上jquery中ajax请求json数据实例：

（同源）：

$.ajax({
url:"persons.json",
success:function(data){
　　　　console.log(data);
　　 　 //ToDo..
　 }
});

（跨域）：

$.ajax({
url:"http://www.B.com/open.php?callback=?",
dataType:"jsonp",
success:function(data){
console.log(data);
//ToDo..
}
});

jquery已把jsonp封装进ajax，很合理，因为毕竟绝大多数的jsonp请求都是ajax，关于jquery的ajax具体用法请自行百度，另外要注意的一点就是不同的网站提供的数据接口的$_REQUEST ['callback']中不一定绝对是callback也可能是cb,cbk等，具体使用时务必阅读服务端提供的有关接口使用的详细文档。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

json與jsonp的區別與使用詳解

相關文章