浅谈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 unicode 编码解析关于数据转换为中文的两种方法
Apr 21 Javascript
javascript的创建多行字符串的7种方法
Apr 29 Javascript
实例详解jQuery Mockjax 插件模拟 Ajax 请求
Jan 12 Javascript
BootStrap下拉框在firefox浏览器界面不友好的解决方案
Aug 18 Javascript
input 禁止输入特殊字符的四种实现方式
Aug 24 Javascript
NODE.JS跨域问题的完美解决方案
Oct 20 Javascript
js自定义瀑布流布局插件
May 16 Javascript
彻底解决 webpack 打包文件体积过大问题
Jul 07 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 Javascript
js设置鼠标悬停改变背景色实现详解
Jun 26 Javascript
微信小程序 SOTER 生物认证DEMO 指纹识别功能
Dec 13 Javascript
小程序使用分包的示例代码
Mar 23 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的Socket网络编程入门指引
2015/08/11 PHP
基于PHP如何把汉字转化为拼音
2015/12/11 PHP
php编译安装php-amq扩展简明教程
2016/06/25 PHP
JavaScript 嵌套函数指向this对象错误的解决方法
2010/03/15 Javascript
js和jquery设置disabled属性为true使按钮失效
2014/08/07 Javascript
Jquery通过JSON字符串创建JSON对象
2014/08/24 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
浅谈NodeJS中require路径问题
2015/05/07 NodeJs
jquery validate.js表单验证入门实例(附源码)
2015/11/10 Javascript
AngularJS入门教程之AngularJS表达式
2016/04/18 Javascript
为jQuery-easyui的tab组件添加右键菜单功能的简单实例
2016/10/10 Javascript
解析微信JS-SDK配置授权,实现分享接口
2016/12/09 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
bootstrap table分页模板和获取表中的ID方法
2017/01/10 Javascript
前端构建工具之gulp的配置与搭建详解
2017/06/12 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
2017/09/26 Javascript
基于jQuery解决ios10以上版本缩放问题
2017/11/03 jQuery
json_decode 索引为数字时自动排序问题解决方法
2020/03/28 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
Python中的CURL PycURL使用例子
2014/06/01 Python
深入学习Python中的装饰器使用
2016/06/20 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
python3.7 利用函数os pandas利用excel对文件名进行归类
2019/09/29 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Python手动或自动协程操作方法解析
2020/06/22 Python
设计毕业生简历中的自我评价
2013/10/01 职场文书
致跳远运动员广播稿
2014/02/11 职场文书
劲霸男装广告词
2014/03/21 职场文书
党的生日活动方案
2014/08/15 职场文书
校长创先争优承诺书
2014/08/30 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
个人工作保证书
2015/02/28 职场文书
CSS极坐标的实例代码
2021/06/03 HTML / CSS
python3中apply函数和lambda函数的使用详解
2022/02/28 Python
python实现会员信息管理系统(List)
2022/03/18 Python