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

Question

我看过很多 JSONP 的例子，但我似乎无法为我的网站找到任何例子。它可以在某些 url 处生成 JSON 代码，但我无法从其他域 检索它 。能否给我一个 JSONP 的工作示例，它可以从任何 JSON 文件（例如 www.w3schools.com/json/myTutorials.txt）检索数据。

我可能不完全理解，但我至少需要解释一下为什么如果我用上面的示例替换 url，则不会提取任何数据。

Answer 1

有很多答案指出了 JSON 和 JSONP 之间的区别。你的问题（“...jsonP that can retrieve...”）表明你没有完全理解这个概念。 JSONP 是答案的格式，HTML、XML、JSON 也是。因此响应请求的服务器应该能够发送它 JSONP 格式。

Answer 2

这是使用 Yahoos public APIs.jquery docs 中示例的修改版本。

$.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,output

之所以存在JSONP，是为了绕过CORS规则的限制。出于安全原因，您的浏览器通常只允许与其加载页面的服务器通信。 JSONP 的创建是为了解决这个问题，方法是为服务器提供一个回调函数来填充 JSON 数据，因此 JSONP.

中的 P

正如 jasonscript 在评论中指出的那样，并不是任何服务器都可以使用 JSONP，它必须配置为能够使用 JSONP，例如 Yahoo [=示例中的 21=]。

Answer 3

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

jsonP 是一个协议。由于 Same-Origin-Policy (SOP)，请求者（浏览器中的 javascript）无法通过源 server:port 之外的 XHR (ajax) 请求。

绕过SOP，JSONP诞生。

客户端没有发送XHR请求，而是在DOM中添加了一个<script>标签，src属性指向json的URL P 带有一个参数（例如 callback=foo），它告诉接收 JSON 作为参数的本地函数的名称。

然后，远程服务器 - 理解 JSONP- 发送一个 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);

（取自here）

服务器响应：

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

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

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

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

Simple example to retrieve jsonP data from website

javascript

json

jsonp

客户javascript代码：

服务器响应：