JSONP是JSON with Padding的略称。
它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)
<script>标签的src属性并不被同源策略所约束,所以可以获取任何服务器上脚本并执行。
返回一段js代码
var flightHandler = function(data){ alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。'); }; // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码) var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
url中传递了一个code参数,告诉服务器我要查的是CA1998次航班的信息,而callback参数则告诉服务器,我的本地回调函数叫做flightHandler,所以请把查询结果传入这个函数中进行调用。
服务器flightResult.aspx页面生成了一段这样的代码提供给jsonp.html(服务端的实现说到底就是拼接字符串):
flightHandler({ "code": "CA1998", "price": 1780, "tickets": 5 });
我们看到,传递给flightHandler函数的是一个json,它描述了航班的基本信息。运行一下页面,成功弹出提示窗口,jsonp的执行全过程顺利完成!
利用<script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。当需要通讯时,本站脚本创建一个<script>元素,地址指向第三方的API网址,形如:
<script src="http://www.example.net/api?param1=1&param2=2"></script>
并提供一个回调函数来接收数据(函数名可约定,或通过地址参数传递)。
第三方产生的响应为json数据的包装(故称之为jsonp,即json padding),形如:
callback({"name":"hax","gender":"Male"})
这样浏览器会调用callback函数,并传递解析后json对象作为参数。本站脚本可在callback函数里处理所传入的数据。
允许用户传递一个callback参数给服务端,然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据

jsonp 小结的更多相关文章

  1. json与jsonp小结

    json 1. json 的值可以是下面这些类型: ① 数字(整数或浮点数),比如123,1.23 ② 字符串(在双引号中) ③ 逻辑值(true 或 false) ④ 数组(在方括号中) ⑤ 对象( ...

  2. JSONP跨域访问百度实现搜索提示小案例

    一.JSONP简介 JSONP 全称 JSON with padding(填充式 JSON 或参数式 JSON),JSONP实现跨域请求的原理,就是动态创建<script>标签,然后利用& ...

  3. 第4章-Vue.js 交互及实例的生命周期

    一.学习目标 了解实例生命周期的过程 理解钩子函数的作用 掌握Vue.js过滤器的使用方法 (重点) 能够使用网络请求进行前后端交互 (重点.难点) 二.交互的基本概念 2.1.前端和后端的概念 说明 ...

  4. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  5. JSONP使用及注意事项小结

    什么是JSONP 三句话总结: 概念:JSONP(JSON with Padding)是JSON的一种"使用模式". 目的:用于解决主流浏览器的跨域数据访问的问题. 原理:利用 & ...

  6. 小结ajax中的同源和跨域 jsonp和cors

    网上的同源和跨域一般都比较复杂,最近也稍微总结了一下: 所谓同源,是浏览器的一种安全机制,作用在于保护网页数据的安全,不同源的网页之间不允许cookie dom ajax等行为 同源的条件:1.协议相 ...

  7. jsonp协议原理深度解析

    前言 今天在开发联调的过程中,需要跨域的获取数据,因为使用的jquery,当然使用dataType:'jsonp'就能够很easy的解决了.但是因为当时后端没有支持jsonp来访问,后来他在实现这个功 ...

  8. WeX5 - AJAX跨域调用相关知识-CORS和JSONP

    http://docs.wex5.com/ajax-cross-domain/ 1.什么是跨域 跨域问题产生的原因,是由于浏览器的安全机制,JS只能访问与所在页面同一个域(相同协议.域名.端口)的内容 ...

  9. js中各种跨域问题实战小结(二)

    这里接上篇:js中各种跨域问题实战小结(一) 后面继续学习的过程中,对上面第一篇有稍作休整.下面继续第二部分: -->5.利用iframe和location.hash -->6.windo ...

随机推荐

  1. springboot 2.0+ 自定义拦截器

    之前项目的springboot自定义拦截器使用的是继承WebMvcConfigurerAdapter重写常用方法的方式来实现的. 以下WebMvcConfigurerAdapter 比较常用的重写接口 ...

  2. 面向对象-QuickHit项目

    package com.ketang.game; /** * 游戏级别类 * @author * */ public class Level { private int levelNo; //各级别编 ...

  3. java读取配置文件(properties)的时候,unicode码转utf-8

    有时我们在读取properties结尾的配置文件的时候,如果配置文件中有中文,那么我们读取到的是unicode码的中文,需要我们在转换一下,代码如下 /** * 将配置文件中的Unicode 转 ut ...

  4. iOS 自定义字体设置

    有时候客户都要求使用方正兰亭刊黑字体,可是iOS没有自带这个字体,肿么办 ,只能自己自定义字体了,下面是自定义字体的几个重要步骤: 1.下载字体资源文件(.ttf或.otf格式的文件) 比如说你要使用 ...

  5. linux-设置环境变量-export

    Linux export命令用于设置或显示环境变量. 在shell中执行程序时,shell会提供一组环境变量.export可新增,修改或删除环境变量,供后续执行的程序使用.export的效力仅及于该次 ...

  6. 关于asp.net mvc中 weiui gallery中IOS 下不显示预览图片问题的解决方式

    IOS 下面不显示预览. 结果去掉了红框中的缓存部分 就可以显示了 备忘,也帮助一下需要的朋友 @*<meta http-equiv="pragma" content=&qu ...

  7. POJ 1511 Invitation Cards(单源最短路,优先队列优化的Dijkstra)

    Invitation Cards Time Limit: 8000MS   Memory Limit: 262144K Total Submissions: 16178   Accepted: 526 ...

  8. 设计模式之工厂模式之工厂方法(php实现)

    github: git@github.com:ZQCard/design_pattern.git /** * 工厂方法 * 使用开闭原则来分析下工厂方法模式.当有新的产品产生时,只要按照抽象产品角色. ...

  9. System.Runtime.InteropServices.COMException

    System.Runtime.InteropServices.COMException (0x80040154): Retrieving the COM class factory for compo ...

  10. 使apache的日志文件里不记录图片文件

    找到: LogFormat "%h %l %u %t \"%r\" %>s %b \"%{Referer}i\" \"%{User-A ...