Обновление div каждый раз, когда новая запись вставляется в базу данных mysql

Question

Я работаю над системой SCADA на своей веб-странице и хочу обновлять некоторые div с помощью gif только при изменении любой из 2 таблиц из базы данных mysql.

И также я хочу делать это каждый раз, когда происходят изменения (новая запись в таблице).Когда эти 2 таблицы остаются прежними, никаких действий не предпринимается (новых записей нет).

Вся веб-страница - php / html, и это мой первый подход к javascript / ajax.Я пытался использовать:

  setInterval($('. examplediv).load(location.href + ' .examplediv), 1000);

, но это не соответствует моим потребностям.Это заставляет мою графику мерцать с каждым обновлением, когда они должны быть статичными.Чтобы упростить: я хочу перезагрузить их, только если состояние в таблице изменится с a-> b, поэтому я поменяю местами a.gif с b.gif.

Я могу обнаружить изменения в таблицах mysql по: идентификатору записи, отметке времени иликонтрольная сумма таблицы, но трудно бороться с javascript.

<div class="refresh"> // div i want to refresh
  <h3>PIR</h3>        // sensor name
  <p>Online: <?echo $aonline;?></p>  // echoing result of query if  sensor is online
  <p>State: <?echo $pirstan;?></p>      // echoing current state of  sensor
  <p>Last changed: <?echo $rowpir['Czas'];?></p>  //echoing timestamp of previous state of sensor
   <img class="center" src="pir.gif" alt="Kontrakton"> // showing image related to current sensor state (for example walking person to PIR sensor)
  </div>

Любая помощь по вышеуказанной проблеме будет признательна.Особенно пример кода с комментариями, поэтому я понимаю дело.Другой подход к проблеме также приветствуется, может быть, я близорук.

Answer 1

Для тех, кто заинтересован в будущем, финальный код благодаря: Fiido93

<script type="text/javascript">
var old_count = 0;
setInterval(function(){    
    $.ajax({
        type : "POST",
        url : "test.php",
        success : function(data){
            if (data > old_count) {
                   $('.divname' ).load(window.location.href + ' .divname');
               old_count = data;
           }
        }
    });
},1000);

и test.php

$result = mysqli_query($conn,"mysqlquery");
while($row = mysqli_fetch_array($result))
{
    $printme= $row[0];   // i only echo row 0 here !!
} 
echo "$printme";

Answer 2

Вы можете использовать websocket или socket.io для решения вашей проблемы. Пример:

Когда ваш клиент получит информацию. Вы можете прямо позвонить в ajax

socket.on('notification', function(){
  ajaxFunction();
});

Если вы не хотитетебе этот метод.p / s Это всего лишь предложение.Проведите валидацию, извлеките старые данные строки и сравните новые данные строки в своем бэкэнде.

Через JS

<script>

var old_count = 0;

setInterval(function(){    
    $.ajax({
        type : "POST",
        url : "test.php",
        success : function(data){
            if (data > old_count) {
                alert('new record on i_case');
                old_count = data;
            }
        }
    });
},1000);

</script>