Javascript：onreadystatechangeを正しく使用していますか？

Question

念のため私は非常に JavaScriptシンタックスの新機能ですので、辛抱強くお待ちください。

onreadystatechangeを私が急行から返すものをキャッチする約束として使用しようとしていますが、そのたびに両方が呼び出されています。ここに私のコードはあります：

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オブジェクトが項目リストにボタンとして表示されます。私はmoreInfo機能を実行する必要がありonclick属性を期待してい

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)); 
    } 
} 

：ボタンをクリックすると、以下の機能を実行するようになっています。

ボタンのいずれかをクリックすると、ready機能のelse文が何らかの形で実行され、画面にSomething went wrong. Please try again laterと表示されます。

私が作ることができる唯一の接続はonreadystatechangeですが、それは本当にわかりません。

どのように他の関数が呼び出されているのですか？どうすれば停止できますか？すべての助けに感謝します。

Answer 1

リクエストの状態を確認する必要があります。これを行うには、readyStateプロパティを使用します。

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

チェックthis例：5つの状態、0から4までの整数、そしてあなたは、このような4

何かある最後の1を、必要があります。