JSON与JSONP

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的格式作为这个回调函数的参数传入。

 1 <html>
 2 <head>
 3 <title>JSONP</title>
 4 </head>
 5
 6 <body>
 7 <img id="img" />
 8
 9 <script type="text/javascript">
10 cbGetAlbumListAd = function(cbdata){
11     console.log(cbdata);
12     document.getElementById(‘img‘).src = cbdata[0].imgUrl;
13 }
14
15 var JSONP = document.createElement(‘script‘);
16 JSONP.type = ‘text/javascript‘;
17 JSONP.src = ‘http://www.xxxx.com/blogPhotoAd?positionId=1&callback=cbGetAlbumListAd‘;
18 document.getElementsByTagName("head")[0].appendChild(JSONP);
19 </script>
20 </body>
21 </html>

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

时间: 2024-10-24 13:06:40

JSON与JSONP的相关文章

chrome浏览器下用jQuery的load函数来跨域加载页面,响应状态status为(canceled)是什么情况? JSON和JSONP,也许你会豁然开朗,含jQuery用例

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html 问题来源:http://q.cnblogs.com/q/63123/ 问题出现的环境: 1:两个domain相同端口号不同的域名. 2:MVC4.0框架 3:从一个域名下用  jQuery.load("另一个域名下的页面"): 4:响应失败 : 响应状态status为(canceled) 请问这是什么情况呢 ?  我在IE下就没问题,可以

说说JSON和JSONP

来自 http://blog.jobbole.com/18012/ 前言 由于Sencha Touch 2这种开发模式的特性,基本决定了它原生的数据交互行为几乎只能通过AJAX来实现. 当然了,通过调用强大的PhoneGap插件然后打包,你可以实现100%的Socket通讯和本地数据库功能,又或者通过HTML5的 WebSocket也可以实现与服务器的通讯和服务端推功能,但这两种方式都有其局限性,前者需要PhoneGap支持,后者要求用户设备必须支持 WebSocket,因此都不能算是ST2的原

json和jsonp的区别,ajax和jsonp的区别

json和jsonp虽然只有一个字母的区别,但是它们之间扯不上关系. json是一种轻量级的数据交换格式. jsonp是一种跨域数据交互协议. json的优点:(1)基于纯文本传递极其简单,(2)轻量级数据格式适合互联网传递,(3)容易编写和解析. ajax和jsonp的区别: 相同点:都是请求一个url 不同点:ajax的核心是通过xmlHttpRequest获取内容 jsonp的核心则是动态添加<script>标签来调用服务器 提供的js脚本. --- <来源于网络>

json和jsonp的使用区别

json和jsonp的使用区别 一.    跨域请求的概念 JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象. 二.    json和jsonp JSON是一种基于文本的数据交换方式(不支持跨域),而JSONP是一种非官方跨域数据交互协议. 使用json格式传递数据的客户端代码如下: 1 $(function () { 2 var user = { 3 "username": "HelloWorld" 4 }; 5 6 $.ajax({ 7 ur

json与jsonp区别浅析(json才是目的,jsonp只是手段) (转)

一言以蔽之,json返回的是一串数据:而jsonp返回的是脚本代码(包含一个函数调用): JSON其实就是JavaScript中的一个对象,跟var obj={}在质上完全一样,只是在量上可以无限扩展.简单地讲,json其实就是JavaScript中的对象(Object)和数组(Array,其实也是对象)这倆好基友在那儿你嵌我我嵌你地套上n多层,以此模拟出许多复杂的数据结构. json易于人阅读和编写,也易于机器解析和生成,相对网络传输速率较高,功能型网站前后端往往要频繁大量交换数据,而json

Json和JsonP的区别

http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html Json和JsonP的区别,布布扣,bubuko.com

简单说一下 JSON和JSONP

JSON和JSONP,但从缩写看,可能会以为他们是很相似的两个名词,但他们除了缩写相似外,他们是两种类型的概念. 首先: JSON(JavaScript Object Notation)即JavaScript对象表示法,是一种轻量级的数据交换格式,注意:JSON是数据格式,也就是用来保存数据用的, JSONP(JSON with Padding) 是JSON的一种“使用模式”,可用于解决主流浏览器的跨域数据访问的问题,即是一种非官方跨域数据交互协议. 举例说明:我们拿最近比较火的谍战片来打个比方

JSON和JSONP,也许你会豁然开朗,含jQuery用例

前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决方案,比如数据可以用自定义字符串或者用XML来描述,跨域可以通过服务器端代理来解决. 但到目前为止最被推崇或者说首选的方案还是用JSON来传数据,靠JSONP来跨域.而这就是本文将要讲述的内容. JSON和JSONP虽然只有一个字母的差别,但其实他们根本不是一回事儿:JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域

JSON和JSONP的区别,以及使用方法

(一)场景 在拉京东城市选择的基础数据时候,遇到被服务器拒绝的情况,也就是ajax跨域问题 (二)json和jsonp 说的直白一点,在我们做ajax异步的一些功能的时候,一定会或多或少的遇到两个问题,(1.数据的交换.2.跨域问题) JSONP的最基本的原理是:动态添加一个<script>标签,而script标签的src属性是没有跨域的限制的.这样说来,这种跨域方式其实与ajax XmlHttpRequest协议无关了.我们在用其他关于src的标签的时候,都可以跨域.所以我们只要动态构造的s

说说JSON和JSONP,也许你会豁然开朗,含jQuery用例

另一篇不错的博文:原文链接. ========================================================================= 原文链接:http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.html#undefined 前言: 说到AJAX就会不可避免的面临两个问题,第一个是AJAX以何种格式来交换数据?第二个是跨域的需求如何解决?这两个问题目前都有不同的解决