AJAX XHRリクエストonReadyStateChangeイベントの順序と回数明確化

Question

私はPython-FlaskとJavascriptを使用して簡単な株価ツールを学習しようとしています。

私は特に学びたい普通 Javascriptです。私のコードは動作していますが、私が理解できないのは、開発者のコ​​ンソールを見ているときに、3つのエラーメッセージが表示されてからconsole.log（応答）が成功するということです。

応答が戻ってくる前にコードが3回ループするので、最後に200ステータスを返す前に、それぞれの時間が「ERROR」に記録されますか？誰かがそれを私に説明するか、良い記事/投稿を私に指摘してもらえますか？

マイイベントリスナー：

document.getElementById("btn_quote").addEventListener("click", getQuote); 

AJAX呼び出し：

function getQuote(e){ 
    e.preventDefault(); 
    var ticker = document.getElementById("ticker").value 
    var shares = document.getElementById("shares").value 
    var url = "/quote/"+ticker+"/"+shares 

    // Fetch the latest data. 
    var request = new XMLHttpRequest(); 
    request.onreadystatechange = function() { 
     if (request.readyState === XMLHttpRequest.DONE) { 
      if (request.status === 200) { 
       var response = JSON.parse(request.response); 
       console.log(response); 
      } 
     } else { 
      // TODO, handle error when no data is available. 
      console.log('ERROR'); 
      return false; 
     } 
    }; 
     request.open('GET', url); 
     request.send(); 
} 

Answer 1

は基本的には、AJAX呼び出しは次のイベントのために通知されますあなたが参考のために、次はreadyStateの可能な値ですこれはreadyStateChangeイベントと呼ばれます。ほとんどの場合

、あなたは、接続の速度に基づいて4つの準備完了状態の変化を取得するために使用（まれのみ一つだけ、それは非常に速いの場合）、あなたはそれがれているかどうかを確認する必要があります今すぐ応答が完了したことを意味します。あなたは成功を意味し、404のようなエラーのために他のhttp status codeを確認することができたrequest.status === 200をチェックする必要があります

要求がsuceessであるかどうかを確認するには、500など

何のエラー

document.getElementById("btn_quote").addEventListener("click", getQuote); 
 
document.getElementById("btn_quote_error").addEventListener("click", getQuoteError); 
 

 
function getQuote(e){ 
 
    e.preventDefault(); 
 
    var ticker = document.getElementById("ticker").value; 
 
    var shares = document.getElementById("shares").value; 
 
    //var url = "/quote/" + ticker + "/" + shares; 
 
    var url = 'http://stackoverflow.com/'; 
 

 
    // Fetch the latest data. 
 
    var request = new XMLHttpRequest(); 
 
    request.onreadystatechange = function() { 
 
     console.log(request.readyState); 
 
     if (request.readyState === XMLHttpRequest.DONE) { 
 
      console.log(request.status); 
 
      if (request.status === 200) { 
 
       //var response = JSON.parse(request.response); 
 
       //console.log(response); 
 
      } 
 
     } 
 
     //else { 
 
      // TODO, handle error when no data is available. 
 
      //console.log('ERROR'); 
 
      //return false; 
 
     //} 
 
    }; 
 
     request.open('GET', url, true); 
 
     request.send(); 
 

 
    
 
} 
 

 
function getQuoteError(e){ 
 
    e.preventDefault(); 
 
    var ticker = document.getElementById("ticker").value; 
 
    var shares = document.getElementById("shares").value; 
 
    //var url = "/quote/" + ticker + "/" + shares; 
 
    var url = 'http://stackoverflow404.com/'; 
 

 
    // Fetch the latest data. 
 
    var request = new XMLHttpRequest(); 
 
    request.onreadystatechange = function() { 
 
     console.log(request.readyState); 
 
     if (request.readyState === XMLHttpRequest.DONE) { 
 
      console.log(request.status); 
 
      if (request.status === 200) { 
 
       //var response = JSON.parse(request.response); 
 
       //console.log(response); 
 
      } 
 
     } 
 
     //else { 
 
      // TODO, handle error when no data is available. 
 
      //console.log('ERROR'); 
 
      //return false; 
 
     //} 
 
    }; 
 
     request.open('GET', url, true); 
 
     request.send(); 
 

 
    
 
}

<input type="text" id="ticker"/> 
 
<input type="text" id="shares"/> 
 
<input type="button" id="btn_quote" value="Get Quote" /> 
 
<input type="button" id="btn_quote_error" value="Get Quote Error" />

Answer 2

それは別のHTTPステータスコード、その戻って別の準備状態を返していません。

console.log("ERROR");を変更してください。 console.log(request.readyState);に。

次に、それが報告されている理由と理由を確認します。

Answer 3

readyStateの値を実際の応答値で確認する必要があると思います。

0: request not initialized 
1: server connection established 
2: request received 
3: processing request 
4: request finished and response is ready 

ですから、基本的にあなたのケースでは4であることを、それをチェックすることもできます：

var request = new XMLHttpRequest(); 
    request.onreadystatechange = function() { 
     if (request.readyState === 4) { 
      //response statements 
     } else { 
      //error statements 
     } 
    };