JavaScript - ReST APIの使用に関する問題

Question

ここで間違っていることがわかりません。

HTML

<form id="inp" onsubmit="process()"> 
    <input id="link" type="text" name="link" placeholder="Enter your link"> 
    <input id="submit" type="submit" name="submit" value="&rarr;"> 
</form> 

はJavaScript

function createRequest() { 
     let result = null; 
     if (window.XMLHttpRequest) { 
      result = new XMLHttpRequest(); 
      result.overrideMimeType('application/json'); 
     } 
     else { 
      window.alert("Abort!"); 
     } 
     return result; 
    } 

    let c=0; 
    function process() { 
     let l = document.getElementById("inp").link.value; 
     let resp; 
     let req = createRequest(); 
     let payload = { 
      link: l, 
      ignoreException: true 
     }; 
     req.open("POST", url, true); 
     req.setRequestHeader("Content-Type", "application/json"); 
     req.send(payload); 
     req.onreadystatechange = function() { 
      if (req.readyState === 4 && req.status === 200) { 
       resp = req.responseText; 
       console.log("response text - " + resp); 
      } 
      console.log(req.readyState + " " + req.status + " " + c); 
     }; 
    } 

私はそれがすべての状態変化のためのreadyStateと状態を記録し、また、最終的な状態のための応答テキストをログに記録します。

「4 0 1」と記録されます。これは、状態を1回だけ変更し、最終状態にまっすぐに変更していることを意味します。

.open（）、.setRequestHeader（）、および.send（）関数が実行されると、状態が変更されるはずです。

どうすればこの作品を作成できますか？

注 - 「url」パラメータはapi urlです。

Answer 1

open（）およびsetRequestHeader（）関数を呼び出す前に、onreadystatechangeイベントを.open（）および.setRequestHeader（）に対して呼び出すには、onreadystatechangeイベントハンドラを登録する必要があります。

したがって、onreadystatechangeの定義を数行上に移動すると、それは良い結果になるはずです。

したがって、このような何か：

function process() { 
    let l = document.getElementById("inp").link.value; 
    let resp; 
    let req = createRequest(); 
    let payload = { 
     link: l, 
     ignoreException: true 
    }; 
    req.onreadystatechange = function() { 
     if (req.readyState === 4 && req.status === 200) { 
      resp = req.responseText; 
      console.log("response text - " + resp); 
     } 
     console.log(req.readyState + " " + req.status + " " + c); 
    }; 
    req.open("POST", url, true); 
    req.setRequestHeader("Content-Type", "application/json"); 
    req.send(payload); 

}