JSONP回调函数

Question

我正在研究 JSONP 回调函数的概念。我阅读了一些关于此的文章，并希望很好地掌握 JSONP 的概念。

所以，我上传了一个 json 文件到服务器 - json file

这是我为检索数据而编写的 js 代码。调用是从 localhost 到 abhishekprakash.com。

var xhr;
var dataList;
xhr = new XMLHttpRequest();

xhr.open('GET', 'http://abhishekprakash.com/script/example.json?callback=func_callbk',  true);
xhr.send();

func_callback = function(data){
    alert(data.data.people[0].id);
}

xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
            console.log(dataList);
    }
};

这是我在控制台中得到的响应：

回调函数被调用，但它不包含 Json 数据。 我错过了什么？

感谢任何帮助。

谢谢

Answer 1

该示例服务返回 JSON，而不是 JSONP。

JSONP 的要点是，由于同源策略安全限制，来自域 A 的 Javascript 无法向域 B 上的资源发出 GET 请求；换句话说，脚本无法跨域检索数据。

JSONP 通过使域 B 在跨域数据共享中显式协作来解决这个问题。来自域 A 的脚本指定了回调函数的名称，并将域 B 的 URL 嵌入到文档中，就好像它包含一个常规的外部 Javascript 文件一样。然后域 B 输出如下数据：

callbackFuncName({ data : foo, ... });

这意味着域 B 显式输出一个 Javascript sn-p，它使用数据调用指定的回调函数。

因此，除非域 B 在此方面明确合作，否则您不能简单地从中获取 JSONP 响应。

Answer 2

XHR 受跨域规则约束；要使用 JSONP，您需要添加一个脚本元素：

function func_callbk()
{
    console.log(arguments);
}

var s = document.createElement('script');
s.type = 'text/javascript';
s.src = 'http://abhishekprakash.com/script/example.json?callback=func_callbk';
var h = document.getElementsByTagName('script')[0];
h.parentNode.insertBefore(s, h);

正如 Ian 在 cmets 中指出的，您的服务器的正确响应应该是这样的：

func_callbk('hello world')

更新

如果您希望在不使用 JSONP 的情况下进行这项工作（例如，如果响应应始终为 JSON），您需要按照this answer 中的说明查看 CORS。