什么是 JSONP，为什么要创建它？

一尘不染

javascript

我了解 JSON，但不了解 JSONP。维基百科关于 JSON 的文档是（曾经）JSONP 的最高搜索结果。它是这样说的：

JSONP 或“带填充的 JSON”是 JSON 扩展，其中前缀被指定为调用本身的输入参数。

嗯？什么电话？这对我来说没有任何意义。JSON 是一种数据格式。没有电话。

第二个搜索结果来自某个人，他写了这个关于 JSONP 的内容：

JSONP 是脚本标签注入，将来自服务器的响应传递给用户指定的函数。

我可以理解这一点，但它仍然没有任何意义。

那么什么是 JSONP？为什么创建它（它解决了什么问题）？我为什么要使用它？

阅读 142

2022-02-08

共1个答案

一尘不染

其实也不是很复杂…

假设您在 domain 上example.com，并且想要向 domain发出请求example.net。为此，您需要跨越域边界，这是大多数浏览器领域的禁忌。

绕过此限制的一项是<script>标签。当您使用脚本标签时，域限制被忽略，但在正常情况下，您无法对结果做任何事情，脚本只是被评估。

输入JSONP。当您向启用 JSONP 的服务器发出请求时，您会传递一个特殊参数，该参数会告诉服务器一些关于您的页面的信息。这样，服务器就能够以您的页面可以处理的方式很好地包装其响应。

例如，假设服务器需要调用一个参数callback来启用其 JSONP 功能。那么您的请求将如下所示：

http://www.example.net/sample.aspx?callback=mycallback

如果没有 JSONP，这可能会返回一些基本的 JavaScript 对象，如下所示：

{ foo: 'bar' }

然而，使用 JSONP，当服务器接收到“回调”参数时，它会稍微不同地包装结果，返回如下内容：

mycallback({ foo: 'bar' });

如您所见，它现在将调用您指定的方法。因此，在您的页面中，您定义了回调函数：

mycallback = function(data){
  alert(data.foo);
};

现在，当脚本被加载时，它将被评估，并且你的函数将被执行。瞧，跨域请求！

还值得注意的是 JSONP 的一个主要问题：您失去了对请求的大量控制。例如，没有“好”的方式来获取正确的故障代码。结果，您最终使用计时器来监视请求等，这总是有点可疑。JSONRequest的提议是一个很好的解决方案，它允许跨域脚本、维护安全性和允许对请求进行适当的控制。

这些天（2015 年），CORS是推荐的方法，而不是 JSONRequest。JSONP 对于较旧的浏览器支持仍然有用，但考虑到安全隐患，除非您别无选择，否则 CORS 是更好的选择。

2022-02-08