Отправка и получение данных AJAX

Отправка данных

Отправить данные на сервер можно методами GET и POST. При методе GET данные добавляются в URL-адрес запроса, а при методе POST они находятся в теле запроса. Для этого они указываются как параметр метода send(). Сложность отправки данных состоит в том, что нужно правильно указать кодировку запроса. При отправке методом GET можно отдельно перевести данные в нужную кодировку. При методе POST нужно указать заголовок, определяющий Content-Type. Данные можно отправлять в разных кодировках. Мы рассмотрим самый распространённый вариант.

Отправка методом POST

При отправке данных методом POST, эти данные пишутся в теле запроса, которое является параметром метода send() объекта XMLHtmlRequest. То есть данные нужно указать в скобках при написании метода send(). Данные пишутся в таком виде:

параметр=значение

Если параметров несколько, то они разделяются знаком "&". Content-Type нужно указывать, даже если данные не содержат русские символы.

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

HTML код:

1
2
3
4
5
6
7
8
9
10

<!DOCTYPE html>
<html>
<head>
<title>Страница</title>
<meta charset="utf-8">
</head>
<body>
<div></div>
</body>
</html>

В блок мы будем записывать ответ сервера.

Добавим на страницу скрипт, который отправляет запрос на сервер, и получает ответ:

JavaScript:

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

var div=document.querySelector('div');
sendinf = function ()
  {
  var xhr = new XMLHttpRequest();
  xhr.open('POST','takeinf.php');
  xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
  xhr.send('login=pavel&password=1122');
  
  xhr.onreadystatechange=function ()
    {
    if (xhr.readyState == 4)
      {
      var an=xhr.responseText;
      div.innerHTML+=an;
      }
    }
  }
sendinf();

В строке 14 указывается метод запроса и то, что запускается файл takeinf.php. Затем устанавливается заголовок Content-Type и в теле запроса перечисляются данные, которые отправляются на сервер.

Страница отправляет данные в файл с именем takeinf.php. Его код такой:

takeinf.php:

1 2	<?php header('Content-type: text/html; charset=utf-8');

3
4
5
6

$login = $_POST['login'];
$password = $_POST['password'];
$an = 'Логин: '.$login.'Пароль: '.$password;
echo $an;

Скрипт простой, разъяснений он не требует.

Объект FormData

Существует ещё один способ отправки данных - с использованием специального объекта FormData. Он более удобный, но не все браузеры поддерживают методы этого объекта. При отправке этого объекта применяется кодировка multipart/form-data. Она установлена сразу и менять её не нужно. Кроме того, нет необходимости перечислять все данные. В теле запроса пишется сам объект и все данные из формы будут отправлены на сервер.

FormData это объект формы. Он создаётся так:

имя формы = new FormData();

Если в скобках ничего не указано, то будет создана новая форма. А если в скобках указать существующую форму, то оъект будет с ней связан.

В объект можно добавить новые элементы формы.

форма.append (имя элемента, значение элемента)

При этом, изменить значения элементов обычным способом невозможно. Для этого нужно использовать методы объекта FormData.

Добавим на страницу форму, данные из которой отправляются на сервер:

HTML код:

8
9
10

<form>
<input name="login" value="Ivan">
</form>

Нужно понимать, что мы делаем не отправку формы, а отправку данных, находящихся в форме. Ведь у формы не указано, на какой URL она отправляется. Кроме того, когда происходит отправка формы, то загружается новая страница, а мы отправляем запрос без перезагрузки страницы. Данные будет отправлять объект XMLHttpRequest, а форма нужна только для того, чтобы разместить в ней данные.

Добавим в скрипт код, в котором создадим объект FormData и свяжем его с формой, находящейся на странице:

JavaScript:

31
32
33

var form=document.querySelector('form');
var user = new FormData(form);
user.append('password', '1234');

В строке 33 мы добавили в форму ещё один элемент. Объект FormData не обращает внимание на то, что написано в поле для ввода. Он берёт значение из атрибута value. Если Вы введёте в поле для ввода какой-нибудь текст, то это не повлияет на отправленные данные. Поэтому тэгам <input> лучше задавать тип hidden. Данные для отправки записаны, осталось отправить запрос на сервер. Для этого добавим в скрипт такой код:

34
35
36
37
38
39
40
41
42
43
44
45
46
47
48

sendform = function ()
  {
  var xhr = new XMLHttpRequest();
  xhr.open('POST','takeinf.php');
  xhr.send(user);
  xhr.onreadystatechange=function ()
    {
    if (xhr.readyState == 4)
      {
      var an=xhr.responseText;
      div.innerHTML+='<br>'+an;
      }
    }
  }
sendform();

Эта функция практически такая же, как и предыдущая, только в теле запроса находится объект формы, а при добавлении ответа на страницу добавлен тэг <br>, чтобы данные находились на отдельной строке.

Получение данных

Когда ответом сервера является одна строка, то её просто отправляет конструкция echo. Их может быть несколько в коде скрипта, только не стоит ожидать, что данные придут такими же частями. Если нужно отправить несколько строк или чисел, то их можно объединить в одну строку и разделить каким-нибудь символом, а на странице получить отдельные строки при помощи разделителя. Если ответ сервера ещё сложнее, то данные можно поместить в объект, перевести его в формат JSON и отправить, а на странице снова получить объект. Рассмотрим этот способ.

Создадим файл takeform.php в котором создаётся объект, полученные данные записывается в его свойства и объект отправляется в качестве ответа сервера. Его код будет такой:

takeform.php:

3
4
5
6
7
8
9
10
11
12

class Users
  {
  var $login;
  var $password;
  }
$user = new Users;
$user->login=$_POST['login'];
$user->password=$_POST['password'];
$an=json_encode($user);
echo $an;

В строке 11 объект переводится в формат JSON и записывается в переменную $an. Затем он отправляется в виде ответа сервера.

На стороне клиента нужно ответ снова перевести в объект и можно использовать данные, которые он содержит. Изменим функцию sendform() так, чтобы она отправляла данные в файл takeform.php. Для этого нужно в строке 37 указать этот файл. Обработчик события Readystatechange теперь будет выглядеть так:

JavaScript:

39
40
41
42
43
44
45
46
47

xhr.onreadystatechange=function ()
  {
  if (xhr.readyState == 4)
    {
    var an=xhr.responseText;
    var obj = JSON.parse(an);
    div.innerHTML+='<br>Логин: '+obj.login+' Пароль: '+obj.password;
    }
  }

В строке 29 ответ сервера переводится в объект с именем obj.

Таким способом сервер отправляет данные.