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. android 音乐播放器简单实现

    package com.zhangbz.musicplayer; import java.io.File; import android.app.Activity; import android.me ...

  2. Sencha Cmd是什么

    Sencha Cmd的简介 ~~~~~~~~~~~~~~~~~~~~~~~ Sencha cmd 是一个跨平台的命令行工具,它从你应用程序的新创建到部署入产品中的整个生命周期都提供了许多自动化的执行任 ...

  3. mybatis3.3 + struts2.3.24 + mysql5.1.22开发环境搭建及相关说明

    一.新建Web工程,并在lib目录下添加jar包 主要jar包:struts2相关包,mybatis3.3相关包,mysql-connector-java-5.1.22-bin.jar, gson-2 ...

  4. Node.js之Promise维护（同步）多个回调（异步）状态

    金天:学习一个新东西,就要持有拥抱的心态,如果固守在自己先前的概念体系,就会有举步维艰的感觉..NET程序员初用node.js最需要适应的就是异步开发, 全是异步,常规逻辑下遍历列表都是异步,如何保证 ...

  5. Tesseract-OCR 字符识别---样本训练 [转]

    Tesseract是一个开源的OCR(Optical Character Recognition,光学字符识别)引擎,可以识别多种格式的图像文件并将其转换成文本,目前已支持60多种语言(包括中文).  ...

  6. LightSpeed 之Sql和存储过程的使用

    虽然使用LightSpeed提供的Query就可以解决绝大部分问题,但如果业务逻辑过于复杂,有时候还是需要执行SQL语句或者存储过程 用SQL的方式就是使用FindBySql. FindBySql的参 ...

  7. redis的简单安装配置

    一.简介 Redis是一种高级key-value数据库,数据可以持久化,支持的数据类型很丰富,有字符串,哈希,链表,集合和有序集合5种数据类型 Redis支持在服务器端计算集合的并,交和补集(diff ...

  8. java微信接口之五—消息分组群发

    一.微信消息分组群发接口简介 1.请求:该请求是使用post提交地址为: https://api.weixin.qq.com/cgi-bin/message/mass/sendall?access_t ...

  9. Spring学习笔记之 Spring IOC容器(二) 之注入参数值，自动组件扫描方式，控制Bean实例化方式，使用注解方式

     本节主要内容:    1. 给MessageBean注入参数值    2. 测试Spring自动组件扫描方式    3. 如何控制ExampleBean实例化方式    4. 使用注解方式重构Jdb ...

  10. 04_最长上升子序列问题(LIS)

    来源:刘汝佳<算法竞赛入门经典--训练指南> P60 问题6: 问题描述:给定n个整数a1,a2,...,an,按从左到右的顺序选出尽量多的整数,组成一个上升子序列(子序列可以理解为:删除 ...