谁能通俗地解释一下 JSONP 是什么？

Question

我知道 JSONP 是带有填充的 JSON 。

我了解 JSON 是什么，以及如何将其与 jQuery.getJSON()< 一起使用/a>.但是，我在引入JSONP时不理解callback的概念。

谁能向我解释这是如何工作的？

Answer 1

前言：

这个答案已有六年多了。虽然JSONP的概念和应用没有改变
（即答案的详细信息仍然有效），您应该
尽可能使用 CORS
（即您的服务器或
API 支持它，并且
浏览器支持就足够了），
因为 JSONP 具有固有的安全风险。

---

JSONP（JSON with Padding）是一种常用的方法
绕过网络浏览器中的跨域策略。 （不允许向浏览器认为位于不同服务器上的网页发出 AJAX 请求。）

JSON 和 JSONP 在客户端和服务器上的行为不同。 JSONP 请求不是使用 XMLHTTPRequest 和关联的浏览器方法分派的。相反，会创建一个

JSON 请求：

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    // success
  };
};

xhr.open("GET", "somewhere.php", true);
xhr.send();

JSONP 请求：

var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';

document.getElementsByTagName("head")[0].appendChild(tag);

---

JSON 响应和 JSONP 响应之间的区别在于 JSONP 响应对象作为参数传递给回调函数。

JSON：

{ "bar": "baz" }

JSONP：

foo( { "bar": "baz" } );

---

这就是为什么您会看到包含回调参数的 JSONP 请求，以便服务器知道包装响应的函数名称。

在浏览器评估

---

JSON 响应和 JSONP 响应的处理之间需要注意的另一个区别是，可以通过包装评估响应文本的尝试来捕获 JSON 响应中的任何解析错误
在 try/catch 语句中。由于 JSONP 响应的性质，响应中的解析错误将导致无法捕获的 JavaScript 解析错误。

两种格式都可以通过在发起请求之前设置超时并在响应处理程序中清除超时来实现超时错误。

---

使用 jQuery

使用 jQuery 发出 JSONP 请求的有用之处在于 jQuery < em>所有工作都在后台为您完成。

默认情况下，jQuery 要求您在 AJAX 请求的 URL 中包含 &callback=?。 jQuery 将采用您指定的 success 函数，为其分配一个唯一的名称，并将其发布到全局范围内。然后，它会将 &callback=? 中的问号 ? 替换为其分配的名称。

---

类似的 JSON/JSONP 实现

以下假设响应对象 { "bar" : "baz" }

JSON:

var xhr = new XMLHttpRequest();

xhr.onreadystatechange = function () {
  if (xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById("output").innerHTML = eval('(' + this.responseText + ')').bar;
  };
};

xhr.open("GET", "somewhere.php", true);
xhr.send();

JSONP:

function foo(response) {
  document.getElementById("output").innerHTML = response.bar;
};

var tag = document.createElement("script");
tag.src = 'somewhere_else.php?callback=foo';

document.getElementsByTagName("head")[0].appendChild(tag);

Answer 2

假设您有一些 URL 为您提供了 JSON 数据，例如：

{'field': 'value'}

...并且您有一个类似的 URL，只不过它使用 JSONP，您向该 URL 传递了回调函数名称“myCallback”（通常通过为其提供一个名为“callback”的查询参数来完成） ，例如http://example.com/dataSource?callback=myCallback）。然后它会返回：

myCallback({'field':'value'})

...这不仅仅是一个对象，而且实际上是可以执行的代码。因此，如果您在页面中的其他位置定义一个名为 myFunction 的函数并执行此脚本，则会使用 URL 中的数据来调用该函数。

最酷的一点是：您可以创建一个脚本标记并使用您的 URL（带有 callback 参数）作为 src 属性，浏览器将运行它。这意味着您可以绕过“同源”安全策略（因为浏览器允许您从页面域以外的源运行脚本标记）。

这就是 jQuery 在发出 ajax 请求时所做的事情（使用 .ajax 以“jsonp”作为 dataType 属性的值）。例如

$.ajax({
  url: 'http://example.com/datasource',
  dataType: 'jsonp',
  success: function(data) {
    // your code to handle data here
  }
});

，在这里，jQuery 负责处理回调函数名称和查询参数 - 使 API 与其他 ajax 调用相同。但与其他类型的 ajax 请求不同，如上所述，您不限于从与页面相同的来源获取数据。

Answer 3

JSONP 是一种绕过浏览器同源策略的方法。如何？像这样：

此处的目标是向 otherdomain.com 发出请求，并在响应中提醒名称。通常我们会发出 AJAX 请求：

$.get('otherdomain.com', function (response) {
  var name = response.name;
  alert(name);
});

但是，由于请求发送到不同的域，因此它不起作用。

不过，我们可以使用 和 $.get('otherdomain.com') 都会导致相同的请求made：

GET otherdomain.com

问：但是如果我们使用

答：呃，我们不能。但这是我们可以做的 - 定义一个使用响应的函数，然后告诉服务器使用 JavaScript 进行响应，该 JavaScript 调用我们的函数并将响应作为其参数。

问：但是如果服务器不为我们执行此操作，而只愿意返回 JSON 给我们怎么办？

A: 那我们就不能使用它了。 JSONP需要服务器配合。

问：必须使用

答：像 jQuery 这样的库让它变得更好。例如：

$.ajax({
    url: "http://otherdomain.com",
    jsonp: "callback",
    dataType: "jsonp",
    success: function( response ) {
        console.log( response );
    }
});

它通过动态创建

问：

A：那么 JSONP 对我们就不起作用了。

问：没关系，我只想发出 GET 请求。 JSONP 太棒了，我要去使用它 - 谢谢！

A：事实上，这并没有那么了不起。这实际上只是一个黑客行为。而且它并不是最安全的。既然 CORS 可用，您应该尽可能使用它。

Answer 4

我发现了一篇有用的文章，它也非常清晰且简单地解释了该主题。链接是 JSONP

一些值得注意的点是：

1. JSONP 早于 CORS。
2. 它是一种从不同域检索数据的伪标准方法，
3. 它具有有限的 CORS 功能（仅限 GET 方法），

工作原理如下：

2. 当执行步骤 1 时，它会感知到具有相同函数名称（如 url 参数中给出）的函数作为响应。
3. 如果代码中存在给定名称的函数，则将使用作为该函数的参数返回的数据（如果有）来执行该函数。