浅谈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 相关文章推荐
prototype1.4中文手册
Sep 22 Javascript
jQuery教程 $()包装函数来实现数组元素分页效果
Aug 13 Javascript
js动态修改整个页面样式达到换肤效果
May 23 Javascript
Javascript数组操作函数总结
Feb 05 Javascript
bootstrap css样式之表单
Jan 19 Javascript
jQuery实现Table表格隔行变色及高亮显示当前选择行效果示例
Feb 14 Javascript
angularjs实现分页和搜索功能
Jan 03 Javascript
详解vue 单页应用(spa)前端路由实现原理
Apr 04 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
JavaScript indexOf()原理及使用方法详解
Jul 09 Javascript
Vue用mixin合并重复代码的实现
Nov 27 Vue.js
理解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获取网站域名和地址的代码
2008/08/17 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
表单提交验证类
2006/07/14 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
2010/01/02 Javascript
初学js 新节点的创建 删除 的步骤
2011/07/04 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
Javascript中的默认参数详解
2014/10/22 Javascript
JavaScript函数详解
2015/02/27 Javascript
JavaScritp添加url参数并将参数加入到url中及更改url参数的方法
2015/10/26 Javascript
js下将金额数字每三位一逗号分隔
2016/02/19 Javascript
使用Javascript实现选择下拉菜单互移并排序
2016/02/23 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
微信小程序 数据交互与渲染实例详解
2017/01/21 Javascript
利用HBuilder打包前端开发webapp为apk的方法
2017/11/13 Javascript
基于Vue实现平滑过渡的拖拽排序功能
2019/06/12 Javascript
Vue全局使用less样式,组件使用全局样式文件中定义的变量操作
2020/10/21 Javascript
Python 字符串定义
2009/09/25 Python
浅谈flask源码之请求过程
2018/07/26 Python
python操作kafka实践的示例代码
2019/06/19 Python
python3.6中@property装饰器的使用方法示例
2019/08/17 Python
python内置模块collections知识点总结
2019/12/19 Python
Pycharm最新激活码2019(推荐)
2019/12/31 Python
Python常用库Numpy进行矩阵运算详解
2020/07/21 Python
Tensorflow使用Anaconda、pycharm安装记录
2020/07/29 Python
基于python requests selenium爬取excel vba过程解析
2020/08/12 Python
Python中Yield的基本用法
2020/10/18 Python
纯CSS3实现鼠标滑过按钮动画第二节
2020/07/16 HTML / CSS
美国殿堂级滑板、冲浪、滑雪服装品牌:Volcom(钻石)
2017/04/20 全球购物
为什么要优先使用同步代码块而不是同步方法?
2013/01/30 面试题
贷款担保申请书
2014/05/20 职场文书
小学教师师德师风演讲稿
2014/08/22 职场文书
高中国旗下的演讲稿
2014/08/28 职场文书
检讨书模板
2015/01/29 职场文书
2015中学教学工作总结
2015/07/22 职场文书
关于幸福的感言
2015/08/03 职场文书