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 相关文章推荐
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
jQuery幻灯片特效代码分享--鼠标滑过按钮时切换(2)
Nov 18 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
基于Bootstrap的UI扩展 StyleBootstrap
Jun 17 Javascript
bootstrap选项卡使用方法解析
Jan 11 Javascript
Angular2生命周期钩子函数的详细介绍
Jul 10 Javascript
vue短信验证性能优化如何写入localstorage中
Apr 25 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
微信小程序页面渲染实现方法
Nov 06 Javascript
前端开发基础javaScript的六大作用
Aug 06 Javascript
javascript解析json格式的数据方法详解
Aug 07 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实现MVC开发得最简单的方法――模型
2007/04/10 PHP
PHP统计目录中文件以及目录中目录大小的方法
2016/01/09 PHP
PHP中Notice错误常见解决方法
2017/04/28 PHP
PHP容器类的两种实现方式示例
2019/07/24 PHP
Laravel + Elasticsearch 实现中文搜索的方法
2020/02/02 PHP
javascript 文档的编码问题解决
2009/03/01 Javascript
jQeury淡入淡出需要注意的问题
2010/09/08 Javascript
JS date对象的减法处理实现代码
2010/12/28 Javascript
jQuery EasyUI API 中文文档 - Tree树使用介绍
2011/11/19 Javascript
用jquery实现点击栏目背景色改变
2012/12/10 Javascript
JavaScript阻止事件冒泡示例分享
2014/12/28 Javascript
JavaScript实现将数组中所有元素连接成一个字符串的方法
2015/04/06 Javascript
在浏览器中打开或关闭JavaScript的方法
2015/06/03 Javascript
js获取字符串字节数方法小结
2015/06/09 Javascript
jQuery超精致图片轮播幻灯片特效代码分享
2015/09/10 Javascript
基于JavaScript如何实现ajax调用后台定义的方法
2015/12/29 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
nodejs redis 发布订阅机制封装实现方法及实例代码
2016/12/15 NodeJs
浅谈angularjs依赖服务注入写法的注意点
2017/04/24 Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
2019/04/28 jQuery
nodejs中内置模块fs,path常见的用法说明
2020/11/07 NodeJs
[01:15:16]DOTA2-DPC中国联赛 正赛 Elephant vs Aster BO3 第一场 1月26日
2021/03/11 DOTA
Python开发WebService系列教程之REST,web.py,eurasia,Django
2014/06/30 Python
简单的连接MySQL与Python的Bottle框架的方法
2015/04/30 Python
使用Python生成url短链接的方法
2015/05/04 Python
Windows下使Python2.x版本的解释器与3.x共存的方法
2015/10/25 Python
Python3 翻转二叉树的实现
2019/09/30 Python
CSS3教程:新增加的结构伪类
2009/04/02 HTML / CSS
澳大利亚小众服装品牌:Maurie & Eve
2018/03/27 全球购物
建筑文秘专业个人求职信范文
2013/12/28 职场文书
文员岗位职责范本
2014/03/08 职场文书
工程采购员岗位职责
2014/03/09 职场文书
医院领导班子四风对照检查材料
2014/09/27 职场文书
教师“一帮一”结对子活动总结
2015/05/07 职场文书
工作简报范文
2015/07/21 职场文书
Axios取消重复请求的方法实例详解
2021/06/15 Javascript