JSON

JSON:一种用于在浏览器和服务器之间交换信息的基于文本的轻量级数据格式。是JS对象的字符串表示。例如：‘{''name":"aa","age":28}'，字符串必须用引号表示。

优点：

1.基于纯文本，跨平台传递简单。

2.Javascript原生支持，后台语言几乎全部支持。

3.轻量级数据格式，占用字符数量级少。

JSONP

JSON是传递数据的格式，而JSONP则是客户端与服务端数据交互的一种方式。简单的说就是用JSON来传数据，用JSONP来跨域。

JSONP出现背景

1.使用AJAX请求数据时会存在跨域问题。不管是请求什么类型的数据，只要不同域，而且服务端没有设置Access-Control-Allow-Origin头部信息的话，请求都会失败。

2.在web页面上调用JS文件不存在跨域问题。并且拥有“src”属性的标签都具有跨域的能力（比如<script>,<img>,<iframe>,<style>）。

3.所以综合以上，web客户端可以通过加载JS的方式来调用跨域服务端动态生成的JS格式文件（一般是以.JSON为后缀），后端动态生成的JS文件里，会把需要返回的数据以JSON的格式包裹到指定的回调函数里。

4.客户端在对JSON文件调用成功后，会执行指定的回调函数。这个时候可以按照自己的需求随意处理数据了。

JSONP要点

JSONP是一种非正式的传输协议，要点就是允许用户传递一个callback参数给服务端，服务端返回数据时，会将这个callback参数作为函数的名字来包裹JSON数据，传给客户端。客户端会根据自定义的回调函数来随意处理数据。

JSONP的实现

1.在html页面里定义好回调函数。此函数是返回数据后需要执行的操作。

cbGetAlbumListAd = function(cbdata){

    console.log(cbdata);

    document.getElementById('img').src = cbdata[0].imgUrl;

}

2.因为回调函数的名字是不固定的，所以需要通过参数传入，让后端动态生成名字。调用者通过传入一个参数告诉服务端“我需要调用XXX函数的JS代码”，服务端就按照这个参数值来生成JS脚本响应，并且把需要的数据以JSON的格式作为这个回调函数的参数传入。

 <html>

 <head>

 <title>JSONP</title>

 </head>

 <body>

 <img id="img" />

 <script type="text/javascript">

 cbGetAlbumListAd = function(cbdata){

     console.log(cbdata);

     document.getElementById('img').src = cbdata[0].imgUrl;

 }

 var JSONP = document.createElement('script');

 JSONP.type = 'text/javascript';

 JSONP.src = 'http://www.xxxx.com/blogPhotoAd?positionId=1&callback=cbGetAlbumListAd';

 document.getElementsByTagName("head")[0].appendChild(JSONP);

 </script>

 </body>

 </html>

补充：Ajax和JSONP的目的一样，都是请求一个URL,把服务器返回的数据进行处理。但是本质上是不同的。Ajax的核心是通过XmlHTTPRequest请求来获取数据，而JSONP是动态添加<script>标签来调用服务器提供的JS脚本。JSONP可以解决跨域问题，AJAX也可以通过服务器代理来解决跨域问题。

JSON与JSONP的更多相关文章

  1. json和jsonp的区别，ajax和jsonp的区别

    json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量 ...

  2. [转]说说JSON和JSONP，也许你会豁然开朗，含jQuery用例

    本文转自:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 说到AJAX就会不可避免的面临两 ...

  3. JSON和JSONP （含jQuery实例）（share）

    来源:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 前言: 说到AJAX就会不可避免的面临两个问 ...

  4. 【转载】说说JSON和JSONP，也许你会豁然开朗，含jQuery用例

    前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可 ...

  5. json和jsonp（json是目的，jsonp是手段）

    自己理解:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议.我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的" ...

  6. 用nodejs实现json和jsonp服务

    一.JSON和JSONP JSONP的全称是JSON with Padding,由于同源策略的限制,XmlHttpRequest只允许请求当前源(协议,域名,端口)的资源.如果要进行跨域请求,我们可以 ...

  7. json 与jsonp 特点及区别

    简单描述JSON跟JSONP的区别以及实战 什么是JSON? 前面简单说了一下,JSON是一种基于文本的数据交换方式,或者叫做数据描述格式,你是否该选用他首先肯定要关注它所拥有的优点. JSON的优点 ...

  8. 说说JSON和JSONP，也许你会豁然开朗，含jQuery用例 分类： JavaScript 2014-09-23 10:41 218人阅读 评论(1) 收藏

    前言: 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Sock ...

  9. php返回json,xml,JSONP等格式的数据

    php返回json,xml,JSONP等格式的数据 返回json数据: header('Content-Type:application/json; charset=utf-8'); $arr = a ...

  10. json和jsonp的使用格式

    最近一直在看关于json和jsonp的区别和各自的用法.优缺点!  下面是我看到过解释最清楚的一片文章 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求 ...

随机推荐

  1. UnityShader之固定管线命令Combine纹理混合【Shader资料4】

    Combine,纹理混合. 我们先看圣典上给的解释. 纹理在基本的顶点光照被计算后被应用.在着色器中通过SetTexture 命令来完成. SetTexture 命令在片面程序被使用时不会生效:这种模 ...

  2. iOS UI 之UILable

    @interface ViewController : UIViewController @property (strong,nonatomic) UILabel *aLable; @property ...

  3. .net程序员工作两年总结

    (2015年9月) 最近换了工作,面试了很多家公司想总结下,以便以后回顾知道自己是怎么走过来的. 入行背景: 我是半路转行做软件开发的,2011年7月大学专科毕业,大学专业是:机械制造及其自动化:20 ...

  4. C#操作XML小结(转)

    一.简单介绍 using System.Xml; //初始化一个xml实例 XmlDocument xml=new XmlDocument(); //导入指定xml文件 xml.Load(path); ...

  5. centos升级mysql至5.7

    1.备份原数据库 [root@www ~] #mysqldump -u root –p -E –all-database > /home/db-backup.sql 加-E是因为mysqldum ...

  6. MyCat 学习笔记 第七篇.数据分片 之 按数据范围分片

    1 应用场景 Mycat 其实自带了2个数据范围分片的方案,一个是纯数据范围的分片,比如 1至 10000 号的数据放到分片1 ,10001 至 20000号数据放到分片2里. 另一个是数据常量形式的 ...

  7. oracle归档日志写满错误解决方法

    最近一年,手头上负责的项目要部署到很多个地方,由于项目组里没有人对oracle比较熟悉,只能给自己增加一个DBA的角色了.由于短时间内要部署很多单位,备份策略没有设置好,结果过了一个月,用户报告程序开 ...

  8. 第九篇 ：微信公众平台开发实战Java版之如何实现自定义分享内容

    第一部分:微信JS-SDK介绍 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包. 通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语音.位置等手机系统 ...

  9. 微信公众平台开发教程--方培工作室，PHP语言版本

    准备工作 微信公众平台的注册 介绍如何注册一个微信公众账号. 入门教程 微信公众平台开发入门教程 内容:1.申请SAE作为服务器; 2.启用开发模式; 3.微信公众平台PHP SDK; 4.接收发送消 ...

  10. ubuntu更新删除旧内核的shell脚本

    ubuntu经常提示要更新内核,更新几次后 /boot目录就满了,再更新就提示目录没空间了,这时候就需要删除不用的老旧内核,之前都是uname, grep, dpkg之类的命令一条条敲,然后用眼睛看需 ...