Этот сайт использует cookies. Продолжение работы с сайтом означает, что Вы согласны!
Основы технологии AJAX
AJAX (Asynchronous Javascript And Xml, асинхронный JavaScript и XML) — это технология взаимодействия веб-браузера с сервером без перезагрузки страницы. Веб-браузер в фоновом режиме отправляет запрос серверу. На сервере скрипт обрабатывает переданный запрос и отправляет ответ в виде XML-документа, фрагмента HTML-документа, скрипта JavaScript, объекта JSON или просто текста. Полученный ответ обрабатывается в веб-браузере с помощью языка JavaScript, и на основе ответа обновляется структура текущего HTML-документа. Таким образом не происходит перезагрузка всей веб-страницы, а только лишь изменяется какой-либо ее фрагмент. Классический пример технологии AJAX демонстрирует поисковая система Google, позволяющая при наборе поисковой фразы в строке запроса предлагать различные варианты, начинающиеся с набранных букв (рис. 10.1).
Рис. 10.1. Пример использования технологии AJAX
Но прежде чем изучать основы этой замечательной технологии, рассмотрим альтернативный способ общения веб-браузера с сервером без перезагрузки веб-страницы.
Обмен данными с помощью тега <iframe>
После заполнения формы и щелчка на кнопке Submit данные будут отправлены серверу, и ответ сервера полностью заменит текущую веб-страницу. Однако если в параметре target
тега <form>
указать название фрейма, данные формы будут загружены в этот фрейм, а текущая веб-страница останется без изменений. На этом и основан альтернативный способ обмена данными без перезагрузки веб-страницы.
Для создания фрейма используется тег <iframe>
с нулевой высотой и шириной. Более того, обычно фрейм полностью скрывают от глаз пользователей, присваивая значение none
атрибуту display
. Название этого фрейма указывается в параметре target
тега <form>
. После отправки формы скрипт на сервере должен вернуть фрагмент кода на языке JavaScript, который произведет изменения в текущей веб-странице.
Рассмотрим все на примере. Создадим документ с формой (листинг 10.1), который будет обмениваться данными с файлом ajax.php (листинг 10.2), расположенным на сервере.
Листинг 10.1. Использование тега <iframe>
<!doctype html>
<html>
<head>
<title>Использование тега <iframe></title>
<meta charset="utf-8">
</head>
<body>
<form action="ajax.php" method="GET" target="frame_ajax">
<input type="text" name="text1" id="text1"><br>
<input type="submit" value="Отправить"><br>
</form>
<div id="otvet"></div>
<iframe name="frame_ajax" src="ajax.php" width="0"
height="0" style="display:none">
</body>
</html>
Листинг 10.2. Исходный код файла ajax.php
<?php
header('Content-Type: text/html; charset=utf-8');
if (isset($_GET['text1'])) {
$msg = 'Данные - ' . $_GET['text1'];
echo '<script>', "\n";
echo 'parent.document.getElementById("text1").value = "";', "\n";
echo 'parent.document.getElementById("otvet").innerHTML = "';
echo htmlspecialchars($msg, ENT_COMPAT, 'UTF-8'), '";';
echo "\n";
echo "</script>\n";
}
else {
echo 'Данные не получены';
}
?>
После заполнения формы и щелчка на кнопке Отправить во фрейм с названием frame_ajax
будет загружен фрагмент кода JavaScript (листинг 10.3), сформированный скриптом ajax.php.
Листинг 10.3. Исходный код, возвращаемый сервером
<script>
parent.document.getElementById("text1").value = "";
parent.document.getElementById("otvet").innerHTML = "Данные - Строка";
</script>
Данный скрипт очищает поле в форме и выводит полученные данные внутри тега <div>
с идентификатором otvet
. Для получения ссылки на родительское окно используется свойство parent
объекта window
. Вместо свойства parent
можно воспользоваться свойством top
, которое возвращает ссылку на самое верхнее родительское окно.
top.document.getElementById("text1").value = "";
top.document.getElementById("otvet").innerHTML = "Данные - Строка";
Получить ссылку на элемент HTML-документа по его идентификатору позволяет метод getElementById()
объекта document
. После получения ссылки мы можем изменить значение элемента. Для изменения данных в текстовом поле достаточно изменить значение свойства value
. Изменить содержимое тега <div>
можно с помощью свойства innerHTML
, которое не только выводит текстовую информацию, но и обновляет объектную модель HTML-документа.
На самом деле использование тега <iframe>
не является единственной альтернативой технологии AJAX. Вместо этого тега можно динамически изменять параметр src
тега <script>
, передавая параметры в URL-адресе. В ответ скрипт на сервере также должен сформировать фрагмент кода JavaScript, который изменит текущую веб-страницу без перезагрузки.
Все рассмотренные нами способы позволяют возвращать результат только в виде фрагмента кода JavaScript. Возможности технологии AJAX гораздо шире. Мы можем получить ответ в виде XML-документа, фрагмента HTML-документа, скрипта JavaScript, объекта JSON или просто текста. Передать запрос на сервер можно как методом GET
, так и методом POST
. Рассмотрим технологию AJAX более подробно.
Объект XMLHttpRequest
Для реализации обмена данными между веб-браузером и сервером используется объект XMLHttpRequest
. Этот объект в фоновом режиме может отправить запрос и получить результат, который не отображается в окне веб-браузера. Получить доступ к результату запроса можно с помощью языка JavaScript.
Прежде чем использовать объект XMLHttpRequest
, необходимо его создать с помощью оператора new
. Проблема заключается в том, что в разных веб-браузерах объект создается по-разному. В одних используется встроенный объект window.XMLHttpRequest
, а в других — ActiveX-объект MSXML2.XMLHTTP
или Microsoft.XMLHTTP
. Кроссбраузерный код создания объекта приведен в листинге 10.4.
Листинг 10.4. Создание объекта XMLHttpRequest
if (window.XMLHttpRequest) {
link = new XMLHttpRequest();
}
else {
if (window.ActiveXObject) {
var XMLHTTP = ["MSXML2.XMLHTTP.6.0", "MSXML2.XMLHTTP.3.0",
"MSXML2.XMLHTTP", "Microsoft.XMLHTTP"];
for (var i=0; i<4; i++) {
try { // Обработка исключений
link = new ActiveXObject(XMLHTTP[i]);
break; // Если объект создан, то выход из цикла
}
catch (e) {}
}
}
}
Объект XMLHttpRequest
имеет следующие методы.
open(<Метод передачи данных>, <URL-адрес>, <Тип запроса>)
— подготавливает запрос к отправке на сервер. В первом параметре можно указать методGET
илиPOST
. Параметр<URL-адрес>
предназначен для указания URL-адреса скрипта, которому будет отправлен запрос. Можно указать как абсолютный путь, так и относительный. При указании абсолютного пути следует иметь в виду, что запрос может быть отправлен только к домену, с которого был загружен текущий документ. Кроме того, некоторые веб-браузеры не позволяют отправить запрос к домену http://www.site.ru/, если документ был загружен с http://site.ru/. По этой причине лучше указывать относительный путь от корня сайта или от местонахождения текущего документа. Если для отправки данных используется методGET
, то после названия скрипта указываются передаваемые параметры. В параметре<Тип запроса>
могут быть заданы следующие значения:
true
— асинхронный запрос (выполнение текущего скрипта не приостанавливается до получения ответа);false
— синхронный запрос (выполнение текущего скрипта будет продолжено только после получения ответа сервера).
В большинстве случаев используются именно асинхронные запросы, так как ответ от сервера может занять некоторое время. Метод open()
имеет еще два необязательных параметра: имя пользователя и пароль. На практике эти параметры применяются очень редко, и мы их рассматривать не будем.
setRequestHeader(<Заголовок>, <Значение>)
— позволяет добавить заголовок запроса. В большинстве случаев используется для указания типа передаваемых данных методомPOST
.
link.setRequestHeader('Content-Type',
'application/x-www-form-urlencoded');
send(<Данные для отправки методом POST>)
— отправляет запрос на сервер. В качестве параметра при запросе методомGET
указывается значениеnull
.
link.send(null);
Для метода POST
указывается строка передаваемых данных. Передаваемые данные должны быть перекодированы с помощью функции encodeURIComponent()
.
param = "text1=" + encodeURIComponent("Текст");
link.send(param);
Рассмотрим свойства объекта XMLHttpRequest
.
onreadystatechange
— в этом свойстве указывается ссылка на функцию-обработчик при асинхронных запросах.
link.onreadystatechange = f_razborRequest;
Обратите внимание на тот факт, что название функции указывается без круглых скобок и параметров. Если указать круглые скобки, то смысл происходящего будет другим. Функция будет выполнена, и результат ее работы будет присвоен свойству onreadystatechange
. Так как в функцию-обработчик невозможно передать параметр, то внутри функции мы можем обратиться к объекту XMLHttpRequest
, только если он будет объявлен в глобальной области видимости. Это не всегда удобно. Однако передать параметр можно, указав в качестве обработчика анонимную функцию, внутри которой происходит вызов функции с параметром.
link.onreadystatechange = function() {
f_razborRequest(link);
};
Этим способом мы и будем пользоваться в дальнейших примерах. Функция f_razborRequest()
будет вызывать несколько раз при каждом изменении статуса обработки запроса.
readyState
— содержит текущий статус обработки запроса. Может принимать следующие значения:
0
— объект запроса создан операторомnew
;1
— запрос подготовлен с помощью методаopen()
;2
— запрос отправлен методомsend()
;3
— ответ доступен, но загружен не полностью;4
— ответ полностью загружен с сервера и доступен для обработки.
В дальнейшем нас будет интересовать именно статус 4;
status
— содержит код возврата при значении свойстваreadyState
, равном 4. Успешными считаются коды в пределах от 200 до 299, а также код 304, указывающий, что документ не был изменен с последнего запроса.
Получить доступ к ответу сервера можно с помощью двух свойств.
responseText
— ответ в виде текста, фрагмента HTML-документа или объекта JSON.responseXML
— ответ в виде XML-документа. Свойство будет доступно, только если в заголовках ответа сервера указан заголовок
Content-Type: application/xml
или
Content-Type: text/xml
Кроме того, XML-документ должен быть иметь правильную структуру и соответствовать спецификации DOM.
Итак, как вы уже знаете, ответ сервера может быть предоставлен в виде:
- фрагмента HTML-документа, скрипта JavaScript или просто текста;
- XML-документа;
- объекта JSON.
Рассмотрим каждый вариант обмена данными более подробно.
Самоучитель по jQuery Учебник по jQuery 3.5.1 и AJAX в формате PDF
Помощь сайту
Yandex-деньги: 410011140483022
ПАО Сбербанк:
Счет: 40817810855006152256
Реквизиты банка:
Наименование: СЕВЕРО-ЗАПАДНЫЙ БАНК ПАО СБЕРБАНК
Корреспондентский счет: 30101810500000000653
БИК: 044030653
КПП: 784243001
ОКПО: 09171401
ОКОНХ: 96130
Скриншот реквизитов