2022-04-24 jsonp跨域的原理和例子

前端OnTheRun

已于 2022-10-05 16:32:19 修改

阅读量174

点赞数

分类专栏：笔记项目与应用文章标签： js json jsonp 跨域同源策略

于 2022-04-24 23:46:53 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/124394892

版权

笔记同时被 2 个专栏收录

82 篇文章

订阅专栏

项目与应用

59 篇文章

订阅专栏

本文详细介绍了JSONP的原理，包括为何要跨域、JSONP的工作方式、跨域实例、接口命名规范、JSONP的局限性及其解决办法，并通过实际案例和jQuery的使用展示了JSONP在跨域请求中的应用。

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

文章目录

1.什么是jsonp

jsonp是json+padding是json的一种"使用模式",可以让网页json从别的域名(网页)拿到数据,即跨域获取数据

2.为什么要跨域

因为同源策略:域名,端口号,协议

3.[面试题]jsonp跨域的原理是什么?

        动态创建script标签,它的src属性的指向不受同源限制
        指向返回一个接口,这个接口的格式一定是函数表达式:函数名()

4,跨域例子

代码

index.html

<button>jsonp</button>
<script>
    function test(obj) {
        console.log(obj);
    }
    document.querySelector("button").onclick = function() {
        var oScript = document.createElement("script");
        oScript.src = "./jsonp.js";
        document.body.appendChild(oScript);
    }
</script>

:jsonp.js

test({ name: "zs" });

结果

输出:{name: ‘zs’}

5.接口名必须前后端名称一样

例子

<script>
    function callbackFunction(obj) {//必须叫callbackFunction才能拿到数据
        console.log(obj);
    }
    document.querySelector("button").onclick = function() {
        var oScript = document.createElement("script");
        oScript.src = "https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction";//callbackFunction也可以改成别的名字
        document.body.appendChild(oScript);
    }
</script>

结果

(2) [‘customername1’, ‘customername2’]

6.jsonp的缺点

6.1.产生大量无用的script标签

解决:在onload中删除script标签
代码:

function cb(obj) {
    console.log(obj);
}
document.querySelector("button").onclick = function() {
    var oScript = document.createElement("script");
    oScript.src = "https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=cb";
    document.body.appendChild(oScript);
    //删除oScript标签
    oScript.onload = function() {
        oScript.remove();
    }
}

6.2.只能GET请求,不能POST,PUT,DELETE

7.jsonp跨域案例:同步百度的搜索栏

详见:2021-06-21 使用ajax设置同步百度的搜索栏

8.jQuery的jsonp跨域请求

例子1

<div id="box"></div>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script>
    $("#box").css({
        "width": 300,
        'height': 100,
        "background": "pink",
    });
    /*
    https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction
    */
    $("#box").on("click", function() {
        $.ajax({
            url: "https://www.runoob.com/try/ajax/jsonp.php",
            dataType: "jsonp",
            jsonp: "jsoncallback",
            jsonpCallback: "test"
        });
    });

    function test(res) {
        console.log(res);
    }
</script>

结果

点击box,输出(2) [‘customername1’, ‘customername2’]
在这里插入图片描述
发现url已自动拼接好(后面数字是时间戳)

[推荐]例子2:格式改进,不需要自己写回调名

        $("#box").on("click", function() {
            $.ajax({
                url: "https://www.runoob.com/try/ajax/jsonp.php",
                dataType: "jsonp",
                jsonp: "jsoncallback",
                // jsonpCallback: "test"
                success: (res) => {
                    console.log(res);
                }
            });
        });