XMLHttpRequest: обработка ответа онлайн урок.


В этом уроке научимся получать ответ запроса XMLHttpRequest. Для этого нам понадобятся свойства

  • readyState - содержит текущее состояние запроса
  • responseText - содержит тело ответа

Напомним скрипт из предыдущего урока:
request = getXMLHttpRequest();

request.onreadystatechange = function() {
   console.log(request.readyState);
}

request.open('GET', '/some_file.txt', true);
request.send(null)


Все, что нам необходимо исправить, это записать в функцию-обработчик изменения состояния запроса код, который отследит состояние со значением 4 и выведет на экран значение свойства responseText.

request = getXMLHttpRequest();

request.onreadystatechange = function() {
   if (request.readyState == 4) {
     alert(request.responseText);
   }
}

request.open('GET', '/some_file.txt', true);
request.send(null);


На экране увидим модальное окно с содержимым текстового файла some_file.txt. Попробуем теперь обратиться не к простому текстовому файлу, а к PHP скрипту. Создадим файл test.php, в котором запишем следующий код:

<?php 
$a = 2 + 2 * 2;
echo $a;


Подставим название файла в запрос:

request.open('GET', '/test.php', true);


Теперь, при исполнении скрипта мы будем видеть 6 в модальном окне, т.к. скрипт формирует тело запроса с содержимым в виде строки '6'.

request = getXMLHttpRequest();

request.onreadystatechange = function() {
   if (request.readyState == 4) {
     alert(request.responseText);
   }
}
//request.open('GET', '/some_file.txt', true);
request.open('GET', '/test.php', true);
request.send(null);


В следующих уроках мы попробуем усложнить задачу и обработать тело ответа, в котором мы передадим JSON строку.

Замечание. Используя свойства status и statusText можно получить информацию о статусе ответа, например 200 (OK), 404 (Not Found) и т.д.