Отправка запроса AJAX

Способ отправки запроса

Запрос формируется с помощью специального объекта XMLHttpRequest. Функция отправки начинается с создания копии этого объекта:

9	var xhr = new XMLHttpRequest();

В свойствах объекта задаются различные параметры запроса, после чего он отправляется на сервер. Рассмотрим методы этого объекта. Метод open() устанавливает основные параметры запроса.

open (метод, URL, асинхронный запрос, логин, пароль)

Параметры:

метод - HTTP-метод. Обычно это GET или POST

URL - URL-адрес запроса. Чаще всего это будет адрес серверного скрипта, которому отправляется запрос.

асинхронный запрос - позволяет установить, синхронный будет запрос или ассинхронный. При синхронном запросе страница перестаёт реагировать на действия пользователя до тех пор, пока не придёт ответ сервера. Используется редко. Необязательный параметр. По умолчанию установлено значение true

логин - логин HTTP-авторизации, если есть

пароль - пароль HTTP-авторизации, если есть

Метод send() Отправляет запрос на сервер.

send (тело запроса)

Параметры:

тело запроса - данные, которые отправляются в запросе

Тело запроса есть при методе POST. При методе GET тела запроса нет, потому, что данные добавляются к URL-адресу. В этом случае у метода send() просто ставятся скобки.

9
10
11

var xhr = new XMLHttpRequest();
xhr.open('GET','ans.php',true);
xhr.send();

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

Получение ответа

От начала отправки до получения ответа запрос имеет пять разных состояний. Первые четыре мы пока не рассматриваем. А вот пятое состояние - это завершение запроса. Оно имеет номер 4, потому что остчёт начинается с нуля. При этом состоянии ответ сервера получен и, если сервер отправлял данные, то эти данные должны быть получены. При каждом изменении состояния срабатывает событие Readystatechange. Свойство readyState объекта XMLHttpRequest содержит номер состояния запроса.

Для получения ответа сервера нужно назначить обработчик события Readystatechange, в котором нужно проверять состояние запроса. Когда состояние получает номер 4, то можно использовать ответ сервера, который содержится в различных свойствах объекта XMLHttpRequest. Основное свойство - responseText, которое содержит текст ответа сервера. А остальные мы рассмотрим позднее.

Для примера создадим страницу, на которую добавим кнопку. При нажатии на эту кнопку, страница будет запускать серверный скрипт, который будет отправлять текст и он будет добавляться на страницу. Код страницы будет такой:

HTML код:

1
2
3
4
5
6
7
8
9
10
11

<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
<input type="button" value="Отправить">
<div></div>
</body>
</html>

Тэг <div> находится на странице для того, чтобы записывать в него данные, полученные от сервера. Теперь нужно добавить на страницу скрипт, который будет отправлять запрос на сервер и обрабатывать ответ. Скрипт получается такой:

JavaScript:

11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

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)
      {
      var an=xhr.responseText;
      div.innerHTML+=an;
      }
    }
  }

Комментарии:

11, 12 - находим кнопку и блок

13 - ставим на кнопку обработчик события Click

15 - создаём объект XMLHttpRequest

16 - устанавливаем параметры запроса. Метод GET. Скрипт, который будет запускаться на сервере: ans.php. Указано только имя файла, потому, что он будет расположен в той же папке, что и страница. Запрос асинхронный.

17 - отправляем запрос

18 - устанавливаем обработчик события, возникающего при изменении состояния запроса

19 - если запрос завершён,

21 - записываем в переменную текст, отправленный сервером

22 - добавляем этот текст в блок

Страница запускает на сервере файл ans.php, поэтому нужно создать этот файл. Расположим его в той же папке, где находится страница. Это обычный скрипт, который просто отправляет текст клиенту.

ans.php:

3	echo 'Текст от сервера';

Запустите страницу и нажмите кнопку. На страницу должен добавиться текст, отправленный сервером.

Это простой пример обращения к серверу без перезагрузки страницы. На практике скрипты получаются сложнее, потому что в примере не учтены некоторые моменты и не использованы многие возможности, а показан только общий принцип отправки запросов. А более подробно этот вопрос рассмотрен в следующих темах.