XMLHttpRequest() JSON 引发网络错误，但类似的 jQuery .getJSON 代码有效答案

【问题标题】：XMLHttpRequest() JSON throws a network error but similar jQuery .getJSON code worksXMLHttpRequest() JSON 引发网络错误，但类似的 jQuery .getJSON 代码有效
【发布时间】：2014-12-11 04:42:49
【问题描述】：

我有一个从外部网站加载的 JSON 脚本。以最简单的形式，代码是这样的（并且可以工作）：

jQuery.getJSON("http://adressesok.posten.no/api/v1/postal_codes.json?postal_code=" + document.querySelector("input").value + "&callback=?",
    function(data){
        document.querySelector("output").textContent = data.postal_codes[0].city;
    });

但是，如果 jQuery 不重要，网站所有者不想要它，所以我将 .getJSON 重新编码为 request = new XMLHttpRequest(); 模型：

request = new XMLHttpRequest();
request.open("GET", "http://adressesok.posten.no/api/v1/postal_codes.json?postal_code=" + document.querySelector("input").value + "&callback=?", true);
request.onload = function() {
    var data = JSON.parse(request.responseText);
    document.querySelector("output").textContent = data.postal_codes[0].city; 
};
request.onerror = function() { /* this gets called every time */ };

我已经多次修改我的代码，一遍又一遍地阅读文档，但 .onerror 函数是唯一始终显示的函数。这是控制台：

在挪威语中说这个脚本请求了 CORS，它在 Access-Control-Allow-Origin 的头部找不到源，并且 XMLHttpRequest 有网络错误，并说“无法访问”。

发生这种情况的原因可能有多种：

1：新代码有问题

2：.getJSON jQuery 函数（黑客？）中有一些东西可以防止错误发生

3：新代码中有一些我忘记添加的重要内容

4：我的浏览器有问题（目前是 IE 11）

5：还有别的吗？

在这方面有一些帮助会很可爱。

演示：http://jsbin.com/muxigulegi/1/

【问题讨论】：

标签： javascript jquery ajax json

【解决方案1】：

这不是网络错误。这是一个跨源错误。请求成功，但浏览器拒绝访问您的 JavaScript 响应。

由于 URL 中有 callback=?，jQuery 将生成 JSONP 请求而不是 XMLHttpRequest 请求。这会将响应作为脚本执行，而不是读取原始数据。

您正在手动创建 XMLHttpRequest，因此由于同源策略而失败。

改为Create a JSONP request。

【讨论】：

谢谢。你能通过修改一些来引导我的代码朝着正确的方向发展吗？ jsbin.com/siwurajuko/1/edit我不能一个人把所有的碎片放在一起。我在这个领域不是很好。
@mangseth — 链接的问题包含三个示例答案。
所有三个示例都向您展示了如何检索值。
谢谢，终于看到了。感谢您的帮助（并且没有对我投反对票）

【解决方案2】：

来自http://api.jquery.com/jquery.getjson/：

JSONP

如果 URL 包含字符串“callback=?”（或类似的，由服务器端 API 定义），则请求被视为 JSONP。有关详细信息，请参阅 $.ajax() 中对 jsonp 数据类型的讨论。

你确实有一个回调。这意味着 JQuery 函数可以从另一个域请求数据，这与您的 XHR 调用不同。

【讨论】：