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

Question

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

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

Answer 1

JSONP基本上是一个"hack",允许站点加载数据并忽略同源策略.它的工作原理是<script>在页面上添加标签.

在实际的方法是在你发送请求的回调.然后,服务器将获取该名称并生成一个JS文件,该文件使用该数据调用该函数.

使用jQuery,您只需?callback=?在执行操作时附加到URL 即可进行JSONP调用$.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
    }
});

而不是mackning AJAX调用,jQuery实际上将附加:

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