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. 五. 面向对象高级特性6. Java 泛型

    我们知道,使用变量之前要定义,定义一个变量时必须要指明它的数据类型,什么样的数据类型赋给什么样的值. 假如我们现在要定义一个类来表示坐标,要求坐标的数据类型可以是整数.小数和字符串,例如: x = 1 ...

  2. 访问控制技术- 扩展IP访问列表

    1.设置pc IP 网关 192.168.1.1 192.168.1.254 192.168.1.2 192.169.1.254 192.168.3.1 192.168.3.254 192.168.3 ...

  3. VMware给虚拟机绑定物理网卡

    前言: 桥接模式:就是使用真实的IP地址 NAT模式:使用以VMnet 8所指定的子网中分配的IP地址,在外网信息交互中不存在这样的IP. 仅主机模式:仅用于虚拟机与真机之间的信息交互. 操作步骤: ...

  4. 【Linux】CentOS7上的一些操作小方法

    1.在文件夹目录下删除文件 点击文件,按Delete键删除,就可以把文件删除到回收站中. 2.更改命令窗口的样式 打开命令窗口--->右键---->配置文件---->配置文件首选项

  5. django 分页django-pure-pagination

    虽然django自带了一个paginator,但不是很方便,我们使用django-pure-pagination github地址https://github.com/jamespacileo/dja ...

  6. ES6里关于函数的拓展(二)

    一.构造函数 Function构造函数是JS语法中很少被用到的一部分,通常我们用它来动态创建新的函数.这种构造函数接受字符串形式的参数,分别为函数参数及函数体 var add = new Functi ...

  7. 模拟服务器MockServer之Moco详细介绍

    转载:http://blog.csdn.net/vite_s/article/details/54583243 前面一篇介绍了如何用mockito来测试我们的一些异步任务,例如网络请求时候的异步回调. ...

  8. JAVA Eclipse如何重新设置工作空间workspace

    窗口-首选项-常规-启动和关闭,勾选启动时提示工作空间,然后移除现有的工作空间,最好也勾选启动时刷新工作空间   重启之后就可以设置工作空间了  

  9. 单片机小白学步系列(十三) 点亮第一个LED——好的開始,成功的一半

    前面介绍了非常多概念知识.做了非常多准备工作,从这一节開始,我们正式開始单片机的学习.我们将使用单片机完毕一项非常easy的工作:点亮一个发光二极管(即LED:Light-Emitting Diode ...

  10. cmake 如何生成一个win32工程

    只需要加上下面一句连接选项就可以了. IF(WIN32) SET(CMAKE_EXE_LINKER_FLAGS "${CMAKE_EXE_LINKER_FLAGS} /SUBSYSTEM:W ...