JSON AJAX Http请求

Question

我正在使用我拥有的JSON文件，并将其链接到我的JavaScript中。 我试图通过AJAX将它请求显示在我的console.log上，但我只为readystatechange函数获取null。我究竟做错了什么？

此外，为了更好地阐明我为我的课程做了这些，理想情况下我的目标是什么;我有一个我创建的json文件（myjson.com），我在JavaScript中拥有该URL，并且我试图让该json url更新为我的JavaScript，因此当我执行console.log时，它显示了来自json的对象。这里是我的代码：

<div id="btn1"> Update </div> 
<div id="output"></div> 

<script> 

var output = document.getElementById("output"); 

document.getElementById("btn1").onclick = function() { 
    var a = newXMLHttpRequest(); 
    a.onreadystatechange = function() { 

    } 
    a.open("GET", "https://api.myjson.com/bins/z79bt", true); 
    a.send(); 
}; 

</script> 

---

UPDATE

从注释代码：

var output = document.getElementById("output"); 
document.getElementById("btn1").onclick = function() { 
    var a = new XMLHttpRequest(); 
    a.onreadystatechange = function() { 
    if(this.readyState == 4) { 
     var myObj = this.responseText; 
    } 
    console.log(a); 
    } 
    a.open("GET", "api.myjson.com/bins/z79bt";, true); 
    a.send(); 
}; 

Answer 1

两个问题：

• 你错过了一个空间newXMLHttpRequest
• 你没有做任何事情的状态变化回调内部
• （第三：你还没有填充输出格）

在这里看到的活生生的例子：

var output = document.getElementById("output"); 
 

 
document.getElementById("btn1").onclick = function() { 
 
    var a = new XMLHttpRequest(); 
 
    a.onreadystatechange = function() { 
 
     if(a.readyState === XMLHttpRequest.DONE && a.status === 200) { 
 
     console.log(a.responseText); 
 
     output.textContent = a.responseText; 
 
     } 
 
    } 
 
    a.open("GET", "https://api.myjson.com/bins/z79bt", true); 
 
    a.send(); 
 
};

<div id="btn1"> Update </div> 
 
<div id="output"></div>

---

UPDATE

从注释

固定码：

var output = document.getElementById("output"); 
 
document.getElementById("btn1").onclick = function() { 
 
    var a = new XMLHttpRequest(); 
 
    a.onreadystatechange = function() { 
 
    if(this.readyState == 4) { 
 
     var myObj = this.responseText; 
 
     console.log(myObj); 
 
    } 
 
    
 
    } 
 
    a.open("GET", "https://api.myjson.com/bins/z79bt", true); 
 
    a.send(); 
 
};

<div id="btn1"> Update </div> 
 
<div id="output"></div>