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 arguments.callee的应用代码
May 07 Javascript
关于JavaScript的一些看法
May 27 Javascript
JavaScript 加号(+)运算符号
Dec 06 Javascript
jQuery操作checkbox选择(list/table)
Apr 07 Javascript
javascript中的绑定与解绑函数应用示例
Jun 24 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
Vue组件开发初探
Feb 14 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
js中位数不足自动补位扩展padLeft、padRight实现代码
Apr 06 Javascript
详谈Object.defineProperty 及实现数据双向绑定
Jul 18 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,不用COM,生成excel文件
2006/10/09 PHP
php获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
使用WAMP搭建PHP本地开发环境
2017/05/10 PHP
PHP实现将多个文件中的内容合并为新文件的方法示例
2017/06/10 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
Laravel 实现密码重置功能
2018/02/23 PHP
IE不出现Flash激活框的小发现的js实现方法
2007/09/07 Javascript
javascript jQuery $.post $.ajax用法
2008/07/09 Javascript
jquery form 隐藏的input 选择
2014/04/29 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
JavaScript设计模式之建造者模式介绍
2014/12/28 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
详解jQuery中的元素的属性和相关操作
2015/08/14 Javascript
js实现Select头像选择实时预览代码
2015/08/17 Javascript
谈谈JavaScript中浏览器兼容问题的写法小议
2016/12/17 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
详解vue2.0+vue-video-player实现hls播放全过程
2018/03/02 Javascript
vue双向数据绑定知识点总结
2018/04/18 Javascript
jQuery 查找元素操作实例小结
2019/10/02 jQuery
python3.x 将byte转成字符串的方法
2018/07/17 Python
python内存动态分配过程详解
2019/07/15 Python
Python lxml模块的基本使用方法分析
2019/12/21 Python
python shutil文件操作工具使用实例分析
2019/12/25 Python
python爬虫模拟浏览器访问-User-Agent过程解析
2019/12/28 Python
pytorch 图像预处理之减去均值,除以方差的实例
2020/01/02 Python
python实现简单颜色识别程序
2020/02/19 Python
html5在移动端的屏幕适应问题示例探讨
2014/06/15 HTML / CSS
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
amazeui页面校验功能的实现代码
2020/08/24 HTML / CSS
美国最好的葡萄酒网上商店:Wine Library
2019/11/02 全球购物
简单介绍Object类的功能、常用方法
2013/10/02 面试题
用Java语言将一个键盘输入的数字转化成中文输出
2013/01/25 面试题
用JAVA实现一种排序,JAVA类实现序列化的方法(二种)
2014/04/23 面试题
竞选副班长演讲稿
2014/04/24 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
Redis RDB技术底层原理详解
2021/09/04 Redis