如果sql数据库状态更改，则自动刷新页面

$counter = "SELECT countnumber FROM onairsystem WHERE id='1'";
$counterresult = $connection->query($counter);
$rows = $counterresult->fetch_array();  
$number = $rows['countnumber'];

If countnumber change from 1 to 2, refresh webpage automatically without blinking. How do I do that?

I look at different solutions https://aiocollective.com/blog/ajax-auto-refresh-volume-ii/ and this How can I refresh a page when a database is updated? but this not the same as what I wanted. Second page solutions is more similar but this doesn't addreess the refresh page requirement, it only checks if the database number changes.

php file

     $id=$_POST['id'];
     if (is_numeric($id))
     {
         $counter = "SELECT count(*) as countnumber FROM onairsystem WHERE id={$id}";
         $counterresult = $connection->query($counter);
         $rows = $counterresult->fetch_array();
         echo $number = $rows['countnumber'];
     }

html file

<input type="number" id="number" name="number">
<button onclick="getDate()">Get Data From Query</button>
<br>
<label class="data"></label>

<script>
function getDate()
{
    var number  = $('#number').val();
    $.ajax({
        type: "POST",
        url: 'ajax.php?id='+number,
        success: function(data)
        {
            $('.data').val(data);
        }
    });
}
</script>