浅谈JSON和JSONP区别及jQuery的ajax jsonp的使用


Posted in Javascript onNovember 23, 2014

JSON和JSONP
 

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,用于在浏览器和服务器之间交换信息。
 

JSONP(JSON With Padding),就是打包在函数调用中的的JSON(或者包裹的JSON)。
 

JSON是一种数据格式,JSONP是一种数据调用方式。
 

 //JSON

 {

 “name”: “sb”

 }
 //JSONP

 callback({

 “name”: “sb”

 })

出于安全考虑,脚本(AJAX)不能访问非本域的内容。但是,静态资源是不受域策略限制的,可以加载任意域的脚本、样式、图片等静态资源,JSOP就是利用这种原理来实现跨域获取数据的。
 
例1:

 //定义shoPrice函数

 function showPrice(data) {

     alert("Symbol: " + data.symbol + ", Price: " + data.price);

 }
 //在Web页面中包含showPrice函数和参数

 <script type="text/javascript">

 function showPrice(data) {

     alert("Symbol: " + data.symbol + ", Price: " + data.price);

 }

 </script>

 <script type="text/javascript">showPrice({symbol: 'IBM', price: 91.42});</script>

本例展示了如何将静态JSON数据作为参数调用JavaScript函数。
 
 例2:
 

第一种的函数调用完全可以写在一个js文件中放在服务器上,用script标签加载到页面,而且这个标签可以动态地创建。
 

 <script type="text/javascript">

 // This is our function to be called with JSON data

 function showPrice(data) {

     alert("Symbol: " + data.symbol + ", Price: " + data.price);

 }

 

 var url = “remote.js”; // 外部脚本的URL

 // 动态插入脚本

 var script = document.createElement('script');

 script.setAttribute('src', url);

 

 // 加载script

 document.getElementsByTagName('head')[0].appendChild(script); 

 </script>

remote.js的内容和之前在标签里写的一样是:
 
 1 showPrice({symbol: 'IBM', price: 91.42});
 

动态插入的JavaScript代码,将要传递的JSON数据作为参数,showPrice函数调用语句的参数。
 

那么问题来了,每次获取到数据都调用showPrice函数吗?这就需要前后端程序猿做好约定,当然这样有很多不便,尤其是对于开放接口给公众开发的情况。JSOP这样处理:支持前端传递一个回调函数名参数,后端接收回调函数名参数,然后生成对该函数的调用,将JSON数据作为参数传递,在到达客户端时将其插入页面开始执行。
 
例3:
 

动态插入代码,带有callback参数:
 

  <script type="text/javascript">

  // This is our function to be called with JSON data

  function showPrice(data) {

      alert("Symbol: " + data.symbol + ", Price: " + data.price);

  }

 var url = “remote.js?callback='showPrice'”; // 外部脚本的URL

 // 动态插入脚本

 var script = document.createElement('script');

 script.setAttribute('src', url);

 // 加载script

 document.getElementsByTagName('head')[0].appendChild(script); 

  </script>

后端用PHP实现的JSONP服务的代码片段:
 

 $jsonData = getDataAsJson($_GET['symbol']);

 echo $_GET['callback'] . '(' . $jsonData . ');';

 // 打印: showPrice({"symbol" : "IBM", "price" : "91.42"});

很好的契合了JSONP的定义,打包在函数调用中的JSON数据。
 
以上几个例子来自:
 
使用 JSONP 实现跨域通信,第 1 部分: 结合 JSONP 和 jQuery 快速构建强大的 mashup
 
在jQuery中使用JSONP
 

AJAX和JSONP在jQuery中的调用方式看起来极为相像,千万不要被这种现象迷惑,它们本质上有很大不同。AJAX是通过XMLHttpRequest对象获取非页面内容,而JSONP是动态的添加<script>标签来调用服务器脚本。虽然jQuery把JSONP作为AJAX的一种形式进行了封装,但JSONP并不是AJAX的一种形式或一种特例。
 

 $.ajax({

     url: "http://query.yahooapis.com/v1/public/yql",

     jsonpCallback: "showPrice",

     jsonp: "callback",

     // tell jQuery we're expecting JSONP

     dataType: "jsonp",

     data: {

         q: "select title,abstract,url from search.news where query=\"cat\"",

         format: "json"

     },

     // work with the response

     success: function( data ) {

         console.log( data ); // server response

     }

 });

ajax请求参数说明:

dataType  String

预期服务器返回的数据类型。如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。在1.4中,JSON就会生成一个JavaScript对象,而script则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后,传递给回调函数。可用值:

"xml": 返回 XML 文档,可用 jQuery 处理。

"html": 返回纯文本 HTML 信息;包含的script标签会在插入dom时执行。

"script": 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了"cache"参数。'''注意:'''在远程请求时(不在同一个域下),所有POST请求都将转为GET请求。(因为将使用DOM的script标签来加载)

"json": 返回 JSON 数据 。

"jsonp": JSONP 格式。使用 JSONP 形式调用函数时,如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名,以执行回调函数。

"text": 返回纯文本字符串
 
jsonp,
 

重写jsonp请求中的回调函数的名称。至俄格值用来替代“callback=?”这种GET或POST请求URL参数里的“callback”部分,例如{jsonp:'onJsonPLoad'}会导致“onJsonPLoad”传递给服务器。
 
jsonpCallback,
 

为jsonp指定一个回调函数名。这个值将用来取代jQuery自动生成的随机函数名。这主要用来让jQuery生成度独特的函数名,这样管理请求更容易,也能方便地提供回调函数和错误处理。你也可以在想让浏览器缓存GET请求的时候,指定这个回调函数名。但是实际使用过程中,并不用写回调函数,比如此例中的showPrice,不写也不会报错,因为jQuery在处理JSONP的时候,自动帮你生成回调函数并且把数据取出来共success方法调用。可能像这样:

 function success_jsonpCallback(data) { success(data); } 

以上就是本文的全部内容了,大家是否对jsonp有了细致的了解了呢。有什么疑问也请给我留言,大家共同探讨。

Javascript 相关文章推荐
js loading加载效果实现代码
Nov 24 Javascript
jquery 图片截取工具jquery.imagecropper.js
Apr 09 Javascript
将string解析为json的几种方式小结
Nov 11 Javascript
在JavaScript中获取请求的URL参数[正则]
Dec 25 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
jQuery unbind 删除绑定事件详解
May 24 Javascript
js鼠标按键事件和键盘按键事件用法实例汇总
Oct 03 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 Javascript
Vue.js实现实例搜索应用功能详细代码
Aug 24 Javascript
JavaScript实现无限级递归树的示例代码
Mar 29 Javascript
JavaScript ES 模块的使用
Nov 12 Javascript
理解jQuery stop()方法
Nov 21 #Javascript
JS中三目运算符和if else的区别分析与示例
Nov 21 #Javascript
node.js使用npm 安装插件时提示install Error: ENOENT报错的解决方法
Nov 20 #Javascript
JS在可编辑的div中的光标位置插入内容的方法
Nov 20 #Javascript
js实现div弹出层的方法
Nov 20 #Javascript
JavaScript中的公有、私有、特权和静态成员用法分析
Nov 20 #Javascript
js实现二代身份证号码验证详解
Nov 20 #Javascript
You might like
PHP 转义使用详解
2013/07/15 PHP
使用php+swoole对client数据实时更新(一)
2016/01/07 PHP
用javascript连接access数据库的方法
2006/11/17 Javascript
js切换div css注意的细节
2012/12/10 Javascript
Javascript事件实例详解
2013/11/06 Javascript
js监听滚动条滚动事件使得某个标签内容始终位于同一位置
2014/01/24 Javascript
为开发者准备的10款最好的jQuery日历插件
2014/02/04 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
jquery用data方法获取某个元素上的事件
2014/06/23 Javascript
jquery代码实现多选、不同分享功能
2015/07/31 Javascript
JS+DIV+CSS排版布局实现美观的选项卡效果
2015/10/10 Javascript
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
jQuery使用$获取对象后检查该对象是否存在的实现方法
2016/09/04 Javascript
bootstrap为水平排列的表单和内联表单设置可选的图标
2017/02/15 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
原生JS实现的双色球功能示例
2018/02/02 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
扫微信小程序码实现网站登陆实现解析
2019/08/20 Javascript
layer弹出层取消遮罩的方法
2019/09/25 Javascript
JS错误处理与调试操作实例分析
2020/04/13 Javascript
vue中提示$index is not defined错误的解决方式
2020/09/02 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
[00:37]食人魔魔法师轮盘吉兆顺应全新至宝将拥有额外款式
2019/12/19 DOTA
windows环境下tensorflow安装过程详解
2018/03/30 Python
python 数据生成excel导出(xlwt,wlsxwrite)代码实例
2019/08/23 Python
通过celery异步处理一个查询任务的完整代码
2019/11/19 Python
python pycharm最新版本激活码(永久有效)附python安装教程
2020/09/18 Python
python支持多继承吗
2020/06/19 Python
Pycharm在指定目录下生成文件和删除文件的实现
2020/12/28 Python
python爬虫智能翻页批量下载文件的实例详解
2021/02/02 Python
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
五年后的职业生涯规划
2014/03/04 职场文书
党的群众路线教育实践活动个人整改方案
2014/09/21 职场文书
宝葫芦的秘密观后感
2015/06/11 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
Redis延迟队列和分布式延迟队列的简答实现
2021/05/13 Redis