AJAX Anfrage funktioniert nicht das erste Mal aber funktioniert danach

Question

Ich mache eine einfache Funktion, wie es auf w3schools offiziellen Website angezeigt wird. Ich versuche eine Funktion einer AJAX-Anfrage auszuführen.

Ich denke, es funktioniert alles gut außer die Tatsache, dass der Code nur ausgeführt wird, nachdem es das erste Mal fehlschlägt. Ich meine, sagen Sie, dass Sie das erste Mal auf meiner Website waren und Sie versuchen, das erste Mal einzureichen, es aktualisiert nur die Seite und nichts passiert.

Soweit ich weiß habe ich versucht zu debuggen mit alert Funktionen in jeder Zeile zu finden, wenn die Anfrage wirklich gemacht wurde. Ich fand, dass die readyState springt von 1 bis 4 das allererste Mal der Code läuft (in jedem Browser, verschiedene Computer), aber das nächste Mal wird es ReadyState 1, 2, 3 und 4 und BANG rendern wird es funktionieren und senden.

Ich dachte über etwas um die Plätzchen nach? Aber ich frage mich immer noch, was die Ursache dafür ist. Bitte Jungs, helft mir dabei.

Javascript Funktionscode (innen head-Tag)

function sendForm() { 

    var criarRequest = new XMLHttpRequest(); 
    criarRequest.onreadystatechange = function() { 
     if (criarRequest.readyState == 4 && criarRequest.status == 200) { 
      document.getElementById("contacts").innerHTML = criarRequest.responseText; 
     } 
    }; 
    //var loading = document.getElementById("contacts").innerHTML = "A enviar..."; 
    var inputEmail = document.getElementById("email").value; 
    var inputMensagem = document.getElementById("mensagem").value; 
    criarRequest.open("POST", "sendEmail.php", true); 
    criarRequest.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    criarRequest.send("email="+inputEmail+"&mensagem="+inputEmail); 
} 

HTML-Code-Form/Eingänge

<form> 
    <input style="width:220px; height:39px" type="text" id="email" placeholder="Email" /> 
    <br /> <br /> 
    <textarea style="width:220px; height:100px" id="mensagem" placeholder="Mensagem"></textarea> 
    <br /> <br /> 
    <button id="enviar" onclick="sendForm()">Enviar</button> 
</form> 

Bitte geben Sie mir nur PURE, RAW JAVASCRIPT Lösungen, keine jQuery.

Answer 1

eigentlich sehr einfach: P Ihre Schaltfläche ist Standardattribut "Typ" von "senden" und wenn das passiert, wird das Formular gesendet, was eine Aktualisierung verursacht. Fügen Sie 'type = "button"' hinzu, um diese Funktionalität zu ändern und Sie sollten keine Aktualisierung mehr haben, damit der Ajax seine Anfrage beenden kann.