Изучение AJAX: пример асинхронного JavaScript и XML

Я приведу пример AJAX и объясню его на английском языке. AJAX означает асинхронный JavaScript и XML. Это метод веб-разработки, который позволяет обновлять части веб-страницы без обновления всей страницы. Вместо загрузки новой страницы AJAX позволяет асинхронно отправлять и получать данные с сервера в фоновом режиме.

Вот простой пример AJAX в действии:

<!DOCTYPE html>
<html>
<head>
  <title>AJAX Example</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("#loadButton").click(function() {
        $.ajax({
          url: "data.txt",
          success: function(result) {
            $("#content").html(result);
          }
        });
      });
    });
  </script>
</head>
<body>
  <h1>AJAX Example</h1>
  <button id="loadButton">Load Content</button>
  <div id="content"></div>
</body>
</html>

В этом примере у нас есть веб-страница с кнопкой и элементом

. При нажатии кнопки на сервер отправляется запрос AJAX для получения содержимого из файла с именем «data.txt». После успешного получения содержимого оно вставляется в элемент

с идентификатором «content» с помощью функции html().

Таким образом, при нажатии кнопки обновляется только содержимое внутри элемента

без необходимости обновления всей страницы. Это обеспечивает более плавный и интерактивный пользовательский интерфейс.