AJAX请求失败

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"];

</div>

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

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