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. 【bzoj1001】【最短路】【对偶图】【最大流转最小割】狼抓兔子题解

    [BZOJ1001]狼抓兔子 1001: [BeiJing2006]狼抓兔子 Time Limit: 15 Sec  Memory Limit: 162 MBSubmit: 18872  Solved ...

  2. 如何隐藏 video 元素的下载按钮

    1. 使用 video 元素的 ControlList API <video controls controlsList="nodownload"></video ...

  3. 在VisualStudio 工具箱中隐藏用户控件

    当我们创建一个用户控件后,VisualStudio会自动将其添加到工具箱中,本来这是一个比较贴心的设计.但是,有的时候,我们并不想将用户控件放到工具箱中. 例如:在WPF中,为了避免一个页面的控件过多 ...

  4. Android访问WCF服务(使用json实现参数传递)

    经过多日努力, 终于勉强弄明白了Android访问WCF服务的方法. 服务端实现 一, 实现服务. 操作契约 [ServiceContract] public interface IService { ...

  5. PHP安全相关的配置

    PHP作为一门强大的脚本语言被越来越多的web应用程序采用,不规范的PHP安全配置可能会带来敏感信息泄漏.SQL注射.远程包含等问题,规范的安全配置可保障最基本的安全环境.下面我们分析几个会引发安全问 ...

  6. Delphi TClientDataset查找定位功能

    if CDSUserFunc.Locate('mod_id;res_id', VarArrayOf([UserFunc.MOD_ID, UserFunc.RES_ID]), [loCaseInsens ...

  7. apache只记录指定URI的日志

    我的需求是,把类似请求 www.aaa.com/aaa/... 这样的请求才记录日志.在httpd.conf 或者 相关的虚拟主机配置文件中添加SetEnvIf Request_URI "^ ...

  8. iptables利用connlimit模块限制同一IP连接数

    connlimit功能: connlimit模块允许你限制每个客户端IP的并发连接数,即每个IP同时连接到一个服务器个数. connlimit模块主要可以限制内网用户的网络使用,对服务器而言则可以限制 ...

  9. 解决svn锁定

    问题:今天去公司 svn-update的时候,报错svn:E155004,提示说什么locked 解决:svn cleanup解除锁定,然后就可以操作了. 原因:SVN 本地更新时,由于一些操作中断更 ...

  10. ASP.NET MVC学习---(八)三个比较常用的方便的功能

    通过之前的了解 现在我们已经可以使用mvc进行一些简单的开发 但是还不够 哪里不够呢? 为什么现在的程序员喜欢用mvc进行开发 不就是因为它爽吗? 之前介绍的那些特点仅仅是mvc框架的一小部分 只是一 ...