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. OC小实例关于init方法不小心的错误

    *:first-child { margin-top: 0 !important; } body > *:last-child { margin-bottom: 0 !important; } ...

  2. java ee 面试时的机试题

    写一个简单的用户登录  servlet+jsp+原生ajax+json实现方式:  http://pan.baidu.com/s/1jGDY5h0

  3. paas架构之docker——镜像管理

    1. 镜像管理 1.1. 列出镜像 Sudo docker images 1.2. 查看镜像 Sudo docker images xxxx 1.3. 拉取镜像 Sudo docker pull ub ...

  4. android5.x新特性之Tinting

    Android5.X对图形操作上有更多的功能.下面来看看Tinting(着色) Tinting的使用非常简单,几乎 没什么好说的,只要在xml中配置好tint和tintMode即可.直接看实际例子吧. ...

  5. python数据结构-列表-基本操作

  6. APACHE重写去除入口文件index.php

    下面我说下 apache 下 ,如何 去掉URL 里面的 index.php 例如: 你原来的路径是: localhost/index.php/index 改变后的路径是: localhost/ind ...

  7. Backbone模型

    现在进入最关键的组件 - 模型.模型用来存储应用的所有数据,以及直接和数据操作相关的逻辑.Backbone中的模型类是Backbone.Model,它包含了数据存储,数据验证,以及数据发生变动时触发相 ...

  8. Linux学习之四——磁盘与文件系统管理

    一.一些基本定义 1. superblock:记录此 filesystem 的整体信息,包括inode/block的总量.使用量.剩余量, 以及文件系统的格式与相关信息等:2. inode:记录档案的 ...

  9. C++find函数

    头文件 #include <algorithm> 函数实现 template<class InputIterator, class T> InputIterator find ...

  10. UVA 10405 Longest Common Subsequence --经典DP

    最长公共子序列,经典问题.算是我的DP开场题吧. dp[i][j]表示到s1的i位置,s2的j位置为止,前面最长公共子序列的长度. 状态转移: dp[i][j] = 0                 ...