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. NSURLSession／NSURLConnection的上传文件方法（已做了更新）

    最好的学习方法就是 领悟 + 证悟. 此篇文章的理论基础主要是与HTTP网络通信协议相关.为集中精力,可以先把TCP/IP协议这些置之不理,也就是先只关注HTTP的请求和响应的结构.HTTP完整的原理 ...

  2. android学习笔记 activity生命周期&任务栈&activity启动模式

    activity生命周期 完整生命周期 oncreate->onstart->onresume->onpause->onstop->ondestory 使用场景:应用程序 ...

  3. Reverse反转算法＋斐波那契数列递归＋Reverse反转单链表算法－－C++实现

    Reverse反转算法 #include <iostream> using namespace std; //交换的函数 void replaced(int &a,int & ...

  4. <极客学院>视频教程学习笔记－iOS中CALayer的使用

    <1>CALayer简介 1.CALayer一般作为UIView的容器而使用. 2.CALayer是一个管理者图片载体(image-based content)的层结构 3.直接修改单独创 ...

  5. 使用batch insert解决MySQL的insert吞吐量问题

    最近使用了一个非常简单易用的方法解决了业务上的一个insert吞吐量的问题,在此总结一下. 首先我们明确一下,insert吞吐量其实并不是指的IPS(insert per second),而是指的RP ...

  6. ci 使用体会

    1.在git review后,必须前一天commit先merge后,下一个commit 才能merge,不然就会出现merge pending的状态. 2.jenkins的gerrit trigger ...

  7. OBIEE 11g 启动与停止包含服务器重启

    ORACLE_BIEE_HOME为biee安装路径 注意:默认建立的是"instance1"但是如果你安装过多次可能实例名是不一样(例如: instance2以此类推).因此,请找 ...

  8. Effective Java 13 Minimize the accessibility of classes and members

    Information hiding is important for many reasons, most of which stem from the fact that it decouples ...

  9. PL/SQL之--存储过程

    一.存储过程 存储过程是一组为了完成特定功能的SQL 语句集,经编译后存储在数据库中,用户通过指定存储过程的名字并给出参数(如果该存储过程带有参数)来执行它.oracle可以把PL/SQL程序储存在数 ...

  10. 第1章　Java中常用字符串方法总结

    1.1 charAt方法——提取指定字符 1.2 codePointAt方法——提取索引字符代码点 1.3 codePointBefore方法——获取索引前一个字符的代码点 1.4 codePoint ...