从网站检索jsonP数据的简单示例

Question

我已经看到了许多有关JSONP示例，但似乎无法为我的网站工作。 它可以在某些URL处生成JSON代码，但我无法从其他域检索它。 您能给我一个JSONP的工作示例吗，它可以从任何JSON文件 （例如www.w3schools.com/json/myTutorials.txt ）中检索数据。

我可能不太了解，但是至少我需要一个解释，为什么如果我用上面的示例替换url，那么就不会提取任何数据。

Answer 1

有很多答案指出了JSON和JSONP之间的区别。 您的问题（“ ... jsonP可以检索到...”）表明您不完全了解该概念。 JSONP是答案的格式，HTML，XML，JSON也是如此。 因此，响应请求的服务器应该能够以JSONP格式发送请求。

Answer 2

这是使用Yahoos公共API的jQuery文档中示例的修改版本。

$.ajax({
    url: "https://query.yahooapis.com/v1/public/yql",
    // Tell jQuery we're expecting JSONP
    dataType: "jsonp",

    // Tell YQL what we want and that we want JSON
    data: {
        q: "show tables",
        format: "json"
    },

    // Work with the response
    success: function( response ) {
        console.log( response ); // server response
    }
});

连同jsbin： https ：//jsbin.com/tuketa/edit ？ js，输出

JSONP的存在是为了解决CORS规则的局限性。 出于安全原因，通常只允许您的浏览器与从其加载页面的服务器通信。 JSONP的创建是为了解决此问题，它为服务器提供了用于填充JSON数据的回调函数，因此可填充JSONP中的P。

正如jasonscript的评论中指出的那样，它不是可以与JSONP一起运行的任何服务器，必须对其进行配置以使其能够与JSONP一起使用，例如示例中的Yahoo API。

Answer 3

来自其他域...来自任何json文件...这是不可能的。 服务器响应实际上是包装json对象的javascript。

jsonP是一个协议。 由于存在相同原产地政策 （SOP），请求者（浏览器中的javascript）无法通过XHR（ajax）在源server:port之外进行请求。

为了绕过SOP，JSONP诞生了。

客户端不发送XHR请求，而是向DOM添加<script>标记，其中src属性指向带有参数（例如callback = foo）的jsonP的URL，该参数告诉接收方的本地函数的名称。 JSON作为参数。

然后，了解JSONP的远程服务器发送一个javascript，该javascript以JSON作为参数调用本地函数。

像这个例子：

客户端JavaScript代码：

function foo(data)
{
    // do stuff with JSON
}

var script = document.createElement('script');
script.src = '//example.com/path/to/jsonp?callback=foo'

document.getElementsByTagName('head')[0].appendChild(script);

（从这里拍摄）

服务器响应：

HTTP/1.1 200 OK
Content-Type: text/javascript

foo({ "key" : "value" });

因此，浏览器将加载脚本，并以json作为参数调用foo 。 现在，您已经绕过了SOP限制。