JavaScript - Problem bei der Verwendung von ReST API

Question

Nicht sicher, was ich hier falsch mache.

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

Ich will es die Readystate und Status für jeden Zustandswechsel protokollieren und auch den Antworttext für den Endzustand anmelden.

Es wird "4 0 1" protokolliert, was bedeutet, dass der Status nur einmal geändert wird und direkt in den Endstatus geändert wird.

Es sollte die Zustände ändern als .open(), .setRequestHeader() und .send() Funktionen ausgeführt werden.

Wie kann ich das schaffen?

Hinweis - "URL" -Parameter ist die API-URL.

Answer 1

Wenn das Ereignis onreadystatechange für .open() und .setRequestHeader() aufgerufen werden soll, müssen Sie den Ereignishandler onreadystatechange registrieren, bevor Sie die Funktionen open() und setRequestHeader() aufrufen.

Also, wenn Sie die onreadystatechange Definition ein paar Zeilen nach oben verschieben, sollte es gut sein.

So etwas wie folgt aus:

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

}