ajax JSONP 回调函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16097763/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JSONP Callback function
提问by Abhishek Prakash
I was looking into the concept of JSONP callback function. I read some articles regarding that and wanted to get a good grasp of the concept of JSONP.
我正在研究 JSONP 回调函数的概念。我阅读了一些关于此的文章，并希望很好地掌握 JSONP 的概念。
So, I uploaded one json file to the server - json file
所以，我上传了一个 json 文件到服务器 - json 文件
And here is the js code which I wrote to retrieve the data. The call is made from localhost to the abhishekprakash.com.
这是我为检索数据而编写的 js 代码。调用是从本地主机到 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);
}
};
And this is the response that I get in the console:
这是我在控制台中得到的响应：
The callback function is called but it does not contain the Json data. What am I missing?
回调函数被调用，但它不包含 Json 数据。我错过了什么？
Any help is appreciated.
任何帮助表示赞赏。
Thanks
谢谢
回答by deceze
That example service returns JSON, not JSONP.
该示例服务返回 JSON，而不是 JSONP。
The point of JSONP is that due to Same Origin Policy security restrictions, Javascript from domain A cannot make a GET request to resources on domain B; in other words a script cannot retrieve data cross-domain.
JSONP 的意义在于，由于同源策略的安全限制，域 A 的 Javascript 无法对域 B 上的资源发出 GET 请求；换句话说，脚本不能跨域检索数据。
JSONP solves this by making domain B explicitly cooperate in the cross-domain data sharing. The script from domain A specifies the name of a callback function and embeds the URL of domain B in the document as if it were including a regular external Javascript file. Domain B then outputs data like this:
JSONP 通过让域 B 在跨域数据共享中明确协作来解决这个问题。来自域 A 的脚本指定了回调函数的名称，并将域 B 的 URL 嵌入到文档中，就好像它包含一个常规的外部 Javascript 文件一样。然后域 B 输出如下数据：
callbackFuncName({ data : foo, ... });
That means domain B explicitly outputs a Javascript snippetwhich calls the specified callback function with the data.
这意味着域 B 显式输出一个Javascript 片段，该片段使用数据调用指定的回调函数。
So, unless domain B explicitly cooperates in this, you cannot simply get a JSONP response from it.
因此，除非域 B 在这方面明确合作，否则您不能简单地从中获得 JSONP 响应。
回答by Ja?ck
The XHR is constrained by cross-domain rules; to use JSONP you need to add a script element:
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);
As pointed out by Ian in the comments, the proper response of your server should be something like this:
正如 Ian 在评论中指出的那样，您的服务器的正确响应应该是这样的：
func_callbk('hello world')
Update
更新
If you wish to make this work without JSONP (e.g. if the response should always be JSON), you need to look into CORS as explained in this answer.
如果您希望在没有 JSONP 的情况下完成这项工作（例如，如果响应应始终为 JSON），您需要按照本答案中的说明查看 CORS 。
