Обработка ответа RESTful Web-сервиса JQuery’ом

Этот урок освещает процесс создания простого Backbone клиента, который обрабатывает ответ от Spring MVC RESTful Web Service.

Что вы создадите

Вы создадите jQuery клиент, который обрабатывает ответ от Spring MVC web-сервиса. В частности, клиент будет обрабатывать ответ от сервиса, созданного в Создание RESTful Web Service c CORS.

jQuery клиент будет доступен при открытии в браузере файла index.html и будет обрабатывать ответ от запроса к сервису:

http://rest-service.guides.spring.io/greeting

Сервис будет отвечать JSON приветствием:

{"id":1,"content":"Hello, World!"}

Клиент будет отображать ID и content в DOM.

Вы можете изменить приветствие дополнительной строков запроса в url:

http://localhost:8080/?User

Код будет отправлять параметр к REST сервису и отображать измененное приветствие в DOM.

Что вам потребуется

Примерно 15 минут свободного времени
Любимый текстовый редактор
Современный web-браузер
Интернет-соединение

Создание jQuery контроллера

Для начала, вы создадите jQuery модуль контроллера, который будет обрабатывать ответ от REST сервиса:

public/hello.js

$(document).ready(function() {
    $.ajax({
        url: "http://rest-service.guides.spring.io/greeting"
    }).then(function(data) {
       $('.greeting-id').append(data.id);
       $('.greeting-content').append(data.content);
    });
});

Этот модуль контроллера представлен как простая JavaScript функция. Она использует jQuery метод $.ajax() для обработки ответа от REST сервиса http://rest-service.guides.spring.io/greeting. В случае успеха, он получит JSON в виде переменной data, фактически делая его объектом Greeting модели. Значения id и content будут добавлены к greeting-id и greeting-content DOM элементам соответственно.

Обратите внимание на использование jQuery обещания .then(). Это направляет jQuery на выполнение анонимной функции после выполнении метода $.ajax(), передавая data в качестве результата AJAX запроса.

Создание страницы приложения

Теперь, когда у вас есть jQuery контроллер, вы создадите HTML страницу, которую будет загружать клиент в браузере:

public/index.html

<!DOCTYPE html>
<html>
    <head>
        <title>Hello jQuery</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script src="hello.js"></script>
    </head>

    <body>
        <div>
            <p class="greeting-id">The ID is </p>
            <p class="greeting-content">The content is </p>
        </div>
    </body>
</html>

Обратите внимание на следующие два тэга скриптов в секции <head>:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="hello.js"></script>

Первый тэг загружает минифицированную jQuery библиотеку(jquery.min.js) из сети доставки контента(CDN), поэтому вам не нужно загружать jQuery и помещать в проект. Второй загружает код контроллера(hello.js) из каталога приложения.

Также обратите внимание, что тэги <p> включают атрибуты class:

<p class="greeting-id">The ID is </p>
<p class="greeting-content">The content is </p>

Эти атрибуты class помогают jQuery находить HTML элементы и обновлять их текст значениями id и content.

Запуск клиента

Чтобы запустить клиент, вам необходимо поднять web сервер. Spring Boot CLI (Command Line Interface) включает встроенный Tomcat сервер, который предоставляет простой подход к обработке web содержимого. Более подробную информацию об установке и использовании CLI смотрите в учебном материале Создание приложений с Spring Boot.

Для обработки статического содержимого вам необходимо создать минимальное количество кода. Приведенный ниже app.groovy скрипт достаточен для того, чтобы Spring Boot знал, что вы хотите запустить Tomcat:

app.groovy

@Controller class JsApp { }

Теперь вы можете запустить приложение, используя Spring Boot CLI:

spring run app.groovy

Когда приложение запустится, откройте http://localhost:8080 в вашем браузере, где вы увидите:

Значение ID будет увеличиваться каждый раз при обновлении страницы

Итог

Поздравляем! Вы только что разработали jQuery клиент, который обрабатывает ответ от Spring RESTful web сервиса.

С оригинальным текстом урока вы можете ознакомиться на spring.io.