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也可以通过服务器代理来解决跨域问题。

posted @ 2015-08-26 17:21  ZRainna  阅读(237)  评论(0)  编辑  收藏  举报