jsonp介绍

陌一一

已于 2022-11-16 17:58:01 修改

阅读量3.2k

点赞数 4

分类专栏： web前端开发文章标签：前端 javascript 开发语言 web

于 2022-11-16 12:33:56 首次发布

本文链接：https://blog.csdn.net/a1598452168YY/article/details/127879262

版权

web前端开发专栏收录该内容

281 篇文章 16 订阅

订阅专栏

为什么要知道jsonp，jsonp的作用是什么：

Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）获取资料，即跨域读取数据。
原则上浏览器是不允许请求不同域名的数据的，但是跨域取数据是经常要用的，jsonp就可以解决这个问题。
为什么我们从不同的域（网站）访问数据需要一个特殊的技术( JSONP )呢？这是因为同源策略。

同源策略介绍：

同源策略：同域名同端口号同协议；
浏览器有一个“同源策略”的规则：只有在同域名同端口号和同协议下才能进行数据的请求和传输；
不符合同源策略的，浏览器为了安全，会阻止请求；

针对同源策略的解决办法：

为了能够访问到不同域名的数据，有两种解决办法：
第一就是：cors，由后端设置：Access-Control-Allow-Origin：*
这也就是为什么有一些数据可以跨域访问，因为它们后端设置了允许指定接口或者允许所有接口去访问；
这个设置可以在Response Headers里看到；

CORS是一种允许当前域（domain）的资源（比如html/js/web service）被其他域（domain）的脚本请求访问的机制；

第二就是：jsonp，由前后端协作去设置；

jsonp的设置：

第一种解决办法cors因为是后端设置的，我们无法控制，那我们就可以去控制jsonp来实现跨域问题；

jsonp的原理：（面试重点）

动态创建script标签，src属性指向没有跨域限制；指向一个接口，接口返回的格式一定是***（）函数表达式

代码解释：

访问的接口数据是：

代码：

<body>
    <button id="mybtn">jsonp</button>

    <script>
        //调用这个数据里面的函数，拿回来请求的数据
        function callbackFunction(obj) {
            console.log(obj)
        }

        mybtn.onclick = function () {
            var oscript = document.createElement("script")//动态创建script节点
            oscript.src = `https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=callbackFunction`//请求数据的地址
            document.body.appendChild(oscript)//将节点插入到body里面
        }
    </script>
</body>

结果：

设置jsonp要满足的条件是：就是满足原理的几点

动态创建script标签；
指向一个接口，这个接口里的数据必须是“函数名（[ ]）”这样格式的；
所以这就需要后端配合，后端接口形式必须是“函数名（[ ]）”的；
而且要在代码中调用这个函数，也就是这段代码的含义：
这个函数名要和网址中的函数名保持一致，不一致拿不到数据；
这时候我们可以前端设置这个接口名字，也就是这个函数名，因为我们刚开始调用这个函数的时候，不知道这个函数名是什么，这时候我们就可以使用我们自己定义的函数名，然后更改网址中的路径；

把这个函数名改成我们自己定义的，访问这个地址：

结果：

然后结果也能拿到我们要的数据：

jsonp设置的缺点：

两个缺点：

onload删除script标签；
只能get请求，不能post、put、patch、delete请求；

删除script标签：
我们在设置jsonp时，会出现的一个问题是：我们每请求一次数据它就动态创建了一个script节点把它插入到body里面，我们其实代码中创建完script，第二步设置src，在第三步将script标签插入到body里，就拿到数据了，但是我们没必要留着这个script标签，所以就要在插入标签，拿到数据以后，就把这个标签给删了。
所以我们需要有一个删除script节点的事情要做：

插入了很多script标签：

删除代码：

oscript.onload = function(){
                //删除当前节点
                oscript.remove()
            }

完整代码：

<body>
    <button id="mybtn">jsonp</button>
    <script>
        //调用这个数据里面的函数，拿回来请求的数据
        function test(obj) {
            console.log(obj)
        }
        mybtn.onclick = function () {
            var oscript = document.createElement("script")//动态创建script节点
            oscript.src = `https://www.runoob.com/try/ajax/jsonp.php?jsoncallback=test`//请求数据的地址
            document.body.appendChild(oscript)//将节点插入到body里面

            oscript.onload = function(){
                //删除当前节点
                oscript.remove()
            }
        }
    </script>
</body>

就是先把这个script标签插入到body中，然后再把它删掉，这样我们已经拿到数据了，标签留着也没用了；

这里纠正一个错误的认识：

有些人可能觉得既然要把插入的script删掉，那就当初不要插入标签，因为第二步设置完了src路径以后，不就拿到数据了。
不是的
这里是第一步创建script标签，第二步设置src路径，第三步是将script标签插入到body里；
只有当最后一步将script标签插入到body里才能拿到数据，并不是第二步就拿到数据了；
所以我们需要先把script标签插入到body里，然后拿到数据以后，再删除script标签。