XMLHttpRequest：对象的状态必须为OPENED并且GET返回0

Question

因此，我创建了一个按钮，用于从以下位置获取JSON数据：https://learnwebcode.github.io/json-example/animals-1.json

我创建了HTML：

 <div class="card-body">
       Show animals &nbsp;
       <button type="button" id="prikaziZiv" class="btn btn-primary">Prikaži</button>

       <div id="zivotinje"></div>
  </div>

以及以下JSON请求：

/*Ajax*/
var nasZahtev = new XMLHttpRequest();

nasZahtev.open('GET', 'https://learnwebcode.github.io/json-example/animals-1.json', true);

var zivotinjeContainer = document.getElementById("zivotinje");
var dugme = document.getElementById("prikaziZiv");

dugme.addEventListener("click", function(){

    nasZahtev.onload = function(){

        var nasiPodaci = JSON.parse(nasZahtev.responseText);

        dodajHTML(nasiPodaci);
    };
    nasZahtev.send();
});

function dodajHTML(data){
    var htmlString = "";

    for (i=0; i < data.length; i++){
        htmlString += "<p>" + data[i].name + " je " + data[i].species + ".</p>";
    };

    zivotinjeContainer.insertAdjacentHTML('beforeend', htmlString);
};

问题是我遇到两个错误： GET https://learnwebcode.github.io/json-example/animals-1.json 0（） （匿名）@ action.js：44

和

未捕获的DOMException：无法在“ XMLHttpRequest”上执行“发送”：对象的状态必须为OPENED。     在HTMLButtonElement。 （http://localhost/praksaportal/js/action.js:44:15）

我在这里想念什么？