Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
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-страницы.
Обмен данными с помощью тега <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>Использование тега <iframe></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 более подробно.
Помощь сайту
ЮMoney (Yandex-деньги): 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов