0

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

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

4

2 回答 2

6

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

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

使用 jQuery，您可以?callback=?在执行$.getJSON.

例子：

$.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 的维基百科页面：http ://en.wikipedia.org/wiki/JSONP

于 2013-10-18T19:25:45.090 回答
6

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 只是脚本内容的一部分。

于 2013-10-18T19:30:05.437 回答