AngularJS实现的JSONP跨域访问数据传输功能详解


Posted in Javascript onJuly 20, 2017

本文实例讲述了AngularJS实现的JSONP跨域访问数据传输功能。分享给大家供大家参考,具体如下:

大家会自然想到只有一个字母之差的JSON吧~

JSON(JavaScript Object Notation)JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不是一回事儿

JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议。我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的“暗号”,而JSONP则是把用暗号书写的情报传递给自己同志时使用的接头方式。看到没?一个是描述信息的格式,一个是信息传递双方约定的方法。

浏览器是存在同源策略这个机制的,在全局层面禁止了页面加载或执行与自身来源不同的域的任何脚本。

JSONP是一种可以绕过浏览器的安全限制,从不同的域请求数据的方法。

Web页面上调用js文件时则不受是否跨域的影响(不仅如此,我们还发现凡是拥有”src”这个属性的标签都拥有跨域的能力,比如<script>、<img>、<iframe>);

如果想通过纯web端(ActiveX控件、服务端代理、属于未来的HTML5之Websocket等方式不算)跨域访问数据就只有一种可能,那就是在远程服务器上设法把数据装进js格式的文件里,供客户端调用和进一步处理;JSON的纯字符数据格式可以简洁的描述复杂数据,被js原生支持,所以在web客户端通过与调用脚本一模一样的方式,来调用跨域服务器上动态生成的js格式文件(一般以JSON为后缀),显而易见,服务器之所以要动态生成JSON文件,目的就在于把客户端需要的数据装入进去。为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。

JSONP的原理是通过<script>标签发起一个GET请求来取代XHR请求。JSONP生成一个<script>标签并插到DOM中,然后浏览器会接管并向src属性所指向的地址发送请求。

当服务器返回请求时,响应结果会被包装成一个JavaScript函数,并由该请求所对应的回调函数调用。

AngularJS在http服务中提供了一个JSONP辅助函数。通过http服务中提供了一个JSONP辅助函数。通过http服务的jsonp方法可以发送请求,如下所示:

$http .jsonp("https://api.github.com?callback=JSON_CALLBACK") .success(function(data) {
 // 数据
});

当请求被发送时,AngularJS会在DOM中生成一个如下所示的<script>标签:

<script src="https://api.github.com?callback=angular.callbacks._0" type="text/javascript"></script>

注意,JSON_CALLBACK被替换成了一个特地为此请求生成的自定义函数。当支持JSOPN的服务器返回数据时,数据会被包装在由AngularJS生成的具名函数angular.callbacks._0中在这个例子中,GitHub服务器会返回包含在回调函数中的JSON数据,响应看起来如下所示: 

// 简写
angular.callbacks._0({
  'meta': {
   'X-RateLimit-Limit': '60',
   'status': 200
  },
  'data': {
   'current_user_url': 'https://api.github.com/user'
  }
})

当AngularJS调用指定的回调函数时会对$http的promise对象进行resolve。当我们自己开发支持JSONP的后端服务时,要确保响应的数据被包含在请求所指定的回调函数中。使用JSONP需要意识到潜在的安全风险。首先,服务器会完全开放,允许后端服务调用应用中的任何JavaScript。不受我们控制的外部站点(或者蓄意攻击者)可以随时更改脚本,使我们的整个站点变得脆弱。服务器或中间人有可能会将额外的JavaScript逻辑返回给页面,从而将用户的隐私数据暴露出来。由于请求是由<script>标签发送的,所以只能通过JSONP发送GET请求。并且脚本的异常也很难处理。使用JSONP一定要谨慎,同时只跟信任并可以控制的服务器进行通信。

一句话就是利用script标签绕过同源策略,获得一个类似这样的数据,jsonpcallback是页面存在的回调方法,参数就是想得到的json。

Jquery中jsonp的使用

myUrl = "http://localhost:8090/api/test";
$.ajax({
 type:"GET",
 url:myUrl,
 dataType:"jsonp",
 jsonp:"callback",
 jsonpCallback:"jsonpCallback",
 success:function(data){
  alert(data.msg);
 }
});
function jsonpCallback(data){
 alert(data);
}

1.jsonp只能使用get请求,解决同源问题,返回javascript代码,因为请求javascript文件是没有同源问题的。
2.当请求数据类型为jsonp时,会将callback=jsonpCallback加在url上,http://localhost:8090/api/testcallback=jsonpCallback
3.前台javascript中定义jsonpCallback函数,此函数必须定义在window下,也就是全局的函数,否则找不到。
4.后台获取请求的callback参数值jsonpCallback,返回字符串"jsonpCallback(result)",result为返回结果。
5.请求返回的是script tag,首先会调用jsonpCallback函数,不管是否找到该函数,都会调用success函数。
6.如果没有定义jsonp和jsonpCallback,jsonp默认为"callback",jsonpCallback会是Jquery自动生成的函数名。

angularJS中jsonp的使用

myUrl = "http://localhost:8090/api/test?callback=JSON_CALLBACK";
$http.jsonp(myUrl).success(
 function(data){
  alert(data);
 }
);

1.angularJS中使用$http.jsonp函数
2.指定callback和回调函数名,函数名为JSON_CALLBACK时,会调用success回调函数,JSON_CALLBACK必须全为大写。
3.也可以指定其它回调函数,但必须是定义在window下的全局函数。
4.url中必须加上callback
5.当callback为JSON_CALLBACK时,只会调用success,即使window中有JSON_CALLBACK函数,也不会调用该函数。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
Jquery实现自定义窗口随意的拖拽
Mar 12 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
js实现Select列表内容自动滚动效果代码
Aug 20 Javascript
js编写一个简单的产品放大效果代码
Jun 27 Javascript
在JS中a标签加入单击事件屏蔽href跳转页面
Dec 16 Javascript
基于bootstrap的文件上传控件bootstrap fileinput
Dec 23 Javascript
原生js实现水平方向无缝滚动
Jan 10 Javascript
js实现图片360度旋转
Jan 22 Javascript
Bootstrap一款超好用的前端框架
Sep 25 Javascript
webstorm中vue语法的支持详解
May 09 Javascript
vscode中vue-cli项目es-lint的配置方法
Jul 30 Javascript
深入探究node之Transform
Jul 20 #Javascript
微信小程序“摇一摇”的实例代码
Jul 20 #Javascript
基于JavaScript实现微信抢红包功能
Jul 20 #Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 #Javascript
基于jQuery实现手风琴菜单、层级菜单、置顶菜单、无缝滚动效果
Jul 20 #jQuery
详解Angular CLI + Electron 开发环境搭建
Jul 20 #Javascript
JavaScript 基础表单验证示例(纯Js实现)
Jul 20 #Javascript
You might like
新手学习PHP的一些基础知识分享
2011/07/27 PHP
解析coreseek for sphinx的使用
2013/06/21 PHP
ThinkPHP整合datatables实现服务端分页的示例代码
2018/02/10 PHP
javascript replace方法与正则表达式
2008/02/19 Javascript
javascript在事件监听方面的兼容性小结
2010/04/07 Javascript
Dom 是什么的详细说明
2010/10/25 Javascript
Yii-自定义删除确认弹框(zyd)jquery实现代码
2013/03/04 Javascript
jquery 检测元素是否存在的实例代码
2013/11/19 Javascript
nodejs实现HTTPS发起POST请求
2015/04/23 NodeJs
Javascript中的几种继承方式对比分析
2016/03/22 Javascript
AngularJS实用开发技巧(推荐)
2016/07/13 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
2017/11/01 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
vue组件中watch props根据v-if动态判断并挂载DOM的问题
2019/05/12 Javascript
使用JQuery自动完成插件Auto Complete详解
2019/06/18 jQuery
详解Vue2.5+迁移至Typescript指南
2019/08/01 Javascript
JS实现transform实现扇子效果
2020/01/17 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
Python中的rfind()方法使用详解
2015/05/19 Python
Django中使用group_by的方法
2015/05/26 Python
Python实现统计单词出现的个数
2015/05/28 Python
详解python函数传参是传值还是传引用
2018/01/16 Python
python 修改本地网络配置的方法
2019/08/14 Python
python:目标检测模型预测准确度计算方式(基于IoU)
2020/01/18 Python
python3让print输出不换行的方法
2020/08/24 Python
解决Python安装cryptography报错问题
2020/09/03 Python
Python基于execjs运行js过程解析
2020/11/27 Python
乌克兰设计师和品牌的服装:Love&Live
2020/04/14 全球购物
测量实习生自我鉴定
2013/09/19 职场文书
优秀家长事迹材料
2014/05/17 职场文书
授权委托书
2015/01/28 职场文书
2015年社区文体活动总结
2015/03/25 职场文书
人民检察院起诉书
2015/05/20 职场文书
董事长开业致辞
2015/07/29 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android