33、JSONP跨域

最新推荐文章于 2025-05-27 17:57:47 发布

原创最新推荐文章于 2025-05-27 17:57:47 发布 · 100 阅读

CC 4.0 BY-SA版权

博客介绍了JSONP跨域相关知识。因浏览器安全限制，Ajax无法跨域，而JSONP可以。其原理是将函数执行部分放于服务器。还阐述了JSONP优缺点，如能跨越同源策略但只支持GET请求等，最后介绍了原生和jQuery实现JSONP跨域请求数据的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

33、JSONP跨域

跨域请求数据也是可以的，只不过Ajax这技术不行，而JSONP这种数据格式可以进行跨域。很多年前，浏览器是没有跨域限制的，可以正常跨域，浏览器为了安全和隐私限制了Ajax跨域

JSONP原理就是：将函数执行的部分，放到了服务器上面。

JSONP的优缺点：

优点:

与利用XHR对象发送Ajax请求不同，JSONP可以跨越同源策略；
JSONP的兼容性好，可以在众多浏览器中运行。

缺点：

只支持GET一种类型的HTTP请求，应用场景有限；
调用失败时缺少必要的提示信息，不方便排查问题；
存在一定的安全风险，但可以使用Referer和Token校验进行规避；
不便于控制；
没有回调函数的功能。

原生JSONP跨越请求数据

如果想获取别人服务器上的JSONP数据，你必须声明一个和别人服务器上的同名函数（也可以改名）

        <div id='btn'>
        按钮
    </div>

        <script type="text/javascript">
            // 封装成方法
         var btn = document.getElementById("btn");

         function JSONP(url, callback){
            //给传进来的匿名函数起名，并定义在全局,window.回调函数名
            window.jQuery1102018240398381236766_1558663885975 = callback;
            //创建DOM
            var oscript = document.createElement('script');
            oscript.src = url;
            //上树
            document.body.appendChild(oscript);
            //过河拆桥，拿完下树
            document.body.removeChild(oscript);
         }

         //发起请求
         btn.onclick = function(){
            JSONP("https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1457,21101,18559,29063,28519,29098,28720,28964,28835,28585,26350&wd=abc&req=2&csor=3&pwd=ab&cb=jQuery1102018240398381236766_1558663885975&_=1558663885984", function(data){
                console.log(data);  //data数据是从函数执行部分传过来的
            })
         }
    </script>

jQuery的JSONP跨域

jQuery对JSONP进行了封装，jsonCallback就是传进去的函数名字

        <div id='btn2'>
        按钮2
    </div>
        <script>
    // jquery 的jsonp
        var btn2 = document.getElementById("btn2");
        btn2.onclick = function(){
            $.ajax({
               url:"https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1457,21101,18559,29063,28519,29098,28720,28964,28835,28585,26350&wd=abc&req=2&csor=3&pwd=ab&cb=?&_=1558663885984",
               dataType:"jsonp",
               // jsonpCallback:"jQuery1102018240398381236766_1558663885975",
               success:function(data){
                   console.log(data)
               }
            })
        }
    </script>