Обмен данными в текстовом формате

Обмен данными с помощью фрагментов HTML-страницы, фрагментов кода JavaScript или текста является самым простым способом получения результата. Ответ сервера будет сохранен в свойстве responseText объекта XMLHttpRequest. Для отображения результата запроса на веб-странице достаточно присвоить значение свойства responseText свойству innerHTML какого-либо существующего HTML-элемента. На основании вставленного фрагмента веб-браузер обновит объектную модель HTML-документа и изменит внешний вид веб-страницы без перегрузки страницы.

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

Листинг 10.5. Обмен данными в текстовом формате

<!doctype html>
<html>
<head>
<title>Обмен данными в текстовом формате</title>
<meta charset="utf-8">
<script>
function f_GET() {
   // Отправка запроса методом GET
   var link;
   var url;
   var txt = document.getElementById("text1").value;
   if (txt == "") {
      window.alert("Не заполнено поле");
      return false;
   }
   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) {}
         }
      }
   }
   if (!link) {
      window.alert("Ваш веб-браузер не поддерживает технологию Ajax");
      return false;
   }
   url = "/ajax.php?text1=" + encodeURIComponent(txt);
   // Подготовка асинхронного запроса методом GET
   link.open('GET', url, true);
   link.onreadystatechange = function() {
      f_razborRequest(link);
   };
   link.send(null); // Отправляем запрос
   document.getElementById("otvet").innerHTML = "Загрузка...";
}

function f_POST() {
   // Отправка запроса методом POST
   var link;
   var param;
   var txt = document.getElementById("text1").value;
   if (txt == "") {
      window.alert("Не заполнено поле");
      return false;
   }
   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) {}
         }
      }
   }
   if (!link) {
      window.alert("Ваш веб-браузер не поддерживает технологию Ajax");
      return false;
   }
   // Передаваемые параметры
   param = "text1=" + encodeURIComponent(txt);
   // Подготовка асинхронного запроса методом POST
   link.open('POST', '/ajax.php', true);
   // Добавляем HTTP-заголовок
   link.setRequestHeader('Content-Type',
                         'application/x-www-form-urlencoded');
   link.onreadystatechange = function() {
      f_razborRequest(link);
   };
   link.send(param); // Отправляем запрос
   document.getElementById("otvet").innerHTML = "Загрузка...";
}

function f_razborRequest(link) {
   // Обрабатываем асинхронный запрос
   if (link.readyState == 4) {
      if (link.status == 200) { // Запрос успешно обработан
         var otvet = link.responseText;
         document.getElementById("text1").value = "";
         document.getElementById("otvet").innerHTML = otvet;
      }
      else {
         document.getElementById("otvet").innerHTML = "Ошибка";
      }
   }
}
</script>
</head>
<body>
<input type="text" id="text1"><br>
<input type="button" value="Отправить методом GET" onclick="f_GET();">
<br>
<input type="button" value="Отправить методом POST"
       onclick="f_POST();">
<div id="otvet"></div>
</body>
</html>

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

<?php
header('Content-Type: text/html; charset=utf-8');
if (isset($_GET['text1'])) {
   echo 'Метод GET – ', $_GET['text1'];
}
else {
   if (isset($_POST['text1'])) {
      echo 'Метод POST – ', $_POST['text1'];
   }
   else {
      echo 'Данные не получены';
   }
}
?>

После загрузки кода из листинга 10.5 на веб-странице будет отображено поле для ввода и две кнопки. При щелчке на кнопке Отправить методом GET будет вызвана функция f_GET(), а при щелчке на кнопке Отправить методом POST — функция f_POST(). Результат выполнения запроса будет выведен в теге <div>, имеющем идентификатор otvet (id="otvet").

После заполнения формы и щелчка на кнопке Отправить методом GET внутри функции f_GET() получаем значение текстового поля и сохраняем его в переменной txt.

var txt = document.getElementById("text1").value;

Далее проверяем, заполнено ли поле ввода, и, если оно не заполнено, выводим сообщение и завершаем выполнение функции.

if (txt == "") {
   window.alert("Не заполнено поле");
   return false;
}

На следующем этапе пытаемся создать объект XMLHttpRequest. Если объект создать не удалось, выводим сообщение и завершаем выполнение функции.

if (!link) {
   window.alert("Ваш веб-браузер не поддерживает технологию Ajax");
   return false;
}

Затем формируем строку запроса, которую будем передавать методом GET. Все данные, введенные пользователем в поле ввода, перекодируем с помощью метода encodeURIComponent(). Сформированную строку сохраняем в переменной url.

url = "/ajax.php?text1=" + encodeURIComponent(txt);

Далее с помощью метода open() подготавливаем объект к отправке асинхронного запроса методом GET.

link.open('GET', url, true);

В свойстве onreadystatechange указываем анонимную функцию, в которой вызывается функция f_razborRequest(). Благодаря этому можем передать объект в качестве параметра функции. Функция f_razborRequest() будет вызываться при каждом изменении статуса запроса.

link.onreadystatechange = function() {
   f_razborRequest(link);
};

С помощью метода send() отправляем запрос на сервер. Так как мы передаем данные методом POST, в качестве параметра метода send() указываем значение null.

link.send(null);

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

document.getElementById("otvet").innerHTML = "Загрузка...";

При каждом изменении статуса запроса будет вызываться функция f_razborRequest(). Внутри этой функции проверяем значение свойства readyState. Если статус запроса равен 4, то ответ полностью получен с сервера и доступен для обработки.

if (link.readyState == 4) {
...
}

Наличие статуса завершения еще не гарантирует успешность выполнения запроса. Для этого мы проверяем значение свойства status. Если значение равно 200, то запрос выполнен успешно. В этом случае получаем ответ сервера с помощью свойства responseText, очищаем поле ввода и присваиваем значение элементу с идентификатором otvet с помощью свойства innerHTML.

if (link.status == 200) {
   var otvet = link.responseText;
   document.getElementById("text1").value = "";
   document.getElementById("otvet").innerHTML = otvet;
}

В случае заполнения формы и последующего щелчка на кнопке Отправить методом POST внутри функции f_POST() мы получаем значение текстового поля и сохраняем его в переменной txt. Далее проверяем, заполнено ли поле ввода, и, если оно не заполнено, выводим сообщение и завершаем выполнение функции. На следующем этапе пытаемся создать объект XMLHttpRequest. Если объект создать не удалось, выводим сообщение и завершаем выполнение функции. Затем формируем строку запроса, которую будем передавать методом POST. Все данные, введенные пользователем в поле ввода, перекодируем с помощью метода encodeURIComponent(). Сформированную строку сохраняем в переменной param.

param = "text1=" + encodeURIComponent(txt);

Далее с помощью метода open() подготавливаем объект к отправке асинхронного запроса методом POST.

link.open('POST', '/ajax.php', true);

В первом параметре указываем метод POST, а во втором — передаем путь к скрипту относительно корня сайта. Значение третьего параметра (true) указывает, что запрос будет асинхронным.

При передаче данных методом POST необходимо дополнительно указать, что данные переданы из формы. Для этого в методе setRequestHeader указываем значение application/x-www-form-urlencoded.

link.setRequestHeader('Content-Type',
                      'application/x-www-form-urlencoded');

Далее, как обычно, в свойстве onreadystatechange указываем функцию-обработчик. Затем с помощью метода send() отправляем запрос на сервер. В качестве параметра указываем сформированную строку запроса, которую мы сохранили в переменной param.

link.send(param);

Дальнейшая обработка запроса происходит точно так же, как и при отправке запроса методом GET.

Теперь рассмотрим, что происходит при получении запроса сервером. Получив запрос, сервер создаст следующие переменные окружения:

$_GET['text1']
$_POST['text1']

Проверить существование переменных можно с помощью функции isset(). После получения переменных можем делать с ними все, что захотим. В этом примере мы просто возвращаем отправленное значение обратно веб-браузеру, дополнительно указывая, каким методом были получены данные.

Для корректного отображения отправленной информации указывается MIME-тип и кодировка с помощью функции header().

header('Content-Type: text/html; charset=utf-8');

Если кодировка не указана сервером, то веб-браузер по умолчанию предполагает, что ответ пришел в кодировке UTF-8. Так что если данные посылаются в другой кодировке, то ее необходимо обязательно указывать.

Предыдущая статья Все статьи Следующая статья