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

那么什么是跨域呢，我们来看官方给出的解释：浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的（所谓同源是指，域名，协议，端口均相同，只要有一个不相同即为跨域），是浏览器对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. OWASP TOP 10（OWASP十大应用安全风险）

    TOP1-注入 当不受信任的数据作为命令或查询的一部分发送到解释器时,会发生注入漏洞,例如SQL,NoSQL,OS,LDAP注入(轻量目录访问协议),xpath(XPath即为XML路径语言,它是一种 ...

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

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

  3. 用户登录时，禁止chrome提示用户保存密码

    将input的type=“password”改为type=“text” 在获得焦点后,将type改为password <input class="iptpsw form-control ...

  4. input标签自动填充问题

    <input type='text' placeholder='手机号' /> <input type='text' placeholder='地址' /> <input ...

  5. eNSP——ACL基础设置

    原理: 实验案例: 拓补图: 实验编址: 1.基础设置 根据实验编址进行基础设置,并检测直连链路的连通性. 2.搭建OSPF网络 在所有路由器运行OSPF协议,通告相应网段到区域0. 在上一个随笔有详 ...

  6. 学习笔记：oracle学习二：oracle11g数据库sql*plus命令之数据库交互、设置运行环境

    目录 1.SQL*PLUS与数据库的交互 2.设置sql*plus运行环境 2.1 set命令简介 2.2 使用set命令设置运行环境 2.2.1 pagesize变量 2.2.2 NEWPAGE变量 ...

  7. c#,绝对值

    Console.WriteLine("输入任意整数"); var n = int.Parse(Console.ReadLine()); var num = Math.Abs(n); ...

  8. K8S从入门到放弃系列-(7)kubernetes集群之kube-scheduler部署

    摘要: 1.Kube-scheduler作为组件运行在master节点,主要任务是把从kube-apiserver中获取的未被调度的pod通过一系列调度算法找到最适合的node,最终通过向kube-a ...

  9. Java操作word转pdf

    如果转换后出现乱码,是doc格式的文档的话请转换为docx!!! 下载相关jar包和一个授权到2099年的凭证文件. 链接: https://pan.baidu.com/s/1xudkKqR1-TLL ...

  10. MySQL 子查询（三） 派生表、子查询错误

    From MySQL 5.7 ref:13.2.10.8 Derived Tables 八.派生表 派生表是一个表达式,用于在一个查询的FROM子句的范围内生成表. 例如,在一个SELECT查询的FR ...