I want to retrive data in tabular form using ajax and php

I have written the following code

<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-    scale=1.0">
        <title>contact.dat</title>
      <body>
      <div id="demo">
    <h2>Retrive data by ajax</h2>
    <button type="button" onclick="printdata()">Retrive data</button>
    </div>
    
    <script>
    function printdata() {
      const xhttp = new XMLHttpRequest();
      xhttp.onload = function() {
        document.getElementById("demo").innerHTML +=this.responseText;
      }
      xhttp.open("GET", "contact.dat");
      xhttp.send();
    }
    </script>
      </body>
    
    <?php
    
    $fp = fopen('contact.dat', 'r');
    echo "<table border=1>";
    echo "<tr><th>Sr. No.</th><th>Name</th><th>Residence No.</th><th>Mob.
    no.</th><th>Address</th></tr>";
    while ($row = fscanf($fp, "%s %s %s %s %s")) {
        echo "<tr>";
        foreach ($row as $r) {
            echo "<td>$r</td>";
        }
        echo "</tr>";
    }
    echo "</table>";
    fclose($fp);
    ?>
    
    </html>

its showing me I want to show data when I click on the button. I'm new in both JavaScript as well as PHP. is there any way to perform something like

if(isset(printdata();))

then run php code block???