浅谈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 相关文章推荐
javascript,jquery闭包概念分析
Jun 19 Javascript
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
Js 正则表达式知识汇总
Dec 02 Javascript
javascript自动生成包含数字与字符的随机字符串
Feb 09 Javascript
javascript计时器详解
Feb 28 Javascript
JavaScript实现同一页面内两个表单互相传值的方法
Aug 12 Javascript
jQuery中cookie插件用法实例分析
Dec 04 Javascript
深入浅析Extjs中store分组功能的使用方法
Apr 20 Javascript
基于Vue的移动端图片裁剪组件功能
Nov 28 Javascript
基于vue cli重构多页面脚手架过程详解
Jan 23 Javascript
JS中创建自定义类型的常用模式总结【工厂模式,构造函数模式,原型模式,动态原型模式等】
Jan 19 Javascript
HTML+JS实现“代码雨”效果源码(黑客帝国文字下落效果)
Mar 17 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 文件上传代码(限制jpg文件)
2010/01/05 PHP
php下将图片以二进制存入mysql数据库中并显示的实现代码
2010/05/27 PHP
php自动加载autoload机制示例分享
2014/02/20 PHP
PHP中字符安全过滤函数使用小结
2015/02/25 PHP
thinkPHP中验证码的简单实现方法
2016/12/05 PHP
JavaScipt基本教程之JavaScript语言的基础
2008/01/16 Javascript
Jquery 获取表单text,areatext,radio,checkbox,select值的代码
2009/11/12 Javascript
js保存当前路径(cookies记录)
2010/12/14 Javascript
获取offsetTop和offsetLeft值的js代码(兼容)
2013/04/16 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
Mac地址验证的javascript代码
2013/11/09 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
浅谈javascript回调函数
2014/12/07 Javascript
JS通过Cookie判断页面是否为首次打开
2016/02/05 Javascript
jQuery获取file控件中图片的宽高与大小
2016/08/04 Javascript
PHP获取当前页面完整URL的方法
2016/12/02 Javascript
xmlplus组件设计系列之图标(ICON)(1)
2017/05/05 Javascript
jQuery发请求传输中文参数乱码问题的解决方案
2018/05/22 jQuery
vue实现跨域的方法分析
2019/05/21 Javascript
Vue打包部署到Nginx时,css样式不生效的解决方式
2020/08/03 Javascript
js实现限定范围拖拽的示例
2020/10/26 Javascript
python中for用来遍历range函数的方法
2018/06/08 Python
NumPy.npy与pandas DataFrame的实例讲解
2018/07/09 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
工程部主管岗位职责
2013/11/17 职场文书
初中生期末评语大全
2014/04/24 职场文书
危爆物品安全大检查大整治工作方案
2014/05/03 职场文书
设计师求职信模板
2014/05/06 职场文书
导师就业推荐信范文
2014/05/22 职场文书
2014年司法所工作总结
2014/11/22 职场文书
开学第一周值周总结
2015/07/16 职场文书
新闻简讯格式及范文
2015/07/22 职场文书
导游词之南京莫愁湖公园
2019/11/13 职场文书
Redis实现短信验证码登录的示例代码
2022/06/14 Redis