Jsonp跨域原理及实现
一般遇到跨域问题都是直接后台cors着手或者nginx实现,很少用过jsonp,不过有人使用总有它存在的价值,了解一下吧==
一、什么是JSONP
1.1 同源策略
如果两个页面拥有相同的协议,端口(如果指定),和主机,那么这两个页面就属于同一个源。
同源策略分为:
DOM
同源策略:禁止对不同源页面DOM
进行操作XMLHttpRequest
同源策略:禁止向不同源的地址发起HTTP
请求
由此可见,Ajax
禁止跨域。
1.2 JSONP
的原理
JSONP
是JSON with Padding
的简称,一般用来解决Ajax
跨域的问题。它是这样产生的:
页面上调用
js
文件时不受跨域的影响,而且,凡是拥有src
属性的标签都拥有跨域的能力,比如<script>
、<img>
、<iframe>
。可以在远程服务器上设法把数据装进
js
格式的文件里,供客户端调用处理,实现跨域。目前最常用的数据交换方式是
JSON
,客户端通过调用远程服务器上动态生成的js
格式文件(一般以JSON
后缀)。客户端成功调用
JSON
文件后,对其进行处理。为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作
JSONP
,该协议的一个要点就是允许用户传递一个callback
参数给服务端,然后服务端返回数据时会将这个callback
参数作为函数名来包裹住JSON
数据,这样客户端就可以随意定制自己的函数来自动处理返回数据了。
二、JSONP
的客户端具体实现
2.1 上文已指出,页面可执行跨域的js
代码(符合安全策略的),那么:
<script type="text/javascript">var localHandler = function (data) {alert('跨域的remote.js文件可以调用本函数,带来的数据是:' + data.result);};
</script>
<script type="text/javascript" src = "http://remoteserver.com/remote.js"></script>
remote.js
的代码:
localHandler({"result": "我是远程js带来的数据"
});
运行后,成功弹出提示窗口,跨域成功。但问题是,如何让远程js
知道它应该调用的本地函数叫什么名字?
2.2 只要服务端提供的js
脚本是动态生成的就行了,调用者可以传一个参数过去告诉服务端本地函数的名字,于是服务端就可以按照客户的需求来生成js
脚本并相应了。
var flightHandler = function (data) {alert('你查询的航班结果是:票价 ' + data.price + '元,余票' + data.tickets + '张。');};var url = 'http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler';var script = document.createElement('script');script.setAttribute('src', url);document.getElementsByTagName('head')[0].appendChild(script);
并没有直接把远程js
写死,而是编码事项动态查询。这是JSONP
的核心部分。在调用的url
中传递了一个code
参数,告诉服务器要查的是CA1998
次航班的信息,而callback
参数告诉服务器,本地调用的函数叫做flightHandler
。
服务器的flightResult.aspx
生成了以下代码提供给页面:
flightHandler({"code": "CA1998","price": 1780,"tickets": 5
});
运行一下页面,成功提示窗口,JSONP
的执行全过程顺利完成。
2.3 jQuery
代码
$(function() {$('button').on('click', function(event) {event.preventDefault();$.ajax({type: 'GET',async: false,url: 'http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998',dataType: 'jsonp',jsonp: 'callback',jsonpCallback: 'flightHandler', // 默认为jQuery自动生成的随机函数名success: function (json) {alert('你查询的航班结果是:票价 ' + json.price + '元,余票' + json.tickets + '张。');},error: function () {alert('fail');}});});
});
jQuery
自动生成回调函数并把数据取出来供success
属性方法来调用。
三、JSONP
与Ajax
的关系
Ajax
与JSONP
这两种技术看起来很像,目的也一样,都是请求一个url
,然后把服务器返回的数据进行处理,因此jQuery
等框架都把JSONP
作为Ajax
的一种形式。实际上
Ajax
与JSONP
有着本质上的不同。Ajax
的核心是通过XMLHttpRequest
获取数据,而JSONP
的核心则是动态添加<script>
标签来调用服务器提供的js
文件。Ajax
与JSONP
的区别也不在于是否跨域,Ajax
通过服务端代理也可以跨域,JSONP
也可获取同源数据。
四、参考
【原创】说说JSON和JSONP,也许你会豁然开朗,含jQuery用例
深入浅出JSONP--解决ajax跨域问题
浏览器的同源策略 - MDN
Jsonp跨域原理及实现相关推荐
- jsonp 跨域原理详解
转载至:http://zha-zi.iteye.com/blog/1975116 JavaScript是一种在Web开发中经常使用的前端动态脚本技术.在JavaScript中,有一个很重要的安全性限制 ...
- jsonp跨域原理_【网站技术解读①】Javascript实现跨域请求
推荐一个读者做的不错的编程学习网站: 网站:潜安 域名:http://www.qianani.com 另外将会不定期推送近期网站用到的一些技术,讲一些核心原理,今天为第一篇 问题由来: 最近一直在优化 ...
- jsonp跨域原理及使用
在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. jsonp通过script标 ...
- jsonp跨域原理_Rust 搭建可跨域访问服务器JsonP(一)
最近有一个项目极有可能需要一个可跨域的服务器做一个中转,思来想去决定用Rust来实现这个服务器,因为有如下优点. 1.编译体积小 2.跨平台 3.安全性较高 JsonP(JSON with Paddi ...
- 白话之jsonp跨域原理分析
一.针对跨域请求,我们首先要知道什么是同源策略. 同源策略即是指:域名,协议,端口相同,三者中有一者不一致,为了安全考虑我们所在的服务器是无法获得想要访问资源所在服务器的资源的. 如图: 比如我们在l ...
- ajax的jsonp原理,jsonp 跨域原理和用法(上篇)
出于对网站安全性的要求,两个不同域名的网站之间是不能通过前端技术互相发送请求的.但有时我们又需要使用这样的机制.比如:网站需要制作一个天气预报插件,或者需要开发两个网站,一个供外部用户使用,一个供内部 ...
- javascript实现jsonp跨域问题+原理
在工作中往往存在跨域的问题 ,跨域是什么概念就不在这里了,搜这类问题的肯定已经知道了.下面直接探讨jsonp跨域原理 jspon跨域原理: 1.动态创建一个script标签 var script = ...
- JSONP跨域原理和jQuery.getJSON用法
JSONP是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式).本文主要介绍JS ...
- 【漏洞利用】JSONP跨域请求漏洞 挖掘、利用详解
参考文章 轻松搞定JSONP跨域请求 jsonp跨域原理,使用以及同源策略 跨域漏洞丨JSONP和CORS跨域资源共享 Tag: Ref: [[019.同源策略]] 本片文章仅供学习使用,切勿触犯法律 ...
- .net学习之母版页执行顺序、jsonp跨域请求原理、IsPostBack原理、服务器端控件按钮Button点击时的过程、缓存、IHttpModule 过滤器...
1.WebForm使用母版页后执行的顺序是先执行子页面中的Page_Load,再执行母版页中的Page_Load,请求是先生成母版页的控件树,然后将子页面生成的控件树填充到母版页中,最后输出 2.We ...
最新文章
- UNIX--stat、fstat和lstat函数
- 全民捡破烂,转转和闲鱼谁能胜出?
- 华为畅享8可以云闪付吗_华为畅享8、魅族16X、海信彩墨屏阅读手机A5C对比
- Linux系统下GNU Wget 命令用法详解及其参数说明
- 第一个Node.js实例
- CYQ.Data 数据框架 V4.0 开源版本发布(源码提供下载,秋色园V2.5版本标配框架)
- 408计算机组成原理有汇编吗,2021考研408计算机组成原理习题:计算机系统概述
- 部署windows服务
- 一:Tixiao Shan最新力作LVI-SAM(Lio-SAM+Vins-Mono),基于视觉-激光-惯导里程计的SLAM框架,环境搭建和跑通过程
- 软考高项--项目管理概述
- 嵌入式Linux开发工具(vim的使用)
- sqlserver行列转换,动态行转换
- Linux平台开源浏览器
- laravel seeder factory填充数据
- 显卡组超级计算机,NVIDIA发布全新显卡 在家就能拥有超级计算机
- SQL零基础入门学习(十三)
- 魔性的数字人形时钟动态pc端电脑屏幕保护
- PHP写的人人网好友爬虫
- 用soa搭建统一的电子政务平台
- 两个同时comet matlab,matlab 三维绘制