有人可以解释我如何像我五岁那样进行 JSONP 调用吗？ [复制]

Posted 2023-03-03

【中文标题】有人可以解释我如何像我五岁那样进行 JSONP 调用吗？ [复制]

【英文标题】：Can someone explain me how to do a JSONP call like I'm five? [duplicate]

【发布时间】：2013-10-27 17:59:51

【问题描述】：

我已经在服务器中有一个 .json 对象。它是正确的并且没有语法错误（有效的 json）。我想通过 JSONP 调用这个对象，因为它驻留在与我的应用不同的服务器中。

我想我了解如何在客户端方面实现它，但我不知道如何处理与服务器部分相关的内容。在关注网络上已有的信息时，我总是遇到错误。有什么帮助吗？

【问题讨论】：

什么语言（php、ruby、java、c#、...）？

javascript/jquery，对不起

你的意思是我正在使用的服务器脚本吗？在这种情况下，PHP

你妈妈和爸爸给你 10 美元，让你开个柠檬水摊……等等……

【参考方案1】：

JSONP 基本上是一种“黑客”，允许网站加载数据并忽略same-origin policy。它通过将<script> 标记附加到您的页面来工作。

事实上的方式是在您的请求中发送回调。然后，服务器将采用该名称并生成一个 JS 文件，该文件使用数据调用该函数。

使用 jQuery，您可以通过在执行 $.getJSON 时简单地将 ?callback=? 附加到您的 URL 来进行 JSONP 调用。

例子：

$.getJSON('http://YourSite.com/path/to/json.php?callback=?', function(data)
    console.log(data); // this will be parsed for you
);

或者，您可以使用完整的$.ajax 方法：

$.ajax(
    url: 'http://YourSite.com/path/to/json.php',
    dataType: 'jsonp', // this tells jQuery to add "callback=?" for you
    success: function(data)
        console.log(data); // this will be parsed for you
    
);

jQuery 将实际追加而不是进行 AJAX 调用：

<script src="http://YourSite.com/path/to/json.php?callback=jQuery12345"></script>

到您的页面（注意：jQuery12345 将随机生成）。

然后在您的服务器上，您需要使用有效的 JavaScript 文件进行响应。它应该包含对在查询字符串中传递的callback 函数的调用。像这样的：

jQuery12345(your: ['json', 'data']);

PHP 中的一个示例（适应您使用的任何服务器端语言）可能是：

$array = ['a' => 1, 'b' => 2,'c' => 3];
$callback = $_GET['callback'];

header('Content-type: text/javascript');
echo "$callback(".json_encode($array).");";

仅此而已。有关更多信息，请参阅 JSONP 的 Wikipedia 页面：http://en.wikipedia.org/wiki/JSONP

【讨论】：

PHP 部分是我需要阅读的内容。我会尝试的，我希望它有效。谢谢！

成功了，再次感谢伙计！

不客气：-D

【参考方案2】：

JSONP 与 JSON 无关。这是一个简单（但无用）的示例：

客户端制作了一个脚本元素：<script src="http://example.com/foo.js>。这会导致浏览器从example.com 获取foo.js。

服务器听到foo.js的请求。服务器将foo.js 的内容提供给客户端（假设它只是alert(1)）。

客户端获取foo.js的内容并将这些内容作为脚本运行。 （所以，客户端执行alert(1)。）

这有什么用？好吧，您可以将参数与您的请求一起传递给 foo.js：

客户做<script src="http://example.com/foo.js?arg=123>

服务器听到对foo.js?arg=123的请求。服务器对arg 值做了一些事情——假设它将它乘以2（但它可以做一些有用的事情，比如用uid 123 查找用户的用户名）。然后服务器发回脚本内容alert(246)。

**客户端从服务器运行脚本并提醒246。

好的，如果我希望客户提供alert 的东西，那就太好了，但是我怎样才能做一些有用的事情呢？我们要做的只是最后一个飞跃：提供名称客户端函数作为参数：

客户端将函数myFunc定义为：function myFunc(a) alert(a)

客户做<script src="http://example.com/foo.js?callback=myFunc&arg=123>

服务器听到对foo.js?callback=myFunc&arg=123的请求，它的服务器端脚本知道它应该使用callback参数作为foo.js中调用的函数的名称。服务器发回脚本内容myFunc(246)。

客户端运行myFunc(246)。在这里，我们指定 myFunc 只是提醒它的参数，但你可以让它做任何你喜欢的事情。

这就是 JSONP 的工作原理。 客户端在脚本 URL 中向服务器提供参数，包括客户端函数的名称，然后服务器发回 脚本（不是 JSON！）供客户端运行。当然，生成的脚本中可以包含 JSON，例如 myFunc( 'foo' : 5 )，但最终，JSON 只是脚本内容的一部分。

【讨论】：

良好的基本描述。我喜欢你注意到你可以在回调中返回任何值，而不仅仅是一个对象。 :-)