分享一下跨域，不仅是因为现在的工作中遇到的越来越多，而且在面试中也经常被问到。

那么什么是跨域呢，我们来看官方给出的解释：浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的（所谓同源是指，域名，协议，端口均相同，只要有一个不相同即为跨域），是浏览器对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，底层的实现原理的更多相关文章

  1. 跨域详解之-----Jsonp跨域

    一.通过jsonp跨域 在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的.但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的. 比如 ...

  2. 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:/ ...

  3. ajax工作原理及jsonp跨域详解

    一.Ajax简介 ajax = 异步 JavaScript 和 XML. ajax是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.我们知道,传统的网页(不使用ajax)如果需要更新内容, ...

  4. 【nginx】nginx解决跨域详解

    使用场景:本地运行一个项目,但是要访问外域的api接口,存在跨域问题,解决方式有很多,但我尝试用nginx解决,搜索了网上文章后再加上尝试终于成功, 其中一些注意事项和大家分享一下. 一.window ...

  5. JavaScript中的跨域详解（二）

    4.AJAX 同源政策规定,AJAX请求只能发给同源的网址,否则就报错. 除了架设服务器代理(浏览器请求同源服务器,再由后者请求外部服务),有三种方法规避这个限制. JSONP WebSocket C ...

  6. js跨域详解

    跨域概念:Cross-origin resource sharing

  7. JavaScript中的跨域详解（一）

    同源策略 所谓的同源策略,指的是浏览器对不同源的脚本或者文本访问方式进行的限制. 所谓同源,就是指两个页面具有相同的协议,主机(也常说域名),端口,三个要素缺一不可. 同源政策的目的,是为了保证用户信 ...

  8. 004. 前端跨域资源请求： JSONP/CORS/反向代理

    1.什么是跨域资源请求? https://www.cnblogs.com/niuli1987/p/10252214.html 同源: 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有 ...

  9. 面试汇总——知道什么是同源策略吗？那怎么解决跨域问题？知道 JSONP 原理吗？

    本文是面试汇总分支——知道什么是同源策略吗?那怎么解决跨域问题?知道 JSONP 原理吗?. 同源策略 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能, ...

随机推荐

  1. 适合长期英语学习的电视、电台、podcast节目有哪些？

    1.Stuff You Should Know 非常有名的一个节目 直接在度娘搜索第一个就是官网,里面有videos和podcasts两种 Postcasts有特别多种类的主题, 每期介绍一个主题, ...

  2. mac清除launchpad 应用程序和图标

    打开launchpad显示所有的程序,有时候却无法删除一些应用图标和程序 用Spotlight(command+空格键),我们输入要删除的应用名称 我们按住Command再点回车, 搜索的结果就会在f ...

  3. linux系统中RAID5磁盘冗余阵列配置（5块磁盘）

    RAID5:需要至少三块(含)硬盘,兼顾存储性能.数据安全和储存成本. 如图所示”parity”块中保存的是其他硬盘数据的奇偶校验信息(并非其他硬盘的数据),以数据的奇偶校验信息来保证数据的安全,RA ...

  4. ng接口API开发文档

    接口版本:v1 接口协议:请商户对接使用对应的转账接口API和免转接口API,商户只能使用菜单对应的API,否则接口会调用失败.左侧菜单未注明的接口免转钱包和转账钱包可以共同使用所有采集均按照北京时间 ...

  5. ROS学习（二）运行keyboard

    1.ssh连接机器人 ./dora*.sh 启动roscore,相当于启动ros系统 roscore 2.另启终端,也就意味着重新ssh连接机器人, ./dora*.sh 运行wheel驱动 rosr ...

  6. PCL学习（二）三维模型转点云 obj转pcd----PCL实现

    #include <pcl/io/io.h> #include <pcl/io/pcd_io.h> #include <pcl/io/obj_io.h> #incl ...

  7. Sql 第一行某列减第二行某列

    --1. 将结果插入临时表SELECT *INTO xxx FROM( SELECT TOP 1 a.FQTY,a.fseq FROM T_SAL_ORDERENTRY as a WHERE FQTY ...

  8. IOS IAP APP内支付 Java服务端代码

    IOS IAP APP内支付 Java服务端代码   场景:作为后台需要为app提供服务,在ios中,app内进行支付购买时需要进行二次验证. 基础:可以参考上一篇转载的博文In-App Purcha ...

  9. 无线网卡SP-WL450U的驱动问题

    修改win10的设备驱动为需要的驱动,SP-WL450U的驱动问题 解决SP-WL450U的驱动问题,在电脑上安装无线网卡后,总是用不上5G信号,只能选择2.4G.重新安装程序后也不行,在反复试用后发 ...

  10. Django入门(下)

    一.创建APP 在每一个django项目中可以包含多个APP,相当于一个大型项目中的分系统.子模块.功能部件等.互相之间比较独立,但也有联系. 在pycharm下方的Terminal终端中输入命令: ...