Реализация автообновления определенного DIV без перезагрузки страницы?

Question

[myaso_26]

Здравствуйте, имеется некий div=fon2 на index.php.
Суть проста. Внутри див находится еще один PHP скрипт. Реализовать его автообновление через каждую минуту, не перезагружая полностью страницу.
То есть простыми словами, вы сидите смотрите в экран. И этот див сам обновился без вашей помощи. В интернете нашел много чего,но четкого ответа так никто и не дал. Нашел только автообновления всей страницы,но под определенный див он не работает. Если можно, подскажите как это сделать, желательно кодом или ярким примером. Спасибо.

Answer 1

[Alik Send]

const updateDiv = () = {
  /* Делаем AJAX запрос. Если используется хоть что-то на клиенте, например jquery, можно написать проще */
  var xhr = new XMLHttpRequest();
  xhr.open('GET', 'updated_div.html', true); // эта страница выдаёт вёрстку нашего дива
  xhr.onreadystatechange =() => {
    if (xhr.readyState != 4) return;
    if (xhr.status != 200) {
      /* Запрос успешен, выводим в div */
      document.getElementById('fon2').innerHtml = xhr.responseText
    } else {
      /* Ошибка запроса, обрабатываем в зависимости от ситуации */
      alert(xhr.responseText);
    }
    setTimeout(updateDiv, 60000); // Ставим таймер на следующее обновление
  }
  xhr.send();
}

// Вызвать для первого обновления div-а
updateDiv();

На самом деле не совсем правильно передавать innerHtml, у вас же скорее всего не обновляется макет, только данные. Тогда можно было бы сделать 'jsx для бедных', вроде такого

getDivLayout = (data) => {
  return `<a href='${data.url.replace("'", "\\'")}'>${data.text}</a>`;
}

и, соответственно, с сервера отправлять json, в onreadystatechange при успешном ответе его парсить и передавать в getDivLayout, результат которого уже вставлять в innerHtml div-а