Вы здесь: Главная » JavaScript » AJAX » Использование AJAX для загрузки JSON-данных

Использование AJAX для загрузки JSON-данных

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

Подготовка данных для загрузки. JSON-файл с товарами

Формат JSON применяется очень часто для форматирования и передачи данных. Если мы говорим об однотипных данных, то обычно они в JSON представлены в виде массива объектов с одинаковыми полями. Мы будем загружать данные о детских игрушках. Каждый объект-игрушка будет иметь такие поля:

Вы можете посмотреть на JSON-файл в отдельной вкладке.

Разметка html-файла

Разметка html-файла будет минималистичной. Мы будем загружать информацию о товарах в <div class="row toys-container">, поэтому внутри он будет пустым. До  него мы разместим заголовок страницы в теге h1 и пустой <div class="loader text-center"> для предзагрузчика.

Для того чтобы минимизировать написание стилей, используем css-фреймворк Bootstrap 4, а точнее - стилизацию Bootstrap в виде Bootswatch, тема Cosmo. Из справки Bootstrap 4 возьмем разметку модального окна, немного ее изменив: изменим текст и добавим id. Модальное окно у нас разместиться ниже <div class="container my-5">:

Перед закрывающимся тегом </body> разместим скриптовые теги.

Дополнительные css-стили

Добавим ряд css-стилей для созданных нами классов и частично допишем/перепишем стандартные бутстраповские стили.

JavaScript код

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

Если убрать комментарий в строке 19, то вы увидите в консоли, что в переменную попал массив объектов с определенным набором полей, которые мы используем для построения разметки в функции showProducts().

Данные сервера

Предзагрузчик вы увидите в течение очень небольшого количества времени и только при медленном Интернет-соединении типа 2G или 3G, которые можно эмулировать на вкладке Network в браузере Chrome. При высокой скорости Интернета вы его даже не заметите, т.к. размер JSON-файла невелик, и загрузка выполняется очень быстро.

Настройки медленного интернета в Chrome

Давайте посмотрим пример в действии (открыть в новой вкладке). Щелкните на любой из кнопок "Подробнее", чтобы посмотреть содержимое модального окна.

Добавляем загрузку файла с комментариями

Довольно часто для товаров существуют комментарии или отзывы. Мы видоизменив наш скрипт, добавив загрузку JSON-файла с отзывами в таком виде:

Полное содержание JSON-файла с отзывами можно посмотреть по ссылке.

В html-разметке мы поменяем только ссылку на js-файл в атрибуте src тега <script>, либо вы можете заменить содержимое вашего текущего файла.

JavaScript-код для отображения товаров с отзывами в модальном окне

Нам придется упаковать код AJAX-запроса на сервер в функцию, для того чтобы не писать дважды подобный код. Плюс нужно обработать загрузку нового файла при клике на ссылке с количеством отзывов. Функция showProducts() из предыдущего скрипта тоже несколько поменяется с учетом информации об отзывах.

Скрипт основан на замене текста в одном и том же модальном окне.

С комментариями наш пример выглядит так (открыть в новой вкладке):

Автор: Админ

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *