Javascript:我是否正确使用了 onreadystatechange ？

Question

请记住，我对 JavaScript 语法非常很陌生，所以请耐心等待。

我试图使用多个onreadystatechange作为 promise 来捕获我从express返回的内容，但每次我这样做时，它们都会被调用。这是我的代码:

var ready = function(){

    xhr.open('GET', 'getallbeertypes');
    xhr.send(null);
    xhr.onreadystatechange = function () {

        var parent = document.getElementById('recipes');
        var docfrag = document.createDocumentFragment();

        if(xhr.status == 200){
            var beerTypes = JSON.parse(xhr.responseText);

            //loop through beerTypes to append a button to each list item
            for (var beer = 0; beer < beerTypes.length; beer++){
                //create necessary elements
                var li = document.createElement('li');
                var button = document.createElement('BUTTON');

                //set text content to list item
                li.textContent = beerTypes[beer].alias;

                //append list item to button
                button.appendChild(li);

                // add onclick attribute
                button.setAttribute("name", beerTypes[beer]._id);
                button.setAttribute("onclick", "moreInfo(this.getAttribute('name'))");

                //append button to document fragment
                docfrag.appendChild(button);
            }

            //display on DOM element
            parent.appendChild(docfrag);
        }else{
            // console.log(JSON.parse(xhr.responseText));
            var header = document.createElement('h1');
            header.textContent = "Something went wrong. Please try again later.";
            docfrag.appendChild(header);
            parent.appendChild(header);
        }
    }
}
ready();

因此，上面的代码部分有效，它将每个 JSON 对象显示为项目列表中的按钮。单击按钮时，应该运行以下函数:

var moreInfo = function(_id){
    xhr.open('GET', '/getuserrecipes/' + _id);
    xhr.send();
    xhr.onreadystatechange = function(){
        console.log("is this running?");
        console.log(JSON.parse(xhr.responseText));
    }
}

我期望 onclick 属性应该只运行 moreInfo 函数。

每当我单击其中一个按钮时，ready 函数中的 else 语句就会以某种方式运行并显示出现问题。请稍后在屏幕上重试。

我可以建立的唯一连接是onreadystatechange，但我真的不知道是否就是这样。

如何/为什么调用另一个函数以及如何停止它？感谢所有帮助。

Answer 1

您应该检查请求的状态。为此，请使用readyState 属性。有 5 个状态，从 0 到 4 的整数，您想要最后一个，即 4。

类似这样的:

if (xhr.readyState == 4 && xhr.status == 200){
 ...
}

检查this示例。