如何在1分钟内完美解释什么是 JSONP 请求？

如何在1分钟内完美解释什么是 JSONP 请求？何为JSONPJSONP是JSON with Padding的略称，JSONP为民间提出的一种跨域解决方案，通过客户端的script标签发出的请求方式。

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

同源请求和跨域请求代码语言：javascript代码运行次数：0运行复制同源策略，它是由Netscape网景公司提出的一个著名的安全策略现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，域名，协议，端口相同。

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

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

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

JSONP的实现流程图示：https://cdn1.tianli0.top/gh/web-xc/iMG/posts/jsonp.jpg

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

代码语言：javascript代码运行次数：0运行复制window.myCallback = (res)=>{ //声明一个全局函数 'callback'，用于接收响应数据

console.log(res)

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

代码语言：javascript代码运行次数：0运行复制

....

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

代码语言：javascript代码运行次数：0运行复制myCallback({ //一个函数的调用，将数据作为参数传递进去，再将整个函数的调用返回给客户端

name:'ahreal',

age:18

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

代码语言：javascript代码运行次数：0运行复制

....

控制台输出

JSONP和AJAX请求的异同相同点：使用的目的一致，都是客户端向服务端请求数据，将数据拿回客户端进行处理。不同点：ajax请求是一种官方推出的请求方式，通过xhr对象去实现，jsonp是民间发明，script标签实现的请求。ajax是一个异步请求，jsonp是一个同步请求ajax存在同源检查，jsonp不存在同源检查，后端无需做解决跨域的响应头。ajax支持各种请求的方式，而jsonp只支持get请求ajax的使用更加简便，而jsonp的使用较为麻烦。面试到这里，JSONP的相关概念，已经阐述完毕，面试官问你JSONP请求的时候，两步走，1. JSONP是什么 2. JSONP怎么做。

代码语言：javascript代码运行次数：0运行复制面试官：说说JSONP请求吧。

我：JSONP请求首先是为了解决跨域问题而存在的一种民间解决方案balabala...

浏览器存在同源安全机制balabala...

通过标签的形式发请求balabala...

需要和后端同学进行约束balabala...

只能使用get请求balabala...答道这里JSONP这道题你已经回答了80分了，如果这时候你能够蹦出一句：

代码语言：javascript代码运行次数：0运行复制emm...我曾经使用原生js封装过一个jsonp的插件，balabala...那么你将会是100分的回答

代码语言：javascript代码运行次数：0运行复制可是我没封装过JSONP的插件啊喂！