一分钟说完JSONP请求，面试满分答案

最新推荐文章于 2023-04-13 22:51:55 发布

时清云

最新推荐文章于 2023-04-13 22:51:55 发布

阅读量155

点赞数 1

分类专栏：知识体系笔记 javascript 文章标签： JSONP 何为JSONP JSONP请求 JSONP的实现流程 JSONP和AJAX请求的异同

原文链接：https://juejin.cn/post/6844903976505344013

版权

笔记同时被 3 个专栏收录

110 篇文章 1 订阅

订阅专栏

javascript

108 篇文章 2 订阅

订阅专栏

知识体系

74 篇文章 0 订阅

订阅专栏

Hi~，今天我们来聊聊面试官很喜欢问，但是平时开发又没什么卵用的JSONP请求吧😫

何为JSONP

JSONP是JSON with Padding的略称，JSONP为民间提出的一种跨域解决方案，通过客户端的script标签发出的请求方式。

那请求何必做得如此麻烦，直接使用ajax做请求岂不美哉，这里便要涉及到一个同源和跨域的问题，往下。

同源请求和跨域请求

同源策略，它是由Netscape网景公司提出的一个著名的安全策略。

现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。

而所有非同源的请求（即域名，协议，端口其中一种或多种不相同），都会被作为跨域请求，浏览器会将其非同源的响应数据丢弃。

这里可以理解为是浏览器在搞事情，服务端确确实实有返回数据，浏览器接收到返回的数据，发现我们请求的是一个非同源的数据，浏览器再将其响应报文丢弃掉。

而通过一些标签发出的请求则不会被进行同源检查，比如script标签，img标签等等，本文讲述JSONP便是通过script标签做的请求。

JSONP的实现流程

图示：
在这里插入图片描述

流程：

1、在发请求前，先准备一个全局的接收函数

window.myCallback = (res)=>{   //声明一个全局函数 'callback'，用于接收响应数据
   console.log(res)
}

2、在html创建script标签，发出请求

<html>
....
<script>  
 window.myCallback = (res)=>{   //这里为上一步定义的全局函数
  console.log(res)
 }
</script>
<script url="xxx?callback=myCallback">
   //script标签的请求必须在写在定义全局函数之后
   //这里需将全局函数的函数名作为参数callback的value传递
   //这里callback这个键名是前后端约定好的
</script> 
</body>
</html>

3、服务端接收到请求，将如下数据响应返回

myCallback({   //一个函数的调用，将数据作为参数传递进去，再将整个函数的调用返回给客户端
name:'ahreal',
age:18
})

4、客户端接收到服务端的响应，相当于：

<html>
....
<script>  
 window.myCallback = (res)=>{   //这里为上一步定义的全局函数
  console.log(res)
 }
</script>
<script>       //将接收到的数据作为script标签里面的内容展开执行
    myCallback({     
        name:'ahreal',
        age:18
    })      
</script> 
</body>
</html>