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 相关文章推荐
使用jQuery向asp.net Mvc传递复杂json数据-ModelBinder篇
May 07 Javascript
Three.js源码阅读笔记(光照部分)
Dec 27 Javascript
利用js判断浏览器类型(是否为IE,Firefox,Opera浏览器)
Nov 22 Javascript
JavaScript实现给定时间相加天数的方法
Jan 25 Javascript
Bootstrap开发实战之第一次接触Bootstrap
Jun 02 Javascript
基于JS实现checkbox全选功能实例代码
Oct 31 Javascript
jQuery快速实现商品数量加减的方法
Feb 06 Javascript
JavaScript中双符号的运算详解
Mar 12 Javascript
基于JS递归函数细化认识及实用实例(推荐)
Aug 07 Javascript
jquery实现回车键触发事件(实例讲解)
Nov 21 jQuery
React Native 使用Fetch发送网络请求的示例代码
Dec 02 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 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
VFP与其他应用程序的集成
2006/10/09 PHP
PHP实现图片裁剪、添加水印效果代码
2014/10/01 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
laravel框架中表单请求类型和CSRF防护实例分析
2019/11/23 PHP
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
原生js ActiveXObject获取execl里面的值
2013/11/01 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
详解JSON1:使用TSQL查询数据和更新JSON数据
2016/11/21 Javascript
Canvas 制作动态进度加载水球详解及实例代码
2016/12/09 Javascript
jQuery Form表单取值的方法
2017/01/11 Javascript
关于foreach循环中遇到的问题小结
2017/05/08 Javascript
使用JavaScript实现表格编辑器(实例讲解)
2017/08/02 Javascript
JavaScript中的return布尔值的用法和原理解析
2017/08/14 Javascript
js前端导出Excel的方法
2017/11/01 Javascript
vue之浏览器存储方法封装实例
2018/03/15 Javascript
手写Node静态资源服务器的实现方法
2018/03/20 Javascript
学习python处理python编码问题
2011/03/13 Python
Python深入06——python的内存管理详解
2016/12/07 Python
使用Python通过win32 COM实现Word文档的写入与保存方法
2018/05/08 Python
Flask教程之重定向与错误处理实例分析
2019/08/01 Python
pandas DataFrame创建方法的方式
2019/08/02 Python
ipad上运行python的方法步骤
2019/10/12 Python
Pandas时间序列重采样(resample)方法中closed、label的作用详解
2019/12/10 Python
keras 特征图可视化实例(中间层)
2020/01/24 Python
Python 基于FIR实现Hilbert滤波器求信号包络详解
2020/02/26 Python
Python能做什么
2020/06/02 Python
python用什么编辑器进行项目开发
2020/06/17 Python
使用pytorch 筛选出一定范围的值
2020/06/28 Python
Python更改pip镜像源的方法示例
2020/12/01 Python
请解释接口的显式实现有什么意义
2012/05/26 面试题
如何客观的进行自我评价
2013/12/17 职场文书
建筑工程质量通病防治方案
2014/06/08 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
求职自荐信怎么写
2015/03/04 职场文书
企业法人任命书
2015/09/21 职场文书
Python 内置函数速查表一览
2021/06/02 Python