无法使用 JavaScript 从 URL 中获取 JSON

Question

I've recently started to learn JavaScript, my learning process was going smoothly until I got to JSON, when I started trying to get a JSON out of a URL I got stuck real bad, I've tried loads of methods I found here, and loads of different URL's and nothing seems to work. Well cutting to the chase, this is what I've got:

• I am using IIS to create a local server, and I'm running my script from there;
• I created a simple JSON file on JSONbin.io;
• I'm trying to access it using the code I got from JSONbin's website;
• I created some console.logs for debugging;
• I found out that although the console doesn't point out any error, the request function never runs;
• MYKEY is the secret key i got from JSONbin.io

If anyone could shed a light on this matter, or simple providing a simple code that would work for me, it would help a lot.

 <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>

Answer 1

You've simply forgot to send() the request

 <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>

Answer 2

In order to execute your request you missed req.send() at the end. You have to check the console and the network tab in the inspector, there you will see if you have other problems.

Be aware that in some browsers like Firefox you can be blocked with the message "Blocked loading mixed active content". That's happening when you are in a HTTPS page and you execute your script using a HTTP url (like you did). That is a security action in order to avoid attacks like MITM due to posting potentially secure content (your key or other stuff).

Answer 3

Yup you simply forget 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