AngularJS中的JSONP实例解析


Posted in Javascript onDecember 01, 2016

概念

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

AngularJS中的JSONP实例解析

(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,使站点变得脆弱的同时,还可能暴露用户隐私

  文章参考

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
用js计算页面执行时间的函数
Dec 07 Javascript
Javascript中eval函数的使用方法与示例
Apr 09 Javascript
javascript获得服务器端控件的ID的实现代码
Dec 28 Javascript
js 鼠标移动显示图片的简单实例
Dec 25 Javascript
JQuery创建DOM节点的方法
Jun 11 Javascript
基于jQuery插件实现点击小图显示大图效果
May 11 Javascript
easyui combobox开启搜索自动完成功能的实例代码
Nov 08 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
移动前端图片压缩上传的实例
Dec 06 Javascript
create-react-app修改为多页面支持的方法
May 17 Javascript
微信小程序使用for循环动态渲染页面操作示例
Dec 25 Javascript
react组件从搭建脚手架到在npm发布的步骤实现
Jan 09 Javascript
JavaScript交换两个变量值的七种解决方案
Dec 01 #Javascript
bootstrap学习使用(导航条、下拉菜单、轮播、栅格布局等)
Dec 01 #Javascript
实例解析jQuery工具函数
Dec 01 #Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 #Javascript
获取jqGrid中选择的行的数据
Nov 30 #Javascript
基于Vue.js实现简单搜索框
Mar 26 #Javascript
深入理解jQuery.data() 的实现方式
Nov 30 #Javascript
You might like
PHP 采集获取指定网址的内容
2010/01/05 PHP
ThinkPHP整合百度Ueditor图文教程
2014/10/21 PHP
PHP处理postfix邮件内容的方法
2015/06/16 PHP
jQuery验证元素是否为空的两种常用方法
2015/03/17 Javascript
小白谈谈对JS原型链的理解
2016/05/03 Javascript
JS只能输入正整数的简单实例
2016/10/07 Javascript
JS实现复选框的全选和批量删除功能
2017/04/05 Javascript
Vue-router路由判断页面未登录跳转到登录页面的实例
2017/10/26 Javascript
vue仿淘宝订单状态的tab切换效果
2020/06/23 Javascript
JS文件中加载jquery.js的实例代码
2018/05/05 jQuery
ES6之模版字符串的具体使用
2018/05/17 Javascript
vue-cli 构建骨架屏的方法示例
2018/11/08 Javascript
微信小程序登录按钮遮罩浮层效果的实现方法
2018/12/16 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
怎样在vue项目下添加ESLint的方法
2019/05/16 Javascript
Vue文本模糊匹配功能如何实现
2020/07/30 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
Python装饰器使用实例:验证参数合法性
2015/06/24 Python
python获取多线程及子线程的返回值
2017/11/15 Python
python中for用来遍历range函数的方法
2018/06/08 Python
python验证身份证信息实例代码
2019/05/06 Python
python加密解密库cryptography使用openSSL生成的密匙加密解密
2020/02/11 Python
Matplotlib使用字符串代替变量绘制散点图的方法
2020/02/17 Python
完美解决keras 读取多个hdf5文件进行训练的问题
2020/07/01 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
三只松鼠官方旗舰店:全网坚果销售第1
2017/11/25 全球购物
澳大利亚领先的时尚内衣零售商:Bras N Things
2020/07/28 全球购物
促销活动策划方案
2014/01/12 职场文书
体育口号大全
2014/06/18 职场文书
个人授权委托书样本
2014/09/13 职场文书
2014小学生国庆65周年演讲稿
2014/09/21 职场文书
安全教育培训制度
2015/08/06 职场文书
创业计划书之韩国烧烤店
2019/09/19 职场文书