JSON и AJAX¶

JSON представляет один из самых популярных форматов хранения и передачи данных, и Express имеет все возможности для работы с JSON.

Пусть в папке проекта имеется файл index.htm со следующим кодом:

<!DOCTYPE html>
<html>
    <head>
        <title>Регистрация</title>
        <meta charset="utf-8" />
    </head>
    <body>
        <h1>Введите данные</h1>
        <form name="registerForm">
            <label>Имя</label><br />
            <input
                type="text"
                name="userName"
            /><br /><br />
            <label>Возраст</label><br />
            <input
                type="number"
                name="userAge"
            /><br /><br />
            <button type="submit" id="submit">
                Отправить
            </button>
        </form>
        <script>
            document
                .getElementById('submit')
                .addEventListener('click', function (e) {
                    e.preventDefault();
                    // получаем данные формы
                    let registerForm =
                        document.forms['registerForm'];
                    let userName =
                        registerForm.elements['userName']
                            .value;
                    let userAge =
                        registerForm.elements['userAge']
                            .value;
                    // сериализуем данные в json
                    let user = JSON.stringify({
                        userName: userName,
                        userAge: userAge,
                    });
                    let request = new XMLHttpRequest();
                    // посылаем запрос на адрес "/user"
                    request.open('POST', '/user', true);
                    request.setRequestHeader(
                        'Content-Type',
                        'application/json'
                    );
                    request.addEventListener(
                        'load',
                        function () {
                            // получаем и парсим ответ сервера
                            let receivedUser = JSON.parse(
                                request.response
                            );
                            console.log(
                                receivedUser.userName,
                                '-',
                                receivedUser.userAge
                            ); // смотрим ответ сервера
                        }
                    );
                    request.send(user);
                });
        </script>
    </body>
    <html></html>
</html>

Здесь, как и в прошлой теме, определена форма с двумя полями для ввода имени и возраста пользователя. Но теперь с помощью обработчика нажатия перехватывается отправка этой формы. Мы получаем значения ее полей и сериализум в объект json, который затем отправляется на сервер с помощью ajax на адрес /user.

Далее определим в главном файле приложения - в app.js код, который бы принимал отправленные данные:

const express = require('express');

const app = express();
// создаем парсер для данных в формате json
const jsonParser = express.json();

app.post('/user', jsonParser, function (request, response) {
    console.log(request.body);
    if (!request.body) return response.sendStatus(400);

    response.json(request.body); // отправляем пришедший ответ обратно
});

app.get('/', function (request, response) {
    response.sendFile(__dirname + '/index.htm');
});

app.listen(3000);

Прежде всего для получения данных в формате json необходимо создать парсер с помощью функции json:

const jsonParser = express.json();

В реальности данный парсер будет использовать модуль bodyParser, который использовался нами ранее для парсинга данных отправленной формы.

И поскольку с клиентом мы взаимодействуем через формат json, то данные клиенту отправляются с помощью метода response.json():

app.post('/user', jsonParser, function (request, response) {
    console.log(request.body);
    if (!request.body) return response.sendStatus(400);

    response.json(request.body); // отправляем пришедший ответ обратно
});

Следует отметить, что в принципе мы можем отправить объект и с помощью стандартного метода response.send(request.body). В реальности метод response.json() устанавливает для заголовка Content-Type значение application/json, серилизует данные в json с помощью функции JSON.stringify() и затем отправляет данные с помощью response.send().

Для получения данных, как и в случае с формами, используются выражения типа request.body.userName, где request.body инкапсулирует данные формы, а userName - ключ данных.

При обращении к корню веб-приложения пользователю будет отправляться содержимое файла index.htm с формой ввода данных.

Запустим приложение и обратимся к корню веб-сайта. Введем какие-нибудь данные и после отправки в консоли браузера отобразится ответ сервера:

4.22.png