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>