跨域详解之jsonp,底层的实现原理
分享一下跨域,不仅是因为现在的工作中遇到的越来越多,而且在面试中也经常被问到。
那么什么是跨域呢,我们来看官方给出的解释:浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的(所谓同源是指,域名,协议,端口均相同,只要有一个不相同即为跨域),是浏览器对javascript施加的安全限制。这里不做重点介绍,网上有很多这方面的介绍,本篇主要详解jsonp的底层实现原理。
虽然,浏览器在这方面做了限制,但是我们可以通过script标签,巧妙的避开同源策略,“偷梁换柱”,我们来看一段代码
<script>
function fn(data){
console.log(data);
}
</script>
<script>
fn("我是后端的数据");
</script>
纳尼???这不就是一个普通的不能再普通的函数调用吗?很多小伙伴一定以为我把代码贴错了吧,开什么玩笑,这不就是一个普通的不能在普通的函数调用吗?这和你说的jsonp有半毛钱关系吗?我想说不仅有关系,而且非常有关系,甚至可以说这就是jsonp的底层实现原理。疯了吧!!!别急。。。咱们接着往下看
咱来看一下百度提示中使用的的跨域,他就是用的是jsonp的形式,https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=hello,(接口后面的参数我会在下面讲解)这个就是百度提示的一个接口,我们放到浏览器的地址栏打开
是不是很熟悉,这不就是一个函数调用的方式吗?他把数据当作参数给传进去了,继续往下看
<script>
function hello(data){
console.log(data);
}
</script>
<script src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/suwd=a&cb=hello"></script>
在浏览器中打印出来,我们发现我们已经拿到了百度给的接口的数据,终于可以长舒一口气。
但是,好像有点问题,假如我们不是想页面一加载的时候就去拿数据,而是在需要的时候再去加载数据怎么办(也就是按需加载),这时候该怎么办呢?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<input type="button" value="点击加载百度接口数据" id="input"/>
<script>
function hello(data){
console.log(data);
}
var oInp = document.getElementById('input');
oInp.onclick = function(){
var oScript = document.createElement('script');
oScript.src = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=a&cb=hello";
document.body.appendChild(oScript);
}
</script>
</html>
以上代码就完美的解决了这个问题,实现了按需加载,有木有很像ajax,哈哈,可以在自己的编辑器中运行一下,看一下效果。
小结:jsonp的底层实现原理,其实就是函数调用,只不过调用的方式有些特别,调用的接口是从后端传过来的。
再来看一下jquery中jsonp的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
<script src="js/jquery.min.js"></script>
<script type="text/javascript">
$.ajax({
type : "get",
data : {wd:"a"},
url:"https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",
dataType: "jsonp", //请求类型为jsonp
jsonp:"cb", //与后端约定好的函数调用的key值(也就是参数名)
jsonpCallback: "hello", //要执行的回调函数名
success : function(data) {
console.log(data);
}
})
</script>
</html>
对比一下前面我写的代码,我想你一定会有所收获!
跨域详解之jsonp,底层的实现原理的更多相关文章
- 跨域详解之-----Jsonp跨域
一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. 比如 ...
- js&jquery跨域详解jsonp,jquery并发大量请求丢失回调bug
URL 说明 是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下 允许 http://www.a.com/lab/a.js http:/ ...
- ajax工作原理及jsonp跨域详解
一.Ajax简介 ajax = 异步 JavaScript 和 XML. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.我们知道,传统的网页(不使用ajax)如果需要更新内容, ...
- 【nginx】nginx解决跨域详解
使用场景:本地运行一个项目,但是要访问外域的api接口,存在跨域问题,解决方式有很多,但我尝试用nginx解决,搜索了网上文章后再加上尝试终于成功, 其中一些注意事项和大家分享一下. 一.window ...
- JavaScript中的跨域详解(二)
4.AJAX 同源政策规定,AJAX请求只能发给同源的网址,否则就报错. 除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制. JSONP WebSocket C ...
- js跨域详解
跨域概念:Cross-origin resource sharing
- JavaScript中的跨域详解(一)
同源策略 所谓的同源策略,指的是浏览器对不同源的脚本或者文本访问方式进行的限制. 所谓同源,就是指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可. 同源政策的目的,是为了保证用户信 ...
- 004. 前端跨域资源请求: JSONP/CORS/反向代理
1.什么是跨域资源请求? https://www.cnblogs.com/niuli1987/p/10252214.html 同源: 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有 ...
- 面试汇总——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?
本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...
随机推荐
- ADFS RelayState
https://blogs.technet.microsoft.com/askds/2012/09/27/ad-fs-2-0-relaystate/ 什么是RelayState,我为什么要关心?有两种 ...
- python:python2与python3共存时,pip冲突,提示Fatal error in launcher: Unable to create process using '"d:\python27\python2.exe" "D:\Python27\Scripts\pip2.exe" '
问题背景: 机器上同时装了python2.和python3后,导致只能用pip3了,使用pip2时提示:Fatal error in launcher: Unable to create proces ...
- Reporting Service 2016 匿名访问配置
环境:SQL SERVER 2016 一.修改配置文件 需要修改的配置文件目录C:\Program Files\Microsoft SQL Server\MSRS13.MSSQLSERVER\Repo ...
- [转载]桥接与NAT
NAT相当于是局域网中的局域网,把192.168.21.1当作外网ip,重新划分了一个网关(192.168.33.x) 网桥只是把网络桥接起来,还是原来的网关(192.168.21.x),虚拟机相当于 ...
- zabbix 部署包安装
关于zabbix的安装方式,官网提供了几种方法,分别是:部署包安装.源码安装.容器安装.容器安装我之前已经写过一篇,而现在这一篇是关于部署包安装的. 按照官网的说法,我们需要如下几个步骤: ...
- ROS学习(二)运行keyboard
1.ssh连接机器人 ./dora*.sh 启动roscore,相当于启动ros系统 roscore 2.另启终端,也就意味着重新ssh连接机器人, ./dora*.sh 运行wheel驱动 rosr ...
- SQL数据库基础语法
SQL语句的概述 SQL语言的分类 数据定义语言(Data Definition Language)主要用于修改.创建和删除数据库对象,其中包括CREATE ALTER DROP语句. 数据查询语 ...
- REDIS scan与sunionstore合并多集合数据
实际业务场景: 现需求要将多个KEY的set集合数据合并到一个总集合中,思路:通过scan分批扫描满足条件的KEY,然后用sunionstore分批合并. 注意闭坑:此种解决方案只适用于待合并的集合K ...
- C++ 中不能声明为虚函数的函数有哪些?
目录 普通函数 构造函数 内联成员函数 静态成员函数 友元函数 普通函数 普通函数(非成员函数)只能被overload,不能被override,而且编译器会在编译时绑定函数. 多态的运行期行为体现在虚 ...
- SAS学习笔记39 MINOPERATOR | NOMINOPERATOR
MINOPERATOR(可理解为Macro IN Operator的简写,帮助大家记忆)系统选项用于控制是否在宏程序中是否可以用IN操作符或#操作符,默认值为NOMINOPERATOR.需要注意的是, ...