AJAX请求失败

Question

 function ajax() { var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById("demo").innerHTML = xhttp.responseText; alert(this.responseText); } }; } xhttp.open("POST", "abcdef.xyz/abc/logincheck.php?mail=abc@gmail.com&password=abc", true); xhttp.send(); 

  <p id="demo"> The content of the body element is displayed in your browser. </p> <button onclick="ajax()"> Click on me! </button> 

I have a code as seen above and the ajax operations do result in failure. What is wrong with my code? The text in p never changes.The php file starts like this:

<?php
$mail = $_POST["mail"];
$password = $_POST["password"];

Answer 1

xhttp.open() and xhttp.send() need to be inside the ajax() function.

function ajax() {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById("demo").innerHTML = xhttp.responseText;
      alert(this.responseText);
    }
  };
  xhttp.open("POST", "abcdef.xyz/abc/logincheck.php?mail=abc@gmail.com&password=abc", true);
  xhttp.send();
}

Answer 2

due to xhttp.open and send are define out side of function block.

xhttp.open("POST", "abcdef.xyz/abc/logincheck.php?mail=abc@gmail.com&password=abc", true);
xhttp.send();