JSON和JSONP之间有什么区别？

javascript json jsonp

2022-08-29 23:27:07

格式明智，文件类型明智和实际使用明智？

答案 1

JSONP是带有填充的JSON。也就是说，您在开头放置一个字符串，并在其周围放置一对括号。例如：

//JSON
{"name":"stackoverflow","id":5}
//JSONP
func({"name":"stackoverflow","id":5});

结果是，您可以将 JSON 作为脚本文件加载。如果之前设置了名为的函数，则在脚本文件完成加载时，将使用一个参数（即 JSON 数据）调用该函数。这通常用于允许具有 JSON 数据的跨站点 AJAX。如果您知道 example.com 正在提供类似于上面给出的JSONP示例的JSON文件，那么即使您不在 example.com 域中，也可以使用这样的代码来检索它：func

function func(json){
  alert(json.name);
}
var elm = document.createElement("script");
elm.setAttribute("type", "text/javascript");
elm.src = "http://example.com/jsonp";
document.body.appendChild(elm);

答案 2

基本上，由于同源策略，您不允许通过AJAX从另一个域请求JSON数据。AJAX 允许您在页面加载后获取数据，然后在返回后执行一些代码/调用函数。我们不能使用AJAX，但我们被允许将标签注入我们自己的页面，并且允许这些标签引用在其他域中托管的脚本。<script>

通常，您可以使用它来包含来自CDN（例如jQuery）的库。但是，我们可以滥用它并用它来获取数据！JSON已经是有效的JavaScript（在大多数情况下），但我们不能只在脚本文件中返回JSON，因为我们无法知道脚本/数据何时完成加载，除非它被分配给变量或传递给函数，否则我们无法访问它。因此，我们要做的是告诉 Web 服务在函数准备就绪时代表我们调用函数。

例如，我们可能会从证券交易所API请求一些数据，并且除了我们常用的API参数外，我们还会给它一个回调，比如.然后，Web 服务使用我们的函数包装数据，并返回如下：。现在，一旦脚本加载，您的浏览器将尝试执行它（正常），这反过来又调用我们的任意函数并向我们提供所需的数据。?callback=callThisWhenReadycallThisWhenReady({...data...})

它的工作方式与普通的AJAX请求非常相似，除了我们必须使用命名函数而不是调用匿名函数。

jQuery实际上通过为您创建一个唯一命名的函数并将其传递出去来无缝地支持这一点，然后该函数将反过来运行您想要的代码。