AJAX - технология, которая появилась достаточно давно и успешно используется до сих пор для загрузки или отправки данных на сервер без перезагрузки текущей страницы. В этой статье мы рассмотрим, каким образом мы можем использовать AJAX в нативном (обычном, или ванильном) JavaScript для загрузки JSON-данных. Загрузку JSON с помощью jQuery вы можете прочитать в отдельной статье.
Подготовка данных для загрузки. JSON-файл с товарами
Формат JSON применяется очень часто для форматирования и передачи данных. Если мы говорим об однотипных данных, то обычно они в JSON представлены в виде массива объектов с одинаковыми полями. Мы будем загружать данные о детских игрушках. Каждый объект-игрушка будет иметь такие поля:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
[ { "id":1, "name":"Твой собственный Лизун", "reviews": 4, "stars": 4, "regular_price": 720, "sale_price": 459, "img": "images/canal_toys.jpg", "descr": "Создайте массу Слими-Лизун своими руками вместе с набором для развлечений Slime Твой собственный Лизун bonus pack от французского производителя CanalToys! Все гениальное просто! Вам не нужно бежать в аптеку или хозяйственный магазин, в данном наборе есть все необходимое. Положи в контейнер пудру слими, добавь блестки, добавь воды до ограничительной линии, потряси около 30 секунд, оставь на 5 минут… и ВУАЛЯ – СлимиЛизун готов!\nВ наборе 3 пастельных цвета rainbow и 3 мерцающих цвета Cosmic. Состав набора: 6 пакетиков с пудрой слими-лизун, 6 пакетиков с блестками, 6 контейнеров для смешивания." },{ "id": 2, "name":"3D-ручка 3Doodler 48 стержней", "reviews": 4, "stars": 3, "regular_price": 1499, "sale_price": 1349, "img": "images/3_doodler.jpg", "descr": "Ручка ломает границы стереотипного мышления, и позволяет выходить за рамки воображения. Это не просто современная игрушка, это отличная возможность расширить детский кругозор, воплощая любые фантазии в реальность.\nЭргономичный корпус разработан специально для маленьких детских ручек. Чтобы ничего не отвлекало юного творца от увлекательного процесса 3D — моделирования." } ] |
Вы можете посмотреть на 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">:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
<!DOCTYPE html> <html lang="ru"> <head> <meta charset="UTF-8"> <title>Toys in Ajax</title> <!-- https://www.bootstrapcdn.com/bootswatch/--> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/cosmo/bootstrap.min.css"> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container my-5"> <h1 class="text-center">Детские игрушки</h1> <div class="loader text-center"></div> <div class="row toys-container"></div> </div> <div class="modal fade" id="productsModal" tabindex="-1" role="dialog"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">Информация о товаре</h5> <button type="button" class="close" data-dismiss="modal" aria-label="Close">×</button> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-success">Купить</button> <button type="button" class="btn btn-secondary" data-dismiss="modal">Закрыть</button> </div> </div> </div> </div> <script src="js/get_toys.js"></script> </body> </html> |
Перед закрывающимся тегом </body> разместим скриптовые теги.
Дополнительные css-стили
Добавим ряд css-стилей для созданных нами классов и частично допишем/перепишем стандартные бутстраповские стили.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 |
.img-holder { height: 150px; overflow: hidden; padding: 10px; margin-bottom: 10px; } .img-holder:hover img {transition: transform .5s;} .img-holder:hover img { transform: scale(1.15); } .info { display: flex; justify-content: space-between; } .star, .star-outline { width: 10px; height: 10px; display: inline-block; background-image: url(../images/star.png); background-size: 100%; margin-left: 3px; } .star-outline { background-image: url(../images/star-outline.png); } .card-title {font-weight: bold; margin-top: 10px;} .modal {background-color: rgba(0, 0, 0, 0.65);} .modal-dialog {max-width: 700px;} .regular-price, .sale-price {font-size: 20px; color: #f00;} .old-price {text-decoration: line-through; color: #aaa; font-size: 16px;} .review { border-bottom: 1px solid #c3c3c3; margin-bottom: 10px;} .review:last-of-type { border-bottom: none;} .author {font-weight: bold; border-bottom: 1px solid #c3c3c3; padding: 0 0 10px 0; } .review-text {padding: 10px 0;} .plus strong{color: #53c375;} .minus strong{color: #f00;} |
JavaScript код
В JS-коде нам нужно определиться с переменными, которые будут отвечать за определенные элементы в теле страницы и, в том числе, в модальном окне. Многие строки имеют комментарии, поэтому вам нужно внимательно прочитать, что происходит в каждой функции.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
let toysRow = document.querySelector('.toys-container'), //контейнер для блоков с игрушками loadingBlock = document.querySelector('.loader');//контейнер для предзагрузчика let productsModal = document.getElementById('productsModal'),//все модальное окно modalBody = productsModal.querySelector('.modal-body'),//основной текст в модальном окне modalTitle = productsModal.querySelector('.modal-title'),//заголовок модального окна closeBtns = document.querySelectorAll('[data-dismiss="modal"]');//кнопки для закрытия модального окна вверху и внизу let loadImg = new Image();// для загрузки картинки-прелоадера loadImg.src = 'images/loader.webp'; let xhr = new XMLHttpRequest();//для формирования AJAX-запроса xhr.open('GET', 'js/products.json', true);// загружаем json-файл loadingBlock.append(loadImg);//отображаем предзагрузчик xhr.responseType = 'json';//говорим браузеру о том, какой формат файла будем получать xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { // console.log(xhr.response);//данные в виде массива объектов showProducts(xhr.response); } loadImg.remove(); } }; xhr.send(null); //отсылаем AJAX-запрос xhr.onerror = function () { alert(`Ошибка соединения`); }; function showProducts(productData) { let productsStr = ''; //строка для формирования разметки for (obj of productData) { //console.log(obj.name); let starDiv = '<div class="rating">'; //формируем блок со звездочками for (let i = 0; i < 5; i++) { let star = document.createElement('span'); starDiv+= i < obj.stars ? '<span class="star"></span>':'<span class="star-outline"></span>'; } const isSale = obj.sale_price? `<span class="sale-price">${obj.sale_price} грн</span>`:''; // есть ли цена распродажи starDiv+='</div>'; productsStr += `<div class="col-lg-3 col-md-6 my-3"> <div class="card"> <div class="img-holder"> <img class="img-fluid" src="${obj.img}" alt="${obj.name}"> </div> <div class="card-body"> ${starDiv} <div class="card-title">${obj.name}</div> <div class="prices my-3"><span class="regular-price${isSale ? ' old-price':''}">${obj.regular_price} грн</span> ${isSale}</div> <p class="card-text d-none">${obj.descr.replace(/\n/g, '<br>')}</p> <a href="#productsModal" onclick="openModal(event)" class="btn btn-primary" data-id="${obj.id}">Подробнее</a> </div> </div> </div>`; } toysRow.innerHTML = productsStr;// вставляем разметку в контейнер для нее } function openModal (e) { //открываем модальное окно e.preventDefault(); let link = e.target; productsModal.style.display = 'block'; productsModal.classList.add('show'); document.body.classList.add('modal-open'); modalBody.innerHTML = link.closest('.card').innerHTML;//вставляем в модальное окно весь текст из ссылки let imgHolder = modalBody.querySelector('.img-holder'); imgHolder.classList.remove('img-holder');//убираем ограничение по высоте картинки imgHolder.classList.add('text-center'); modalBody.querySelector('.card-text').classList.remove('d-none');//отображаем текст спрятанного абзаца modalBody.querySelector('.btn').remove();//удаляем из разметки ненужную кнопку "Подробнее" modalTitle.innerHTML = "Информация о товаре <strong>"+modalBody.querySelector('.card-title').textContent+"<strong>"; } closeBtns.forEach(btn => btn.addEventListener('click', closeModal)); document.querySelector('.modal').addEventListener('click', closeModal); function closeModal(e) { //закрываем модальное окно if(e.target!== e.currentTarget) return; //если щелкаем не по кнопкам или по фону productsModal.style.display = 'none'; productsModal.classList.remove('show'); document.body.classList.remove('modal-open'); } |
Если убрать комментарий в строке 19, то вы увидите в консоли, что в переменную попал массив объектов с определенным набором полей, которые мы используем для построения разметки в функции showProducts().
Предзагрузчик вы увидите в течение очень небольшого количества времени и только при медленном Интернет-соединении типа 2G или 3G, которые можно эмулировать на вкладке Network в браузере Chrome. При высокой скорости Интернета вы его даже не заметите, т.к. размер JSON-файла невелик, и загрузка выполняется очень быстро.
Давайте посмотрим пример в действии (открыть в новой вкладке). Щелкните на любой из кнопок "Подробнее", чтобы посмотреть содержимое модального окна.
Добавляем загрузку файла с комментариями
Довольно часто для товаров существуют комментарии или отзывы. Мы видоизменив наш скрипт, добавив загрузку JSON-файла с отзывами в таком виде:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
[ { "id": 1, "product_id": 1, "stars": 1, "author": "Iван Головко", "text": "Занадто дорого для набору з такими \"сюрпризами\"", "plus": "Це лизун, на цьому все", "minus": "1. Два з шести лизунів мали погану форму.\n 2. Блискітки в наборі зайві. Дівчинка погралась, а потім ці самі блискітки були всюди і погано відмивалися з рук." }, { "id": 2, "product_id": 1, "stars": 4, "author": "Ирина Воронова", "text": "Купила креснице на подарок. Так вот, ребенок в восторге. Лепила весь вечер. Видно, что очень понравилось. Нет резкого химозного запаха. Красивые и яркие цвета. Вообщем, отличный набор. Цена по акции просто замечательная. О покупке не пожалеете.", "plus": "Классный набор. Ребенку понравился.", "minus": " Нет" } ] |
Полное содержание JSON-файла с отзывами можно посмотреть по ссылке.
В html-разметке мы поменяем только ссылку на js-файл в атрибуте src тега <script>, либо вы можете заменить содержимое вашего текущего файла.
JavaScript-код для отображения товаров с отзывами в модальном окне
Нам придется упаковать код AJAX-запроса на сервер в функцию, для того чтобы не писать дважды подобный код. Плюс нужно обработать загрузку нового файла при клике на ссылке с количеством отзывов. Функция showProducts() из предыдущего скрипта тоже несколько поменяется с учетом информации об отзывах.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 |
let toysRow = document.querySelector('.toys-container'), //контейнер для блоков с игрушками loadingBlock = document.querySelector('.loader');//контейнер для предзагрузчика let productsModal = document.getElementById('productsModal'),//все модальное окно modalBody = productsModal.querySelector('.modal-body'),//основной текст в модальном окне modalTitle = productsModal.querySelector('.modal-title'),//заголовок модального окна closeBtns = document.querySelectorAll('[data-dismiss="modal"]');//кнопки для закрытия модального окна вверху и внизу let loadImg = new Image();// для загрузки картинки-прелоадера loadImg.src = 'images/loader.webp'; let xhr = new XMLHttpRequest();//для формирования AJAX-запроса function requestJSON(url, comments=false, id=null ) { xhr.open('GET', url, true); loadingBlock.append(loadImg); xhr.responseType = 'json'; xhr.onreadystatechange = function () { if (xhr.readyState == 4) { if (xhr.status == 200) { // console.log(xhr.response); if (comments) showComments(xhr.response, id); else showProducts(xhr.response); } loadImg.remove(); } }; xhr.send(null); xhr.onerror = function () { alert(`Ошибка соединения`); }; } requestJSON('js/products.json'); function showProducts(productData) { let productsStr = ''; for (obj of productData) { let infoDiv = '<div class="info"><div class="rating">'; for (let i = 0; i < 5; i++) { infoDiv += i < obj.stars ? '<span class="star"></span>' : '<span class="star-outline"></span>'; } const isSale = obj.sale_price ? `<span class="sale-price">${obj.sale_price} грн</span>` : ''; //console.log(obj.name.length); infoDiv += `</div> <a href="#" data-id="${obj.id}" class="reviews text-right">${obj.reviews} отзыва</a></div>`; productsStr += `<div class="col-lg-3 col-md-6 my-3"> <div class="card h-100"> <div class="img-holder"> <img class="img-fluid" src="${obj.img}" alt="${obj.name}"> </div> <div class="card-body"> ${infoDiv} <div class="card-title">${obj.name}</div> <div class="prices my-3"><span class="regular-price${isSale ? ' old-price':''}">${obj.regular_price} грн</span> ${isSale}</div> <p class="card-text d-none">${obj.descr.replace(/\n/g, '<br>')}</p> <a href="#productsModal" onclick="openModal(event)" class="btn btn-primary" data-id="${obj.id}">Подробнее</a> </div> </div> </div>`; } toysRow.innerHTML = productsStr; document.querySelectorAll('.reviews').forEach(link => link.addEventListener('click', showReviews)); } function openModal(e) { e.preventDefault(); let link = e.target; productsModal.style.display = 'block'; productsModal.classList.add('show'); document.body.classList.add('modal-open'); modalBody.innerHTML = link.closest('.card').innerHTML; let imgHolder = modalBody.querySelector('.img-holder') imgHolder.classList.remove('img-holder'); imgHolder.classList.add('text-center'); modalBody.querySelector('.card-text').classList.remove('d-none'); modalBody.querySelector('.btn').remove(); modalBody.querySelector('.reviews').remove(); modalTitle.innerHTML = "Информация о товаре <strong>"+modalBody.querySelector('.card-title').textContent+"<strong>"; } closeBtns.forEach(btn => btn.addEventListener('click', closeModal)); document.querySelector('.modal').addEventListener('click', closeModal); function closeModal(e) { if(e.target!== e.currentTarget) return; productsModal.style.display = 'none'; productsModal.classList.remove('show'); document.body.classList.remove('modal-open'); } function showReviews(evt){ evt.preventDefault(); requestJSON('js/reviews.json', true, this.dataset.id); } function showComments(data, id){ //console.log(data, id); let commentsStr = ''; data.forEach(item => { if(item.product_id!=id) return; let str = item.plus ? '<div class="plus">'+item.plus+'</div>':''; console.log(str); let ratingDiv = '<div class="rating">'; for (let i = 0; i < 5; i++) { ratingDiv += i < item.stars ? '<span class="star"></span>' : '<span class="star-outline"></span>'; } ratingDiv+='</div>'; commentsStr +=`<div class="review"> <div class="info"> <div class="author">${item.author}</div> ${ratingDiv} </div> <div class="review-text">${item.text.replace(/\n/g, '<br>')}</div> ${item.plus ? '<div class="plus my-2"><strong>Достоинства: </strong> '+item.plus+'</div>':''} ${item.minus ? '<div class="minus my-2"><strong>Недостатки: </strong> '+item.minus+'</div>':''} </div>`; }); productsModal.style.display = 'block'; productsModal.classList.add('show'); document.body.classList.add('modal-open'); productsModal.querySelector('.modal-title').textContent = 'Отзывы к товару'; modalBody.innerHTML = commentsStr; } |
Скрипт основан на замене текста в одном и том же модальном окне.
С комментариями наш пример выглядит так (открыть в новой вкладке):
