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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
javascript中创建对象的三种常用方法
Dec 30 Javascript
JavaScript中为元素加上name属性的方法
May 09 Javascript
开发插件的两个方法jquery.fn.extend与jquery.extend
Nov 21 Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 Javascript
node.js中的path.join方法使用说明
Dec 08 Javascript
再谈javascript常见错误及解决方法
Sep 16 Javascript
正则验证小数点后面只能有两位数的方法
Feb 28 Javascript
three.js实现3D影院的原理的代码分析
Dec 18 Javascript
Node.js使用Koa搭建 基础项目
Jan 08 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
js实现头像上传并且可预览提交
Dec 25 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
类的另类用法--数据的封装
2006/10/09 PHP
实现PHP+Mysql无限分类的方法汇总
2015/03/02 PHP
PHP实现HTTP断点续传的方法
2015/06/17 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
PHP序列化操作方法分析
2016/09/28 PHP
ThinkPHP 整合Bootstrap Ajax分页样式
2016/12/23 PHP
php中的异常和错误浅析
2017/05/03 PHP
PHP将数据导出Excel表中的实例(投机型)
2017/07/31 PHP
javascript实现多栏闭合展开式广告位菜单效果实例
2015/08/05 Javascript
jQuery插件开发汇总
2016/05/15 Javascript
简单谈谈ES6的六个小特性
2016/11/18 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
js实现无缝滚动图
2017/02/22 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
2017/11/19 Javascript
浅谈react-router HashRouter和BrowserRouter的使用
2017/12/29 Javascript
微信小程序 点击切换样式scroll-view实现代码实例
2019/10/11 Javascript
Vue数字输入框组件的使用方法
2019/10/19 Javascript
微信小程序动态设置图片大小的方法
2019/11/21 Javascript
Node.js操作MongoDB数据库实例分析
2020/01/19 Javascript
Python中的字典遍历备忘
2015/01/17 Python
在Python中使用判断语句和循环的教程
2015/04/25 Python
Python脚本实现自动发带图的微博
2016/04/27 Python
python中将函数赋值给变量时需要注意的一些问题
2017/08/18 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
Win8下python3.5.1安装教程
2020/07/29 Python
Python django框架应用中实现获取访问者ip地址示例
2019/05/17 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
医务工作者先进事迹材料
2014/01/26 职场文书
机关节能减排实施方案
2014/03/17 职场文书
大学英语演讲稿范文
2014/04/24 职场文书
2015年家长学校工作总结
2015/04/22 职场文书
2015年中学校长工作总结
2015/05/19 职场文书
2015年迎新晚会策划书
2015/07/16 职场文书