Урок 8: Практика AJAX, работа с публичным API в jQuery

Мы подошло к одному из самых интересных и практичных уроков в нашем курсе по jQuery. До этого мы много говорили о теории AJAX, а сегодня будем применять эти знания на реальных примерах. Мы научимся «разговаривать» с внешними сервисами, получать от них данные и красиво показывать их на нашей странице. Мы создадим собственный виджет погоды, используя бесплатный API. Это тот самый навык, который оживляет статические сайты, делая их динамичными и современными

Где найти бесплатные API для тренировки?

Первым делом нам нужен источник данных. В реальной работе backend-разработчики создают API для фронтенда, но для обучения и тренировки нам прекрасно подойдут многочисленные бесплатные публичные API. Это специальные сервисы, которые предоставляют нам данные в удобном формате, чаще всего в JSON, просто в ответ на наш правильно составленный запрос.

Один из самых популярных для новичков сервисов, это JSONPlaceholder. Он предоставляет фейковые данные для тестирования и прототипирования, такие как посты, комментарии, пользователи и альбомы. Его главное преимущество, что он не требует регистрации или API-ключа. Вы просто отправляете запрос и получаете данные. Это идеальный полигон для наших первых экспериментов с $.get() и $.ajax().

Для более практичных и наглядных проектов, например, для создания виджета погоды, отлично подойдет OpenWeatherMap. Этот сервис предоставляет актуальные и прогнозные погодные данные. Для доступа к нему потребуется бесплатная регистрация для получения API-ключа (Token). Этот ключ нужно будет указывать в каждом вашем запросе. Не пугайтесь, процесс регистрации занимает пару минут. Помимо этих двух гигантов, существует целый мир бесплатных API, такие как The Cat API (для изображений котиков), Dog CEO API (собачки), News API (новостные заголовки), PokéAPI (всё о покемонах) и многие другие. Выбор зависит только от идеи вашего мини-проекта.

Практическая задача 1: Зайдите на сайт JSONPlaceholder и вручную перейдите по ссылке https://jsonplaceholder.typicode.com/posts. Вы увидите структуру данных, массив из объектов, каждый из которых представляет собой пост с такими полями, как userId, id, title и body. Теперь зарегистрируйтесь на OpenWeatherMap и получите свой API-ключ. Обратите внимание, что бесплатный тариф часто имеет лимиты по количеству запросов в минуту и в день, но для нашего обучения этого более чем достаточно.

Пишем запрос для получения данных

Давайте начнем с простого и надежного метода $.get(). Наша цель получить список постов с JSONPlaceholder и просто вывести полученный объект в консоль, чтобы убедиться, что всё работает.

Для этого нам понадобится всего несколько строк кода. Мы вызываем функцию $.get(), первым аргументом передаем в нее URL (адрес), по которому «лежат» наши данные, а вторым функцию-колбэк, которая сработает при успешном выполнении запроса. Полученные данные автоматически будут преобразованы из JSON в обычный JavaScript-объект, с которым мы уже умеем работать.

// Простой GET-запрос с использованием $.get()
$(document).ready(function() {
    // Отправляем запрос к API JSONPlaceholder
    $.get('https://jsonplaceholder.typicode.com/posts', function(data) {
        // data - это полученный массив с постами
        console.log('Данные успешно получены!');
        console.log(data); // Выводим весь массив в консоль
    });
});

После того как вы убедитесь, что в консоли браузера появился массив из 100 постов, можно усложнить задачу. Давайте получим не все посты, а только один, с конкретным идентификатором (id). В REST API для этого часто используется структура URL вида /posts/1. Давайте получим пост с id = 1.

// Получаем один конкретный пост
$(document).ready(function() {
    $.get('https://jsonplaceholder.typicode.com/posts/1', function(post) {
        // Теперь в переменной post лежит один объект-пост
        console.log('Пост №1 получен:');
        console.log('Заголовок:', post.title);
        console.log('Текст:', post.body);
    });
});

Практическая задача 2: Напишите код, который получает список комментариев к конкретному посту. Подсказка, на JSONPlaceholder для этого используется эндпоинт (адрес) https://jsonplaceholder.typicode.com/posts/1/comments, где 1 это id поста. Выведите полученные комментарии в консоль и изучите их структуру.

Обрабатываем JSON-ответ и отображаем данные на странице

Выводить данные в консоль это здорово для отладки, но наши пользователи их там не увидят. Следующий логичный шаг, это научиться красиво отображать эти данные на веб-странице. Допустим, у нас есть простой HTML-каркас, контейнер <div id="posts-container"></div>. Наша задача наполнить его карточками постов, полученных из API.

Для этого мы будем использовать наш старый добрый метод .html(), а также цикл для перебора всех постов в полученном массиве. Мы можем вручную сформировать HTML-строку для каждого поста и затем поместить всю эту разметку в наш контейнер.

// Получаем посты и отображаем их на странице
$(document).ready(function() {
    const $postsContainer = $('#posts-container');

    $.get('https://jsonplaceholder.typicode.com/posts', function(posts) {
        // Создаем переменную для накопления HTML
        let postsHTML = '';

        // Перебираем каждый пост в массиве
        $.each(posts, function(index, post) {
            // Для каждого поста формируем "карточку"
            postsHTML += `
                <div class="post-card">
                    <h3>${post.title}</h3>
                    <p>${post.body}</p>
                    <small>ID пользователя: ${post.userId}</small>
                </div>
            `;
        });

        // Вставляем всю сформированную разметку в контейнер
        $postsContainer.html(postsHTML);
    });
});

Обратите внимание на использование обратных кавычек (`) для создания шаблонных строк. Это современный стандарт JavaScript, который позволяет удобно вставлять переменные прямо в строку с помощью синтаксиса ${...}. Если бы мы использовали обычные кавычки, нам пришлось бы разбивать строку и склеивать ее с помощью оператора +, что выглядело бы гораздо громоздче.

Практическая задача 3: Модифицируйте код так, чтобы на страницу выводились не все 100 постов, а только первые 10. Подсказка: используйте метод .slice() для массива: posts.slice(0, 10). Также добавьте обработку ошибок с помощью .fail().

Создаем простой виджет погоды

Теперь давайте создадим что-то, что можно будет показать друзьям и похвастаться своими новыми навыками! Я предлагаю сделать простой, но функциональный виджет погоды. Для этого мы будем использовать API OpenWeatherMap. Нам понадобится наш API-ключ и знание города, для которого мы хотим узнать погоду.

Сначала подготовим HTML-структуру для нашего виджета.

<div class="weather-widget">
    <h2>Погода в городе</h2>
    <input type="text" id="city-input" placeholder="Введите город">
    <button id="get-weather-btn">Узнать погоду</button>
    <div id="weather-result"></div>
</div>

А теперь напишем JavaScript-код на jQuery, который будет обрабатывать клик по кнопке, отправлять запрос к API погоды и отображать результат.

$(document).ready(function() {
    const apiKey = 'YOUR_API_KEY'; // ЗАМЕНИТЕ НА ВАШ КЛЮЧ!
    const $weatherResult = $('#weather-result');
    const $cityInput = $('#city-input');

    $('#get-weather-btn').on('click', function() {
        const cityName = $cityInput.val().trim();

        if (!cityName) {
            alert('Пожалуйста, введите название города.');
            return;
        }

        // Формируем URL для запроса
        const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${cityName}&appid=${apiKey}&units=metric&lang=ru`;

        // Отправляем AJAX-запрос
        $.get(apiUrl)
            .done(function(weatherData) {
                // В случае успеха обрабатываем данные
                const temp = Math.round(weatherData.main.temp); // Округляем температуру
                const description = weatherData.weather[0].description;
                const city = weatherData.name;

                const weatherHTML = `
                    <p>В городе <strong>${city}</strong> сейчас ${description}.</p>
                    <p>Температура: <strong>${temp}°C</strong></p>
                `;

                $weatherResult.html(weatherHTML);
            })
            .fail(function() {
                // В случае ошибки (например, город не найден)
                $weatherResult.html('<p style="color: red;">Не удалось найти погоду для этого города. Проверьте название.</p>');
            });
    });
});

Разберем ключевые моменты:

1. API Key. Не забудьте заменить 'YOUR_API_KEY' на тот, который вы получили при регистрации.

2. Параметры запроса. В URL мы передаем несколько параметров: q (название города), appid (ваш ключ), units=metric (чтобы температура была в градусах Цельсия, а не Кельвина) и lang=ru (чтобы описание погоды пришло на русском языке).

3. Обработка ответа. Мы извлекаем из сложного объекта weatherData нужные нам поля: температура (weatherData.main.temp) и описание погоды (weatherData.weather[0].description).

4. Обработка ошибок. Мы используем метод .fail(), чтобы корректно обработать ситуацию, когда город не найден или произошла другая сетевая ошибка.

Практическая задача 4: Улучшите наш виджет погоды. Добавьте отображение иконки погоды. Подсказка: OpenWeatherMap возвращает код иконки (например, "04d"). URL для получения иконки выглядит так: https://openweathermap.org/img/wn/04d@2x.png. Создайте элемент <img> и динамически подставляйте в его src полученный код иконки.

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

Практикуйтесь, пробуйте разные API, комбинируйте данные и создавайте более сложные интерфейсы. Если вы хотите продолжить изучение jQuery с нуля и освоить все темы от селекторов до создания полноценных приложений, приглашаю вас посмотреть полный курс с уроками по jQuery для начинающих. Там вас ждут подробные объяснения, домашние задания и поддержка. До встречи в следующем уроке.