点击上方 前端Q,关注公众号
回复加群,加入前端Q技术交流群
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
往期推荐
最后
欢迎加我微信,拉你进技术群,长期交流学习...
欢迎关注「前端Q」,认真学前端,做个专业的技术人...
点个在看支持我吧