Робохомячок

Как сделать так, чтобы страница сайта обновлялась не полностью, а только отдельное окошко на странице?

Если вы хотите обновлять только часть страницы, не перезагружая всю страницу, то вы можете использовать технологию AJAX. AJAX (англ. Asynchronous JavaScript And XML) - это технология обмена данными между сервером и клиентом без перезагрузки страницы.

Шаг 1. Создайте HTML-разметку

Создайте HTML-разметку для вашей страницы и добавьте на нее область, которую вы хотите обновлять.

<!DOCTYPE html>
<html>
  <head>
    <title>Моя страница</title>
  </head>
  <body>
    <h1>Моя страница</h1>
    <p>Привет мир!</p>
    <div id="область-dynamic">Результат обновления отображается здесь</div>
  </body>
</html>

Шаг 2. Напишите скрипт

Добавьте скрипт на страницу, который будет отправлять AJAX-запрос и обрабатывать ответ от сервера.

<!DOCTYPE html>
<html>
  <head>
    <title>Моя страница</title>
    <script>
      function обновитьDynamic() {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', '/ajax/обновить.php', true);
        xhr.send();

        xhr.onreadystatechange = function() {
          if (xhr.readyState !== 4) return;

          if (xhr.status === 200) {
            document.getElementById('область-dynamic').innerHTML = xhr.responseText;
          }
        }
      }
    </script>
  </head>
  <body>
    <h1>Моя страница</h1>
    <p>Привет мир!</p>
    <button onclick="обновитьDynamic()">Обновить</button>
    <div id="область-dynamic">Результат обновления отображается здесь</div>
  </body>
</html>

Шаг 3. Создайте скрипт на сервере

Создайте скрипт на сервере, который будет выполнять то, что вы хотите обновить на странице. Назвать его можно, например, update.php.

<?php
  // выполняем то, что нужно обновить в области

  $response = 'Новый текст обновления';

  header('Content-Type: text/plain; charset=utf-8');
  echo $response;
?>

Шаг 4. Соедините все вместе

Наконец, нужно связать всё вместе. Для этого нажмите на кнопку "Обновить" на странице, который запустит функцию обновитьDynamic(). Он отправит AJAX-запрос на сервер, который выполнит определенную задачу (к примеру, в нашем примере это обновление текста в область-dynamic), а затем вернет результат обратно на клиент. Результат будет отображаться в #область-dynamic без перезагрузки всей страницы.

Это очень простой пример использования AJAX на странице. Но вы можете использовать AJAX для выполнения более сложных задач без перезагрузки страницы. Например, вы можете использовать AJAX вместе с базами данных, чтобы пользователь мог обмениваться данными между сервером и клиентом без перезагрузки страницы.

© Copyright 2023 by DevOps. Built with ♥

Ответит на любые вопросы, напишет доклад, решит домашнее задание, можно просто поболтать :)

Абсолютно бесплатно и без рекламы.