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

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

pic10_1.png

Рис. 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>Использование тега &lt;iframe&gt;</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 Учебник по jQuery 3.5.1 и AJAX в формате PDF

Помощь сайту

Yandex-деньги: 410011140483022

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

Поиск по сайту в Яндексе