Question

我见过很多JSONP的例子，但我似乎无法为我的网站工作。它可以在某个网址上生成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 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 API。

Answer 3

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

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

为了绕过SOP，JSONP出生了。

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

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

就像这个例子：

客户端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数据的简单示例

3 个答案:

客户端javascript代码：

服务器响应：