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权威教程》P153

  

时间: 2024-10-22 12:14:17

AngularJS中的JSONP实践的相关文章

AngularJS 中 异步请求$http 对象的使用

 AngularJS 提供了一个类似jquery的$.ajax的对象,用于异步请求. 在AngularJS中对异步操作是推崇至极的,所以$http的操作都是异步的不像jquery.ajax里还提供了async参数. 对于官网的$http对象的总结和使用. 用法: $http(config); 参数: config (常用的参数标红,翻译了一下) config object Object describing the request to be made and how it should b

angularJS中XHR与promise

angularJS应用是完全运行在客户端的应用,我们可以通过angularJS构建一个不需依赖于后端,同时能够实现动态内容和响应的web应用,angularJS提供了将应用与远程服务器的信息集成在一起的方法 $http服务 angularJS提供了内置的$http服务直接同外部进行通信,$http服务封装了浏览器原生的XMLHttpRequest对象 $http服务只接收一个参数对象,包含了用来生成http请求的配置内容,$http函数返回一个promise对象,具有success和error两

AngularJS学习--- AngularJS中XHR(AJAX)和依赖注入(DI) step5

前言:本文接前一篇文章,主要介绍什么是XHR,AJAX,DI,angularjs中如何使用XHR和DI. 1.切换工具目录 git checkout -f step-5 #切换分支 npm start #启动项目 2.什么是XHR和依赖注入(Dependency Injection)? 1)什么是XHR? XHR是XMLHttpRequest的简称,XMLHttpRequest 用于在后台与服务器交换数据,主要是为了实现在不重新加载整个网页的情况下,对网页的某部分进行更新.简单说,浏览器中URL

Angularjs中不同类型的双向数据绑定

Angularjs1.X中两种不同的双向数据绑定 聊聊 Angularjs1.x中那些活见鬼的事情. 一. html与Controller中的双向数据绑定 html-Controller的双向数据绑定,在开发中非常常见,也是Angularjs1.x的宣传点之一,使用中并没有太多问题. 1.1数据从html流向controller 也就是从视图层流向模型层,原生html中需要使用表单元素(例如input标签)来收集用户输入信息,Angularjs中通过在表单元素上使用ng-model标签,当用户输

angularJs中关于ng-class的三种使用方式说明

在开发中我们通常会遇到一种需求:一个元素在不同的状态需要展现不同的样子. 而在这所谓的样子当然就是改变其css的属性,而实现能动态的改变其属性值,必然只能是更换其class属性 这里有三种方法: 第一种:通过数据的双向绑定(不推荐) 第二种:通过对象数组 第三种:通过key/value 下面简单说下这三种: 第一种:通过数据的双向绑定 实现方式: function changeClass(){   $scope.className = "change2"; } <div clas

AngularJs中的directives(指令)

一.指令的职责   指令的职责是修改DOM结构,并将作用域和DOM连接起来.即指令既要操作DOM,将作用域内的数据绑定到DOM节点上,又要为DOM绑定事件调用作用域内的对应的方法. 二.创建自定义指令 调用自定义指令的4种方式:元素.属性.样式类.注释. 常用的是前两种,实例如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title>

黄聪:AngularJS中的$resource使用与Restful资源交互(转)

原文:http://blog.csdn.net/he90227/article/details/50525836 1.AngularJS中的 $resource 这个服务可以创建一个资源对象,我们可以用它非常方便地同支持RESTful的服务端数据源进行交互,当同支持RESTful的数据模型一起工作时,它就派上用场了.      REST是Representational State Transfer(表征状态转移)的缩写,是服务器用来智能化地提供数据服务的一种方式 1)我们首先需要引入ng-Re

Angular中的jsonp

1.一般我们使用Angualr中的jsonp值这样使用的:注入$http服务 这样使用jsonp的方式可以支持多数api,但是douban不支持无法使用 1 module.controller('InTheatersController',['$scope','$http', function($scope,$http){ 2 4 var doubanApiAddress = 'https://api.douban.com/v2/movie/in_theaters'; 5 6 /!*在angua

Spring Boot+AngularJS中因为跨域导致Session丢失

http://blog.csdn.net/dalangzhonghangxing/article/details/52446821 如果还在为跨域问题烦恼,请查看博主的 解决angular+spring boot的跨域问题 那篇文章. 博主在项目开发过程中,遇到了由于跨域而导致的Session丢失问题,非常的恶心,但是经过在网上查阅各种资料,发现解决方法十分简单. 在我们每一次的数据请求中,浏览器都会向后台发送一个JSession,后台会根据这个值自动查找Id为JSession的那个sessio