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权威教程》
以上就是本文的全部内容，希望对大家有所帮助，同时也希望多多支持脚本之家！
相关文章
- 系统的学习了一下angularjs，发现angularjs的有些思想根php的模块smarty很像，例如数据绑定，filter。如果对smarty比较熟悉的话，学习angularjs会比较容易一点,这篇文章给大家介绍angularjs filter用法详解，感兴趣的朋友一起学习吧...2015-12-29
- AngularJS 通过路由支持多视图应用， 可以根据路由动态加载所需的视图， 在 AngularJS 的文档中有详细的介绍， 网上也有不少教程， 就不用介绍了！随着视图的不断增加，js文件会越来越多，而 AngularJS 默认需要把全部的js都一次性...2015-10-21
- 这篇文章主要为大家详细介绍了AngularJS实现分页显示数据库信息效果的相关资料，感兴趣的小伙伴们可以参考一下...2016-07-06
- 这篇文章主要介绍了angularjs $http实现form表单提交示例，非常具有实用价值，需要的朋友可以参考下 ...2017-06-15
- 这篇文章主要介绍了AngularJS实现Model缓存的方式，分享了多种AngularJS实现Model缓存的方法，感兴趣的小伙伴们可以参考一下...2016-02-05
- 这篇文章主要介绍了AngularJS自定义指令之复制指令实现方法,结合完整实例形式分析了AngularJS自定义指令实现复制功能的相关操作技巧,需要的朋友可以参考下...2017-05-22
- 本文主要介绍AngularJS 视图，这里整理了相关知识，并附代码示例和实现效果图，有兴趣的小伙伴可以参考下...2016-08-27
- 本文主要介绍AngularJS 依赖注入的知识，这里整理了相关的基础知识，并附示例代码和实现效果图，有兴趣的小伙伴可以参考下...2016-08-24
- 下面小编就为大家带来一篇浅谈AngularJs指令之scope属性详解。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-10-25
- angular是Google开发的一个单页面应用框架,是现在比较主流的单页面应用框架之一，下面通过本文给大家介绍AngularJs中route的使用方法和配置，感兴趣的朋友一起学习吧...2016-02-09
- 任何时候，如果我们想要为请求添加全局功能，例如身份认证、错误处理等，在请求发送给服务器之前或服务器返回时对其进行拦截，是比较好的实现手段...2016-01-05
Angularjs中如何使用filterFilter函数过滤
这篇文章主要介绍了Angularjs中如何使用filterFilter函数过滤的相关资料,需要的朋友可以参考下...2016-02-12- 这篇文章主要为大家详细介绍了AngularJS内建服务$location及$location功能，感兴趣的小伙伴们可以参考一下...2016-07-06
AngularJS使用ngOption实现下拉列表的实例代码
这篇文章主要介绍了AngularJS使用ngOption实现下拉列表的实例代码的相关资料,需要的朋友可以参考下...2016-01-25- 下面小编就为大家带来一篇Angularjs---项目搭建图文教程。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧...2016-07-25
- 这篇文章主要介绍了AngularJS中的指令实践指南(二)的相关资料,需要的朋友可以参考下...2016-03-22
- 这篇文章主要介绍了angularjs循环对象属性实现动态列的思路详解,本文给大家分享一个demo代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2021-11-02
- AngularJS 让人爱不释手的八种功能，想知道AngularJS哪八种功能让人喜欢就快点看下本文吧...2016-03-28
- 本篇文章主要介绍了angularJS 指令封装回到顶部示例详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 ...2017-01-26
AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值
这篇文章主要介绍了AngularJS中如何使用$parse或$eval在运行时对Scope变量赋值的相关资料,本文介绍的非常详细，具有参考借鉴价值，需要的朋友可以参考下...2016-01-26