Question

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

我想我理解如何以客户端方式实现它，但我不知道该怎么做与服务器部分有关。在关注网络上已有的信息时，我一直有错误。有什么帮助吗？

Answer 1

JSONP基本上是一个“黑客”，允许网站加载数据并忽略same-origin policy。它的工作原理是在您的网页上添加<script>标记。

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

使用jQuery，您只需在执行?callback=?时将$.getJSON附加到您的网址即可拨打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

Answer 2

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

客户端会生成一个脚本元素：<script src="http://example.com/foo.js>。这会导致浏览器从foo.js获取example.com。
服务器会听到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只是脚本内容的一部分。

有人可以解释我如何进行JSONP调用，就像我五岁一样？

2 个答案: