javascript - 什么是 JSONP,为什么要创建它?

标签 javascript json jsonp terminology

我理解 JSON,但不理解 JSONP。 Wikipedia's document on JSON是(曾经)是 JSONP 的最高搜索结果。它是这样说的:

JSONP or "JSON with padding" is a JSON extension wherein a prefix is specified as an input argument of the call itself.

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

2nd search result来自一个名叫 Remy 的人,谁写了这篇关于 JSONP 的文章:

JSONP is script tag injection, passing the response from the server in to a user specified function.

我能有点理解,但它仍然没有任何意义。


那么什么是JSONP?为什么创建它(它解决了什么问题)?我为什么要使用它?


附录:我刚刚创建了a new page for JSONP在维基百科上;它现在基于 jvenema 对 JSONP 进行了清晰而全面的描述。的答案。

最佳答案

其实并没有太复杂...

假设您在域 example.com ,并且您想向域 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 是更好的选择。

关于javascript - 什么是 JSONP,为什么要创建它?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39831828/

相关文章:

javascript - 递归 promise ?

ios - 使用Swift解析嵌套JSON数据的正确方法是什么?

angular - 使用 Angular 2 和服务器 ASP.NET 核心获取错误 "JSONP injected script did not invoke callback."

jquery - JSONP 请求错误处理

javascript - 链接标记显示 block 未拉伸(stretch)全宽

javascript - File.dataDirectory 在 Ionic 2 中不起作用

Php脚本获取json字符串中目录中所有图像的url

java - 使用gson将json数组转换为android中的json对象?

jquery - WCF:使用 JSONP 将来源列入白名单

javascript - Protractor 找不到 Angular