How to make AJAX wȯrk on PHP?-CodePudding

I'm new to AJAX and currently trying to get a simple PHP-AJAX to show the server time after I click the 'show server time' button. But it doesn't show the time after I click it. Can anyone help me? Here's the show_server_time.php code:

<?php include('header.html'); ?><br>
<div class="container">
  <div class="card">
    <div class="card-header">
      Ajax Server Time
    </div>
    <div class="card-body">
      <button class="btn btn-success" onclick="get_server_time()">
        Show Server Time
      </button>
      <br><br>
      <div id='showtime'></div>
    </div>
  </div>
</div>
<br>
<script src="ajax.js"></script>

The ajax.js:

function getXMLHTTPRequest(){
  if(window.XMLHTTPRequest){
    //for modern browsers
    return new XMLHttpRequest();
  }else{
    //for old IE browsers
    return new ActiveXObject("Microsoft.XMLHTTP");
  }
}

function get_server_time(){
  var xmlhttp = getXMLHTTPRequest();
  var page = 'get_server_time.php';
  xmlhttp.open("GET",page,true);
  xmlhttp.onreadystatechange = function() {
    document.getElementById('showtime').innerHTML = '<img src = ajax_loader.png>';
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
      document.getElementById('showtime').innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.send(null);
}

And this is the get_server_time.php:

<?php
echo date('H:i:s');
?>

CodePudding user response：

<div class="container">
  <div class="card">
    <div class="card-header">
      Ajax Server Time
    </div>
    <div class="card-body">
      <button class="btn btn-success" onclick="get_server_time()">
        Show Server Time
      </button>
      <br><br>
      <div id='showtime'></div>
    </div>
  </div>
</div>
<br>
<script>
function get_server_time(){
  var xmlhttp =new XMLHttpRequest();
  var page = 'get_server_time.php';
  xmlhttp.open("GET",page,true);
  xmlhttp.onreadystatechange = function() {
    document.getElementById('showtime').innerHTML = '<img src = ajax_loader.png>';
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200){
      document.getElementById('showtime').innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.send(null);
}
</script>

It works as above.

https://www.w3schools.com/js/js_ajax_intro.asp