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的重点是，由于Same Origin Policy安全限制，域A的Javascript无法向域B上的资源发出GET请求;换句话说，脚本无法跨域检索数据。

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

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

这意味着域B显式输出 Javascript片段，它使用数据调用指定的回调函数。

因此，除非域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在评论中指出的那样，服务器的正确响应应该是这样的：

func_callbk('hello world')

<强>更新

如果您希望在没有JSONP的情况下完成此工作（例如，如果响应应始终为JSON），则需要按照this answer中的说明查看CORS。