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

最新推荐文章于 2023-12-12 09:56:15 发布

前端瓶子君

最新推荐文章于 2023-12-12 09:56:15 发布

阅读量163

点赞数

文章标签： java 面试 js javascript jsonp

原文链接：https://mp.weixin.qq.com/s?__biz=MzUzNjk5MTE1OQ==&mid=2247519294&idx=1&sn=67c3c823107505b817f40ff01b35f84c&chksm=faef08e6cd9881f0b353d0034ef2ca0499e9ede53f162a09d84c06db5a70203fbd141de945b6&scene=126&&sessionid=0

版权

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

何为JSONP

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

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

同源请求和跨域请求

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

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

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

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

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

JSONP的实现流程

图示：

流程：

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

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

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

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

服务端接收到请求，将如下数据相应回

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

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

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

控制台输出

JSONP和AJAX请求的异同

相同点：

使用的目的一致，都是客户端向服务端请求数据，将数据拿回客户端进行处理。

不同点：

ajax请求是一种官方推出的请求方式，通过xhr对象去实现，jsonp是民间发明，script标签实现的请求。
ajax是一个异步请求，jsonp是一个同步请求
ajax存在同源检查，jsonp不存在同源检查，后端无需做解决跨域的响应头。
ajax支持各种请求的方式，而jsonp只支持get请求
ajax的使用更加简便，而jsonp的使用较为麻烦。

面试

到这里，JSONP的相关概念，已经阐述完毕，面试官问你JSONP请求的时候，两步走，1. JSONP是什么 2. JSONP怎么做。

面试官：说说JSONP请求吧。
我：JSONP请求首先是为了解决跨域问题而存在的一种民间解决方案balabala...
    浏览器存在同源安全机制balabala...
    通过标签的形式发请求balabala...
    需要和后端同学进行约束balabala...
    只能使用get请求balabala...
复制代码

答道这里JSONP这道题你已经回答了80分了，如果这时候你能够蹦出一句：

emm...我曾经使用原生js封装过一个jsonp的插件，balabala...
复制代码

那么你将会是100分的回答，那很多同学可能会问，

可是我没封装过JSONP的插件啊喂！
复制代码

别着急，我为你准备了另外一篇封装JSONP请求插件的博客，里面完整的阐述了思路和代码的实现。我非常建议你好好读一下，这将对你学习JSONP的请求有巨大的帮助。

关于本文

作者“为什么学不完啊

https://juejin.cn/post/6844903976505344013

最后

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

前端瓶子君

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
一分钟说完JSONP请求，面试满分答案

Hi~，今天我们来聊聊面试官很喜欢问，但是平时开发又没什么卵用的JSONP请求吧????何为JSONPJSONP是JSON with Padding的略称，JSONP为民间提出的一种跨域解决方案，通过客户端的script标签发出的请求方式。那请求何必做得如此麻烦，直接使用ajax做请求岂不美哉，这里便要涉及到一个同源和跨域的问题，往下。同源请求和跨域请求同源策略，它是由Netscape网景公司提出的一个...
复制链接

扫一扫