AJAX: обмен данными без перезагрузки Web-страницы

AJAX (Asynchronous Javascript And Xml, асинхронный JavaScript и XML) — это технология взаимодействия Web-браузера с сервером без перезагрузки страницы. Web-браузер в фоновом режиме отправляет запрос серверу. На сервере скрипт обрабатывает переданный запрос и отправляет ответ в виде XML-документа, фрагмента HTML-документа, скрипта JavaScript, объекта JSON или просто текста. Полученный ответ обрабатывается в Web-браузере с помощью языка JavaScript, и на основе ответа обновляется структура текущего HTML-документа. Таким образом не происходит перезагрузка всей Web-страницы, а только лишь изменяется какой-либо ее фрагмент.

Основы технологии AJAX

Классический пример технологии AJAX демонстрирует поисковая система Google, позволяющая при наборе поисковой фразы в строке запроса предлагать различные варианты, начинающиеся с набранных букв (рис. 3.1).

Рис. 3.1. Пример использования технологии AJAX

Прежде чем изучать основы этой замечательной технологии, рассмотрим альтернативный способ общения Web-браузера с сервером без перезагрузки Web-страницы.

Внимание!

Технология AJAX позволяет загружать данные исключительно с Web-сервера. Для тестирования примеров из книги нужно установить на компьютер одну из программ: XAMPP, Денвер или Open Server. Для запуска серверных программ можно также воспользоваться виртуальным хостингом с поддержкой PHP.

Обмен данными с помощью тега <iframe>

После заполнения формы и щелчка на кнопке Submit данные будут отправлены серверу, и ответ сервера полностью заменит текущую Web-страницу. Однако если в параметре target тега <form> указать название фрейма, данные формы будут загружены в этот фрейм, а текущая Web-страница останется без изменений. На этом и основан альтернативный способ обмена данными без перезагрузки Web-страницы.

Для создания фрейма используется тег <iframe> с нулевой высотой и шириной. Более того, обычно фрейм полностью скрывают от глаз пользователей, присваивая значение none атрибуту display. Название этого фрейма указывается в параметре target тега <form>. После отправки формы скрипт на сервере должен вернуть фрагмент кода на языке JavaScript, который произведет изменения в текущей Web-странице.

Рассмотрим все на примере. Создадим документ с формой (листинг 3.1), который будет обмениваться данными с файлом ajax.php (листинг 3.2).

Листинг 3.1. Использование тега <iframe>

<!doctype html>
<html lang="ru">
<head>
   <meta charset="utf-8">
   <meta name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no">
   <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
   <title>Использование тега &lt;iframe&gt;</title>
</head>
<body>
<div class="container my-3">
  <form action="ajax.php" method="GET" target="frame_ajax">
    <div class="form-group">
      <input type="text" class="form-control" name="txt1" id="txt1">
    </div>
    <button type="submit" class="btn btn-primary">Отправить</button>
  </form>
</div>
<div class="container my-3">
  <div id="div_ajax"></div>
  <iframe name="frame_ajax" src="ajax.php" width="0" 
          height="0" style="display: none"></iframe>
</div>
</body>
</html>

Листинг 3.2. Исходный код файла ajax.php

<?php
// Запрещаем кеширование
header('Expires: Tue, 12 May 2020 01:00:00 GMT');
header('Cache-Control: no-store, no-cache, must-revalidate');
header('Pragma: no-cache');
// Указываем MIME-тип и кодировку
header('Content-Type: text/html; charset=utf-8');
if ( isset($_GET['txt1']) ) {
   $msg = 'Данные - ' . $_GET['txt1'];
   echo '<script>', "\n";
   echo 'parent.document.getElementById("txt1").value = "";', "\n";
   echo 'parent.document.getElementById("div_ajax").innerHTML = "';
   echo htmlspecialchars($msg, ENT_COMPAT, 'UTF-8'), '";';
   echo "\n";
   echo "</script>\n";
}
else {
   echo 'Данные не получены';
}

После заполнения формы и щелчка на кнопке Отправить во фрейм с названием frame_ajax будет загружен фрагмент кода JavaScript (листинг 3.3), сформированный скриптом ajax.php.

Листинг 3.3. Исходный код, возвращаемый сервером

<script>
parent.document.getElementById("txt1").value = "";
parent.document.getElementById("div_ajax").innerHTML = "Данные - Строка";
</script>

Данный скрипт очищает поле в форме и выводит полученные данные внутри тега <div> с идентификатором div_ajax. Для получения ссылки на родительское окно используется свойство parent объекта window. Вместо свойства parent можно воспользоваться свойством top, которое возвращает ссылку на самое верхнее родительское окно:

top.document.getElementById("txt1").value = "";
top.document.getElementById("div_ajax").innerHTML = "Данные - Строка";

Получить ссылку на элемент HTML-документа по его идентификатору позволяет метод getElementById() объекта document. После получения ссылки мы можем изменить значение элемента. Для изменения данных в текстовом поле достаточно изменить значение свойства value. Изменить содержимое тега <div> можно с помощью свойства innerHTML, которое не только выводит текстовую информацию, но и обновляет объектную модель HTML-документа.

На самом деле использование тега <iframe> не является единственной альтернативой технологии AJAX. Вместо этого тега можно динамически изменять параметр src тега <script>, передавая параметры в URL-адресе. В ответ скрипт на сервере также должен сформировать фрагмент кода JavaScript, который изменит текущую Web-страницу без перезагрузки.

Все рассмотренные нами способы позволяют возвращать результат только в виде фрагмента кода JavaScript. Возможности технологии AJAX гораздо шире. Мы можем получить ответ в виде XML-документа, фрагмента HTML-документа, скрипта на языке JavaScript, объекта JSON или просто текста. Передать запрос на сервер можно как методом GET, так и методом POST. Рассмотрим технологию AJAX более подробно.

Учебник по jQuery и AJAX в формате PDF

Помощь сайту

ЮMoney (Yandex-деньги): 410011140483022

ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов