json和jsonp(json是目的,jsonp是手段)

自己理解:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的“暗号”,而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。

ajax的核心是通过XmlHttpRequest获取非本页内容,而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本。

本文转载自IoveC的博客

链接地址如下:http://www.cnblogs.com/iovec/p/5312464.html

一言以蔽之,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. 你们使用<script src="http://www.B.com/open.js"></script>标签先获取到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(‘Content-type: application/javascript‘);
$jsonCallback = htmlspecialchars($_REQUEST [‘callback‘]);    //获取请求者自定义的回调函数名
$jsonData =‘{"name":"B","age":23}‘;    //待返回的json数据
echo $jsonCallback . "(" . $jsonData . ")";    //输出jsonp格式的数据,即一行函数调用语句
?>

额 ..,至于php为什么能返回js格式文件,自行百度。
于是网站A用<script src="http://www.B.com/open.php?callback=foo"></script>来请求数据,不需要修改任何变量,返回给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等,具体使用时务必阅读服务端提供的有关接口使用的详细文档。

时间: 2024-10-02 00:00:24

json和jsonp(json是目的,jsonp是手段)的相关文章

JSONP(Json with padding)

JSONP:一种非官方跨域数据交互协议 JSONP怎么产生的 JSONP的原理 看上面的来源加以理解 上面说过了,script是不受跨域影响的 那么我们可以在我们代码中引用B服务器的文件 1 <script type="text/javascript" src="http://demo.com/jsonp/demoResult.aspx?callback=jsonpCallback"></script> 在B服务器端demoResult.as

SpringMVC JSONP JSON支持

1.ajax端 $.ajax({ type: "post", dataType: "jsonp", //传递给请求处理程序,用以获得jsonp回调函数名的参数名(默认为:callback) jsonp: "callback", //自定义的jsonp回调函数名称,默认为jQuery自动生成的随机函数名 jsonpCallback:"success_jsonpcallback", url: "http://localh

JSON进阶第三篇 apache多域名及JSON的跨域问题(JSONP)

本文先介绍如何为apache配置多域名,然后再用JSONP(JSON with Padding)来解决JSON的跨域问题. 阅读本文之前,推荐先参阅<JSON进阶第二篇AJAX方式传递JSON数据>. 一.apache配置多域名 在apache的conf目录下找到httpd.conf,然后在该文件最后增加如下内容: # 声明使用虚拟主机过滤规则 NameVirtualHost*:80 #虚拟主机localhost <VirtualHost*:80> ServerName  loca

jsonp+jquery示例代码,jsonp是什么?看完了还不会我就给你跪了.....

文件与目录结构: |---jsonp|-----------json.php|-----------jsonp.php|-----------test.php 代码如下: test.php <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xml

JSON.parse() 和 JSON.stringify()的简单介绍

参考地址: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/JSON/stringify 最近一段时间在测试前端页面的时候, 需要对后台数据进行处理, 后台返回的数据基本都是json格式, 这里就要用到

浅谈JSON.parse()、JSON.stringify()和eval()的作用

相信大家对于JSON应该不陌生,度娘对这个名词的解释大致如下: “JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使JSON成为理想的数据交换语言,作用是易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率).” 今天在这里笔者想简单谈谈jquery里面的JSON.parse()和JSON.stringify()函数,顺便

【荐】使用eval()、new Function()将JSON字符串转换为JSON对象

在JS中将JSON的字符串解析成JSON数据格式,一般有两种方式: 1.一种为使用eval()函数. 2. 使用Function对象来进行返回解析. 第一种解析方式:使用eval函数来解析,并且使用jQuery的each方法来遍历 用jQuery解析JSON数据的方法,作为jQuery异步请求的传输对象,jQuery请求后返回的结果是json对象,这里考虑的都是服务器返回JSON形式的字符串的形式,对于利用JSONObject等插件封装的JSON对象,与此亦是大同小异,这里不再做说明. 这里首先

JSON.parse()、JSON.stringify()和eval()的作用

相信大家对于JSON应该不陌生,度娘对这个名词的解释大致如下: “JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于ECMAScript的一个子集.因为采用独立于语言的文本格式,也使用了类似于C语言家族的习惯,拥有了这些特性使JSON成为理想的数据交换语言,作用是易于人阅读和编写,同时也易于机器解析和生成(一般用于提升网络传输速率).” 今天在这里笔者想简单谈谈jquery里面的JSON.parse()和JSON.stringify()函数,顺便

分享基于.NET动态编译&amp;Newtonsoft.Json封装实现JSON转换器(JsonConverter)原理及JSON操作技巧

原文:分享基于.NET动态编译&Newtonsoft.Json封装实现JSON转换器(JsonConverter)原理及JSON操作技巧 看文章标题就知道,本文的主题就是关于JSON,JSON转换器(JsonConverter)具有将C#定义的类源代码直接转换成对应的JSON字符串,以及将JSON字符串转换成对应的C#定义的类源代码,而JSON操作技巧则说明如何通过JPath来快速的定位JSON的属性节点从而达到灵活读写JSON目的. 一.JSON转换器(JsonConverter)使用及原理介

.Net Core下一次针对dpz2.Json和Newtonsoft.Json解析库的简单测试

关于dpz2.Json dpz2.Json是大胖子软件的自研Json解析库. 应用于更加简单的使用场景 在dpz2.Json诞生之前,我们一直使用的是Newtonsoft.Json解析库,Newtonsoft.Json最方便的地方是采用了类似JavaBean的绑定方式进行操作,但是实际操作时,我们可能更多时候只想要个解析器,好让我们能快速的辨别数据,这个时候,单纯的JavaBean方式又变得比较肘制,读取数据使用C#的动态类型确实可以比较方便的进行操作. 专注于直接操作 另外一个促使我们自研一个