JSONP回调函数

Question

我正在研究JSONP回调函数的概念.我阅读了一些有关这方面的文章,并希望能够很好地掌握JSONP的概念.

所以,我将一个json文件上传到服务器--json文件

这是我编写的用于检索数据的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),则需要按照本答案中的说明查看CORS .