Практика использования AJAX

Код ответа сервера

Не всегда запрос к серверу проходит успешно. Бывают проблемы со связью, ошибки в работе самого сервера и другие сбои. И такие ситуации нужно учитывать. Для этого сервер вместе с данными возвращает код ответа. Если код ответа сервера - 200, значит зпрос прошёл успешно. Если код другой, то возникла какая-то ошибка. В этом случае на стороне клиента не должен выполняться код, который принимает и обрабатывает данные от сервера, ведь данные не получены. Более того, иногда нужно сообщить пользователю, что действие, которое он хотел совершить, не удалось. Или как-то иначе отреагировать на то, что от сервера не получен нужный результат.

Код ответа сервера содержится в свойстве status объекта XMLHttpRequest. Для примера создадим страницу, оправляющую запрос, и сделаем в скрипте проверку ответа сервера:

HTML код:

<input type="button" value="Отправить">
<div></div>

JavaScript:

var button=document.querySelector('input');
var div=document.querySelector('div');
button.onclick = function ()
  {
  var xhr = new XMLHttpRequest();
  xhr.open('GET','ans.php',true);
  xhr.send();
  xhr.onreadystatechange=function ()
    {
    if (xhr.readyState == 4)
      {
      if (xhr.status == 200)
        {
        var an=xhr.responseText;
        div.innerHTML+=an;
        }
      else
      div.innerHTML+='Ошибка запроса. Код '+xhr.status;
      }
    }
  }

После получения ответа проверяется его код. В строке 22 указано условие: если код ответа - 200, то обрабатываются полученные данные. В строке 27 задано, что если код ответа другой, то выводится информация об ошибке. Попробуйте в параметрах запроса неправильно указать файл, который запускается на сервере, и посмотрите, как будет работать скрипт.

Отображение запроса

На отправку запроса и получение ответа может потребоваться какое-то время. Поэтому пользователь, нажав кнопку для отправки запроса, должен видеть, происходит загрузка и нужно подождать или кнопка не сработала. Чтобы показать процесс запроса обычно меняют вид указателя мыши. Для этого скрипт должен отслеживать все события Readystatechange и если свойство readyState не равно 4, значит происходит запрос. Также можно разделить отправку запроса и получение ответа. Состояния 0 и 1 означают отправку данных, а 2 и 3 означают получение данных. Только нужно учитывать что при состоянии 3 событие может срабатывать многократно. Если запрос не предполагает изменения страницы, то всё равно желательно вывести сообщение о том, удачно ли прошёл запрос.