JSONP道理及完成跨域体式格局

2024年1月3日 261次阅读 来源: 别天

本日做页面时，背景给了个接口：https://a.a.com/a/a.json,我页面的上线地点是：http://b.b.com。
不言而喻，由于浏览器同源战略的限定，经由过程ajax没法没法获得json的数据。

百度百科

同源战略，它是由Netscape提出的一个有名的安全战略。如今一切支JavaScript的浏览器都邑运用这个战略。

    所谓同源是指，域名，协定，端口雷同。当一个浏览器的两个tab页中离别打开来 百度和谷歌的页面当浏览器的百度tab页实行一个剧本的时刻会搜检这剧本是属于哪一个页面的，即搜检是不是同源，只要和百度同源的剧本才会被实行。

同源战略限定了我们没法经由过程原生的XMLHttpRequest()对象猎取到json数据。为了打破这个限定，我们的先辈们想出了一个处置惩罚方案：jsonp。

jsonp并不是新的数据格式，而是处置惩罚JSON跨域猎取的处置惩罚方案。经由过程JSONP猎取到得数据已不是JSON了，而是JS范例的数据（大部分是对象）。

上网找过许多讲jsonp的文章，大部分都是讲的迷迷糊糊的。jsonp的道理实在不庞杂：

   1、浏览器的同源战略把跨域要求都制止了；
   2、HTML的<script>标签是破例，能够打破同源战略从其他泉源猎取数据；
   3、由上可得，我们能够经由过程<script>标签引入jsonp文件，然后经由过程一系列JS操纵猎取数据。

上面三点就是JSONP完成跨域的道理。

道理我们知道了，该怎样完成这些操纵呢？
接下来轮到jQuery上台！JQ已帮我们封装好了
demo:

        $.ajax({
            dataType:'jsonp',
            jsonp:'jsonp_callback',
            url:'http://www.baidu.com/xxx.jsonp',
            success:function(){
                //dosomthing
            }
        });

原生JS demo：

    function( url ) jsonHandle{
        var script = document.createElement("script");
        script.setAttribute("src",url);
        document.getElementsByTagName("body")[0].appendChild(script);
    }
    //JS插进去以后就能够处置惩罚数据了
    原文作者：别天
    原文地址: https://segmentfault.com/a/1190000002799156
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞