自己理解: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等,具体使用时务必阅读服务端提供的有关接口使用的详细文档。

转载于:https://www.cnblogs.com/xy-milu/p/6085984.html

json和jsonp(json是目的,jsonp是手段)相关推荐

  1. JSONP JSON CORS

    什么是跨域? XMLHttpRequest2 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest#Events 概念:只要协 ...

  2. JSON学习笔记(六)- JSONP

    JSONP 教程 本章节我们将向大家介绍 JSONP 的知识. Jsonp(JSON with Padding) 是 json 的一种"使用模式",可以让网页从别的域名(网站)那获 ...

  3. VsCode配置Python项目的setting.json和launch.json两个配置文件

    我们在VsCode中首次创建一个Python项目,一般情况下是不会有setting.json和launch.json两个配置文件,如下图所示: 那么这个时候我们可以通过点击下方的"运行和调使 ...

  4. 轻量化Json开源格式化工具-JSON Formatter

    简介 JSON Formatter在浏览器可以看到格式化之后的json数据. JsonFormatter可以让开发者在浏览器查看接口的的层级信息,方便开发. JsonFormatter的使用非常简单, ...

  5. ajax 循环json,Ajax 遍历json

    url: 要求为String类型的参数,(默认为当前页地址)发送请求的地址. type: 要求为String类型的参数,请求方式(post或get)默认为get.注意其他http请求方法,例如put和 ...

  6. php json.parse,JSON.parse()与JSON.stringify()和eval()使用方法详解

    这次给大家带来JSON.parse()与JSON.stringify()和eval()使用方法详解,JSON.parse()与JSON.stringify()和eval()使用的注意事项有哪些,下面就 ...

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

    浅谈JSON.parse().JSON.stringify()和eval()的作用 相信大家对于JSON应该不陌生,度娘对这个名词的解释大致如下: "JSON(JavaScript Obje ...

  8. SpringMVC之JSON工具:Jackson Gson 和fastjson通过JSON工具来解决文字乱码和时间格式问题——通过JSON工具生成JSON

    什么是Json? JSON:JavaScript Object Notation+JS对象 它是一种轻量级的数据交换格式JSON(当前是交互的顶流),它自身具有独立的编程格式,它的特点是简洁和清晰,J ...

  9. oracle如何解析json,oracle 解析json格式

    1. CREATE OR REPLACE PACKAGE PKG_ANALYSE_COMMON IS -- AUTHOR : YZCHEN -- CREATED : 2013/11/26 14:12: ...

  10. asp ajax返回json数据类型,asp怎么返回json asp返回json是否通信成功等参数

    相信大家对于asp和json都不陌生,当下json应用的非常广泛,但asp语言中并没有可以直接生成json对象的方法,这个就比较麻烦了.还好现在有了JSON.asp和json.js 了 下面介绍 as ...

最新文章

  1. 安卓环境搭建 SDK emulator directory is missing
  2. META Header
  3. 如何定义Java对象
  4. 变量 常量 作用域和命名规范
  5. 水滴公司更新招股书:发行价区间为10-12美元
  6. Ruby 28 岁生日快乐!
  7. 前端工程师应该怎么发展?
  8. 测试面试必问点【干货】建议收藏!!
  9. 水凝胶 静电纺丝_【再生医学前沿】Nature子刊:静电纺丝玩出新花样!静电射流偏转的超快3D打印亚微米结构...
  10. html画布arc,绘制弧线将线性渐变html5画布(Draw arc will linear gradient html5 canvas)
  11. 计算机主机内部防尘装置,一种计算机主机用防尘装置制造方法及图纸
  12. 微信小程序——校园服务小程序(四)校园论坛加预约理发服务
  13. 修改系统时区 /etc/localtime
  14. 龙腾世纪审判一直连接服务器,【1.7.2】【rpg】我的世界龙腾世纪群组服务器
  15. kws 命令词唤醒介绍
  16. AVD模拟器一直处于开机状态打不开的解决办法
  17. 如何取消掉计算机更新图标,win10右下角更新提醒怎么去掉_电脑右下角总出现win10系统升级提示如何关闭...
  18. BI工具是什么,有什么用,怎么用?
  19. matlab读取jra55数据,[转载][原创]灰色关联分析及Matlab程序实现
  20. xSS-Reflected

热门文章

  1. 毕向东Java基础教程(适合初学者入门的Java基础视频)
  2. 计算机网络日,《计算机网络原理》教学日历[汇编].pdf
  3. Linux7如何手动建库,Centos 7系列删除数据库并重新安装
  4. java.text._Java.text
  5. golang struct 转map 及 map[string]*Struct 初始化和遍历
  6. BZOJ 3144 [HNOI2013]切糕 (最大流+巧妙的建图)
  7. 为窗体添加防机器人的验证机制
  8. 浅谈用原生 JS 模仿个Promise 的实现
  9. mysql中char,varchar,text
  10. spring getbean 方法分析