AngularJS中的JSONP实例解析

概念

首先呢，Json和JSONP是不一样的哦。Json呢，是众多数据存储的其中一种格式，是数据书写方式的其中一种。好比是大中华众多诗体的一种(比如说是七言诗吧)。这种诗体规定了: 这种诗体要包含题目，每行诗句的字数(7个字) 等等的文本格式。而Json所规定的文本格式是这样子的

(Json格式示意图)

　  而JSONP呢，它是一种特殊的通讯方式，使用它能够轻松绕过浏览器的同源安全限制，达到加载来自不同源的资源(脚本, 图片, 其他)的效果。比如说，您是一个王国的王子，你意外地喜欢上了附近一个小城镇里面的一位漂亮年轻的姑娘(资源)，你想和她见面并进一步往下发展(获取资源)。但是呢，您的父亲国王先生(浏览器)可不同意，国王认为这个姑娘不是王室的女孩(非同源的资源)，配不上王子，把王子困在城堡里面的同时，还往城堡外放好多士兵监察，禁止外人进入(浏览器的同源安全限制)。但是王子对爱非常坚持，他试过多种方式与这个姑娘联系，比如说让太监欧巴带封信给漂亮姑娘(PUT,GET,POST等等)，但是呢，每当到达城门的时候，士兵就会发现这封信的地址是给小姑娘的，于是屡屡禁止了太监出去(获取外部资源时，PUT,GET,POST不奏效)。于是王子想到了一种特殊的通讯方式，就是飞鸽传书(JSONP)，小鸽子呢能够飞跃城堡，从而避开士兵的监察(绕过浏览器的同源安全限制)，来达到与姑娘通讯的效果(与跨域资源共享CORS的通讯实现啦!O(∩_∩)O)。最终，经过九九八十一难之后，王子喜欢上了太监(∑(っ °Д °;)っ 人生处处充满惊喜...)

具体的实现方法

要达到这种通讯效果，王子(发送请求的方式)和姑娘(服务端)都要有所准备。

　王子在发送JSONP请求的时候，首先需要一只鸽子吧(使用Jsonp), 再来呢，需要一封信绑在鸽子上(地址栏中的callback参数)

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

　　当姑娘接到小鸽子带来的信之后呢，也要把内容写在小鸽子身上的信，来回信(通过callback参数，把响应内容包装成一个JavaScript参数，并由该请求对应的回调函数来进行调用)

　　包装数据的方法

res.send(【callback函数】+ '('+ JSON.stringify(result) + ')');

　其他细节

使用JSONP的时候，AngularJS会生成一个 <script> 标签并插入到DOM中进行请求，响应成功之后会把该节点删除(删除节点这点具体Angular版本不同可能会有所不同吧)

　　其中,CALLBACK会被替换成一个特地为此请求生成的自定义函数，即是由

$http.jsonp("https://api.github.com?callback=CALLBACK")...) 变成

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

因此当我们自己开发JSONP的后端服务时，要确保响应数据被包含在请求指定的回调函数中

　注意事项

使用JSOPN有潜在的安全隐患，因为JSONP允许后端服务调用应用的JavaScript，使站点变得脆弱的同时，还可能暴露用户隐私

　 文章参考

《AngularJS权威教程》

以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持我们！

赞 (0)

相关推荐

  • AngularJs解决跨域问题案例详解(简单方法)

    AngularJs解决跨域问题案例详解(简单方法)

    首先我们做点准备说明,不然你明白我说的是啥意思别人不明白,就算别人明白了那总有人不明白,那你要说了,我的意思是这个说明必须要做了,答案是必须的,为了更好的方便大家理解嘛. 我们以两个主域名或者一个主域名+一个二级域名为例,均可演示跨域问题. 客户端 a.com 服务端 b.com或者s.a.com angularJs版本 V1.2.25 准备工作做得很充分嘛,就差把我们的编辑器是subline暴露出来了,这个一般人我是不告诉他滴. 有人嚷嚷了,这问题老早就有了,你现在提出来有啥意义呢?难不成你还

  • AngularJS iframe跨域打开内容时报错误的解决办法

    <iframe id="myFrame" ng-src="{{url}}" width="100%" height="100%" seamless frameborder="0" ></iframe> 打开不同域的内容时报下面的错误: Blocked loading resource from url not allowed by $sceDelegate policy 解决方案:

  • angular.js中解决跨域问题的三种方式

    前言 开始本文之前,大家应该首先了解,协议.主机名和端口号相同叫同源.同源策略允许页面从同一个站点加载和执行特定的脚本.站外其他来源的脚本同页面的交互则被严格限制. 要解决这个问题就需要跨域,本文介绍解决angular中的跨域的三种方式: 一.JSONP JSONP的原理是通过 <script> 标签发起一个GET请求来取代XHR请求.JSONP生成一个<script> 标签并插到DOM中,然后浏览器会接管并向 src 属性所指向的地址发送请求.当服务器返回请求时, 响应结果会被包

  • 详解AngularJS如何实现跨域请求

    跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); $http.get(ur

  • Angular实现跨域(搜索框的下拉列表)

    angular.js 自带jsonp,实现跨域,下面来实现搜索框的下拉列表,使用百度和360分别尝试一下 百度:url截取之后红色部分需替换 :https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=数据&cb=JSON_CALLBACK 360:https://sug.so.360.cn/suggest?callback=JSON_CALLBACK&word=数据 注意:需要在服务器环境下运行 思路: 1 .声明 angular 2

  • 解析AngularJS中get请求URL出现的跨域问题

    解析AngularJS中get请求URL出现的跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="../js/jquery-1.11.0.js"

  • 使用AngularJS 跨站请求如何解决jsonp请求问题

    使用AngularJS 跨站请求如何解决jsonp请求问题

    今天写东西的时候遇到了 一种情况 ,因为用的不是自己公司人员写的接口 ,而我要写的东西是抓别的网页上的接口 所以出现了 一下这种情况 用 get请求出现拦截跨站请求资源  以下是解决办法, 这是我的请求: 我在浏览器模板赋值的时候发现赋值没有成功, 在浏览器控制台打印出来的如下: 大概的意思是没有请求头,然后在网上看了一些, 楼主英语不好 我也解释不清楚 ,所以读客有时候不要较真!!! 毕竟能解决问题就是可以的. 解决这个bug的办法  , url 后面要拼接要加上 callback=JSON_

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

    本文实例讲述了AngularJS实现的JSONP跨域访问数据传输功能.分享给大家供大家参考,具体如下: 大家会自然想到只有一个字母之差的JSON吧~ JSON(JavaScript Object Notation)和JSONP(JSON with Padding)虽然只有一个字母的差别,但其实他们根本不是一回事儿 JSON是一种数据交换格式,而JSONP是一种依靠开发人员的聪明才智创造出的一种非官方跨域数据交互协议.我们拿最近比较火的谍战片来打个比方,JSON是地下党们用来书写和交换情报的"暗号

  • 详解基于angular-cli配置代理解决跨域请求问题

    详解基于angular-cli配置代理解决跨域请求问题

    1.跨域请求产生 随着不同终端(Pad/Mobile/PC)的兴起,对开发人员的要求越来越高,纯浏览器端的响应式已经不能满足用户体验的高要求,我们往往需要针对不同的终端开发定制的版本.为了提升开发效率,前后端分离的需求越来越被重视,后端负责业务/数据接口,前端负责展现/交互逻辑,同一份数据接口,我们可以定制开发多个版本. 而前后端分离带来的一个问题就是前端web部署的服务器和后端提供服务的服务器大概率不在同一个域名下,进而会产生跨域问题. 2.通用解决方案 如果浏览器支持HTML5,那么就可以一

  • AngularJS中的JSONP实例解析

    AngularJS中的JSONP实例解析

    概念 首先呢,Json和JSONP是不一样的哦.Json呢,是众多数据存储的其中一种格式,是数据书写方式的其中一种.好比是大中华众多诗体的一种(比如说是七言诗吧).这种诗体规定了: 这种诗体要包含题目,每行诗句的字数(7个字) 等等的文本格式.而Json所规定的文本格式是这样子的 (Json格式示意图)   而JSONP呢,它是一种特殊的通讯方式,使用它能够轻松绕过浏览器的同源安全限制,达到加载来自不同源的资源(脚本, 图片, 其他)的效果.比如说,您是一个王国的王子,你意外地喜欢上了附近一个小

  • AngularJS中的指令全面解析(必看)

    AngularJS中的指令全面解析(必看)

    说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJS这个框架的指令系统,本人也是初学,查阅了一些资料,要是有一些说的不好的地方,万望指出. 指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.那么一个AngularJS指令在HTML代码

  • Angularjs中数据绑定的实例详解

    Angularjs中数据绑定的实例详解 这是一个最简单的angularjs的例子,关于数据绑定的,大家可以执行一下,看看效果 <html ng-app> <head> <title>angularjs-include</title> <script type="text/javascript" src="js/angular/angular.min.js"></script> </head

  • jQuery的时间datetime控件在AngularJs中的使用实例(分享)

    百度一下,自己也想了一下,有一种简单,无脑的方式分享给你: <input ng-model="start" id="start" placeholder="开始日期" style="width:156px;" class="form-control date-picker" data-date-format="yyyy-mm-dd" type="text">

  • Python中property属性实例解析

    本文主要讲述的是对Python中property属性(特性)的理解,具体如下. 定义及作用: 在property类中,有三个成员方法和三个装饰器函数. 三个成员方法分别是:fget.fset.fdel,它们分别用来管理属性访问: 三个装饰器函数分别是:getter.setter.deleter,它们分别用来把三个同名的类方法装饰成property. fget方法用来管理类实例属性的获取,fset方法用来管理类实例属性的赋值,fdel方法用来管理类实例属性的删除: getter装饰器把一个自定义类

  • Java中后台线程实例解析

    本文研究的主要是Java中后台线程的相关问题,具体介绍如下. 以前从来没有听说过,java中有后台线程这种东西.一般来说,JVM(JAVA虚拟机)中一般会包括俩种线程,分别是用户线程和后台线程.所谓后台线程(daemon)线程指的是:在程序运行的时候在后台提供的一种通用的服务的线程,并且这种线程并不属于程序中不可或缺的部分.因此,当所有的非后台线程结束的时候,也就是用户线程都结束的时候,程序也就终止了.同时,会杀死进程中的所有的后台线程.反过来说,只要有任何非后台线程还在运行,程序就不会结束.不

  • C语言中结构体实例解析

    C语言中结构体实例解析

    目录 一.结构体定义 二.实例演示 结构体作为函数参数 结构体指针 三.typedef struct 和 struct的区别 1.声明不同 2.访问成员变量不同 3.重新定义不同 总结 一.结构体定义 C语言结构体由一系列相同或者不同类型的数据构成的集合,结构体类型就是以struct关键字定义的数据类型. 结构体的格式如下: struct 结构名称 { 结构体所包含的数据成员,包括变量数组等 } 结构变量 ;//结构变量可以指定一个或多个 举例: struct Student { char na

  • AngularJS中ng-class用法实例分析

    本文实例讲述了AngularJS中ng-class用法.分享给大家供大家参考,具体如下: 使用 ng-class 动态设置元素的类,方法是绑定一个代表所有需要添加的类的表达式.重复的类不会添加.当表达式发生变化,先前添加的类会被移除,新类会被添加. 在angular中为我们提供了3种方案: ① 通过数据的双向绑定(不推荐使用) ② 通过对象数组. ③ 通过key/value 一.通过数据双向绑定: function changeClass(){ $scope.className = "chang

  • AngularJS中的作用域实例分析

    本文实例讲述了AngularJS中的作用域.分享给大家供大家参考,具体如下: 问题引入 使用 Angular 进行过一段时间的开发后,基本上都会遇到一个这样的坑: <div ng-controller="TestCtrl"> <p>{{name}}</p> <div ng-if="show"> <input type="text" ng-model="name"> &

  • WinForm项目开发中NPOI用法实例解析

    本文实例展示了WinForm项目开发中NPOI用法,对于C#初学者有一定的借鉴价值.具体实例如下: private void ExportMergeExcel() { if (File.Exists(templateXlsPath)) { int i = 4, _recordNo = 1; using (FileStream file = new FileStream(templateXlsPath, FileMode.Open, FileAccess.Read)) { HSSFWorkbook

随机推荐