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. JDBC-登陆功能实现

    1.user.java package songyan.jdbc.entity; import java.util.Date; public class User { private int id; ...

  2. 解决android模拟器连接本机服务器”Connection refused”问题

      在本机用模拟器连接 localhost 的服务器不成功,经查询是我反了一个小错误. android 模拟器其本身的localhost就是它自己的ip,而如果我要连接本机的localhost则需要将 ...

  3. ASP.net MVC 基于角色的权限控制系统的实现

    一.引言 我们都知道ASP.net mvc权限控制都是实现AuthorizeAttribute类的OnAuthorization方法. 下面是最常见的实现方式: public class Custom ...

  4. 如何暂停sqlserver数据订阅服务

    原文:如何暂停sqlserver数据订阅服务 从 Management Studio 启动和停止快照代理或日志读取器代理 在 Management Studio 中连接到发布服务器,然后展开服务器节点 ...

  5. threadlocal彻底理解

    如果你定义了一个单实例的java bean,它有若干属性,但是有一个属性不是线程安全的,比如说HashMap.并且碰巧你并不需要在不同的线程中共享这个属性,也就是说这个属性不存在跨线程的意义.那么你不 ...

  6. win10 安装java

    https://jingyan.baidu.com/article/fea4511a12b158f7bb9125b9.html 一 下载java SE 官网 二设置环境变量 JAVA_HOME PAT ...

  7. python 文件操作的注意事项

    我们经常用python读取文件信息,这里有些注意事项 with open('test.txt', 'r') as f: print 'f.read', f.read() with open('test ...

  8. 转: 苹果APNS的说明

    转: http://toutiao.com/a6276578687162040578/?tt_from=weixin&utm_campaign=client_share&app=new ...

  9. 【LeetCode-面试算法经典-Java实现】【109-Convert Sorted List to Binary Search Tree(排序链表转换成二叉排序树)】

    [109-Convert Sorted List to Binary Search Tree(排序链表转换成二叉排序树)] [LeetCode-面试算法经典-Java实现][全部题目文件夹索引] 原题 ...

  10. 关于httpclient 请求https (如何绕过证书验证)

    第一种方法,适用于httpclient4.X 里边有get和post两种方法供你发送请求使用.导入证书发送请求的在这里就不说了,网上到处都是 import java.io.BufferedReader ...