AngularJS中的JSONP实例解析_jquery

概念

      首先呢,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权威教程》

时间: 2024-10-02 21:25:00

AngularJS中的JSONP实例解析_jquery的相关文章

AngularJS中的指令全面解析(必看)_AngularJS

说到AngularJS,我们首先想到的大概也就是双向数据绑定和指令系统了,这两者也是AngularJS中最为吸引人的地方.双向数据绑定呢,感觉没什么好说的,那么今天我们就来简单的讨论下AngularJS这个框架的指令系统,本人也是初学,查阅了一些资料,要是有一些说的不好的地方,万望指出. 指令作为AngularJS中最为重要的部分,所以这个框架本身也是自带了比较多的的指令,但是在开发中,这些指令通常不能满足我们的需要,所以我们也是需要自定义一些指令的.那么一个AngularJS指令在HTML代码

jQuery EasyUI 获取tabs的实例解析_jquery

左边tree,右边tabs.点击tree增加相应的tabs function addtabs(node) { var start = "; var end = "; if(('#tt').tabs('exists',node.text)) {('#tt').tabs('select',node.text); ('#tt').tabs('select',node.text); } else {('#tt').tabs('add',{ "title":node.text

使用jQuery操作HTML的table表格的实例解析_jquery

最终效果图: 简单来看一下其中的主要部分: HTML: .td_back_color { background-color: red; } .td_center { text-align: center; font-weight:bold; } CSS: <table id="tbl_count"> <caption>2013春节聚会收支统计</caption> <tr> <th>姓名</th> <th>

jQuery中noConflict()用法实例分析_jquery

本文实例讲述了jQuery中noConflict()用法.分享给大家供大家参考.具体分析如下: jQuery默认使用"$"操作符,$ 符号只是 window.jQuery 对象的一个引用,jQuery.noConflict() ,这个函数将变量$的控制权让渡给第一个实现它的那个库.这有助于确保jQuery不会与其他库的$对象发生冲突.在运行这个函数后,就只能使用jQuery变量访问jQuery对象.例如,在要用到$("div p")的地方,就必须换成jQuery(&

jQuery中$.ajax()方法参数解析_jquery

本文实例为大家讲解了jQuery $.ajax()方法参数,供大家参考,具体内容如下 $.ajax({ url:'test.do', data:{id:123,name:'xiaoming'}, type:'post', dataType:'json', success:function(data){ alert(data);//弹窗 //TODO ........ }, error:function(data){ alert(data);//弹窗 //TODO ........ } }) ur

jquery利用json实现页面之间传值的实例解析_jquery

首先,A页面利用按钮打开B页面 function SelectUnit() { OpenDialogBox(epoint.url.getAbsoluteUrl("PK_UserSelect.aspx"), '', "选择人员", AfterOpen, 800, 800); } 在这个方法中调用afateropen 方法,A页面前台页面绑定B页面传过来的json值 function AfterOpen(rtnStr) { var json = rtnStr; $(&q

CSS技术在网页设计中的运用实例解析

css|设计|网页|网页设计 多层模式表单(Cascading Style Sheet, CSS)是一种为超文本置标语言(HyperText Markup anguage, HTML)提供增强补充服务的技术,可对每一个HTML的置标(tag)做精雕细刻的修饰.只用HTML制作的网页,对页面内各部分的修饰能力有限且语句烦锁,CSS正是弥补这一缺陷的有力技术,它语句.文法简单,只要在源码中插入STYLE语句就可轻易实现页面内任意文本颜色.背景.边框.行距.字距的添删和修饰等功能,使网页更加生动活泼,

JSP应用程序开发中安全问题的实例解析

js|安全|程序|问题     一.概述     当网络编程越来越方便,系统功能越来越强大,安全性却指数倍地下降.这恐怕就是网络编程的不幸和悲哀了.各种动态内容生成环境繁荣了WWW,它们的设计目标就是为了给开发者更多的力量,给最终用户更多的方便.正因为如此,系统设计师和开发者必须明确地把安全问题作为一个考虑因素,事后追悔很难奏效. 从安全的角度来看,服务器端WWW应用的弱点来源于各种各样的交互能力和传输通道.它们是攻击者直接可以用来影响系统的工具.在攻击者寻找和利用系统安全漏洞时,它们总是给系统

java继承中的构造方法实例解析_java

本文实例讲述了java继承中的构造方法.分享给大家供大家参考.具体如下: 继承中的构造方法: 1.子类的构造过程中必须调用其基类的构造方法. 2.子类可以在自己的构造方法中使用super(argument_list)调用基类的构造方法.   2.1.使用this(argument_list)调用本类的另外构造方法.   2.2.如果调用super,必须写在子类构造方法的第一行. 3.如果子类的构造方法中没有显示的调用基类的构造方法,则系统默认调用基类的无参数构造方法. 4.如果子类构造方法中既没