无法使用 JavaScript 从 URL 中获取 JSON答案

【问题标题】：Can't get JSON out of URL with JavaScript无法使用 JavaScript 从 URL 中获取 JSON
【发布时间】：2020-09-02 17:46:22
【问题描述】：

我最近开始学习 JavaScript，在学习 JSON 之前，我的学习过程进展顺利，当我开始尝试从 URL 中获取 JSON 时，我被卡住了，我尝试了很多方法在这里找到，并且加载了许多不同的 URL，但似乎没有任何效果。切入正题，这就是我所拥有的：

我正在使用 IIS 创建本地服务器，并从那里运行我的脚本；
我在 JSONbin.io 上创建了一个简单的 JSON 文件；
我正在尝试使用从 JSONbin 网站获得的代码访问它；
我创建了一些用于调试的控制台日志；
我发现虽然控制台没有指出任何错误，但请求函数却始终没有运行；
MYKEY 是我从 JSONbin.io 得到的秘钥

如果有人能阐明这个问题，或者简单地提供一个对我有用的简单代码，那将有很大帮助。

<p> test </p>

<script>
let req = new XMLHttpRequest();

req.onreadystatechange = () => {
  if (req.readyState == XMLHttpRequest.DONE) {
    console.log("1");   
   console.log(req.responseText.name);
  }
};

req.open("POST", "http://api.jsonbin.io/b/5ec04a83a47fdd6af1645b86", true);
console.log("2");
req.setRequestHeader("Content-Type", "application/json");
req.setRequestHeader("secret-key", "MYKEY");
console.log("3");

</script>

【问题讨论】：

标签： javascript json url request

【解决方案1】：

您只是忘记了send() 请求

<p> test </p>

<script>
let req = new XMLHttpRequest();

req.onreadystatechange = () => {
  if (req.readyState == XMLHttpRequest.DONE) {
    console.log("1");   
   console.log(req.responseText.name);
  }
};

req.open("POST", "http://api.jsonbin.io/b/5ec04a83a47fdd6af1645b86", true);
console.log("2");
req.setRequestHeader("Content-Type", "application/json");
req.setRequestHeader("secret-key", "MYKEY");

req.send(); // <--------------------- Check this


console.log("3");

</script>

【讨论】：

【解决方案2】：

为了执行您的请求，您最后错过了req.send()。您必须检查检查器中的控制台和网络选项卡，在那里您会看到是否有其他问题。

请注意，在某些浏览器（如 Firefox）中，您可能会被“阻止加载混合活动内容”消息阻止。当您在 HTTPS 页面中并使用 HTTP url 执行脚本时（就像您所做的那样），就会发生这种情况。这是一项安全措施，可避免因发布潜在安全内容（您的密钥或其他内容）而引发的 MITM 等攻击。

【讨论】：

【解决方案3】：

是的，你只是忘记了 send()

const req = new XMLHttpRequest()
req.onreadystatechange = function () {
  // In local files, status is 0 upon success in Mozilla Firefox
  if(req.readyState === XMLHttpRequest.DONE) {
    var status = req.status;
    if (status === 0 || (status >= 200 && status < 400)) {
      // The request has been completed successfully
      console.log(req.responseText);
    } else {
      // Oh no! There has been an error with the request!
    }
  }
};
req.open("POST", "http://api.jsonbin.io/b/5ec04a83a47fdd6af1645b86", true);
console.log("2");
req.setRequestHeader("Content-Type", "application/json");
req.setRequestHeader("secret-key", "MYKEY");
console.log("3");
req.send(); // try this

【讨论】：