• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >jquery > AngularJS中的JSONP实例解析

AngularJS中的JSONP实例解析

作者:BestMe丶 字体:[增加 减小] 来源:互联网

BestMe丶 通过本文主要向大家介绍了angularjs,sop等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

概念

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

以上就是本文的全部内容,希望对大家有所帮助,同时也希望多多支持!

分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • AngularJS中的JSONP实例解析
  • Jquery和angularjs获取check框选中的值的方法汇总

相关文章

  • jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
  • jQuery实现移动 和 渐变特效的点击事件
  • 浅谈DOCTYPE对$(window).height()取值的影响
  • EasyUI validType 自定义规则
  • Boostrap实现的登录界面实例代码
  • jQuery Validation Plugin验证插件手动验证
  • jQuery中unbind()方法用法实例
  • jQuery查找和过滤_动力节点节点Java学院整理
  • JQuery 1.3.2以上版本中出现pareseerror错误的解决方法
  • Jquery阻止事件冒泡 event.stopPropagation

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • jQuery中的通配符选择器使用总结
    • jquery实现简单的全选和反选功能
    • jquery图片切换实例分析
    • 两种方法解决javascript url post 特殊字符转义 + & #
    • noty – jQuery通知插件全面解析
    • jQuery中实现动画效果的基本操作介绍
    • jquery checkbox实现单选小例
    • js之ActiveX控件使用说明 new ActiveXObject()
    • jQuery实现的右下角广告窗体跟随效果示例
    • PHP结合jQuery实现红蓝投票功能特效

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有