// запрос на сервер
const xhr = new XMLHttpRequest();
xhr.open(
'get',
'https://jsonplaceholder.typicode.com/photos/',
true, );
xhr.responseType = 'json';
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8");
xhr.addEventListener( 'load', () => getData( xhr.response, nextRequest ) );
xhr.addEventListener( 'abort', () => console.log( 'progress onabort' ));
xhr.addEventListener( 'error', () => console.log( 'progress onerror' ));
xhr.onprogress = function(event) { // запускается периодически
// event.loaded - количество загруженных байт
// event.lengthComputable = равно true, если сервер присылает заголовок Content-Length
// event.total - количество байт всего (только если lengthComputable равно true)
console.log(`Загружено ${event.loaded} из ${event.total}`);
if (xhr.status === 200 ) {
// count = new Set(xhr.response).size;
// console.log( 'count = ' ,new Set(xhr.response).size );
// console.log( xhr.response);
} else {
console.log('err', xhr.responseText)
}
}
xhr.send();
function getData( data, f ) {
let count = data['length'];// узнаю общее количество файлов (например фото) для счетчика запросов ajax
console.log('count = ', count)
return f(count);
}
function nextRequest(count){
console.log('count from nextRequest = ', count)
const btn_ajax_request = document.querySelector( '.ajax' )
const wrapper = document.querySelector( '.wrapper' )
return btn_ajax_request.addEventListener( 'click', () => {
console.log('count from addEventListener = ', count)
let div_wrapper = document.createElement( 'div' )
div_wrapper.classList.add( 'wrapper_ajax' );
let panel = document.createElement( 'p' );
panel.innerText = 'Описание фото'
let request_img = document.createElement( 'div' );
request_img.classList.add( 'request_img' );
request_img.style.background = `url( ${xhr.response[count-1].url} )`; // url файла для подгрузки ajax-ом
request_img.style.backgroundSize = "100% 100%";
request_img.style.backgroundRepeat = "no-repeat";
div_wrapper.appendChild( panel );
div_wrapper.appendChild( request_img )
wrapper.appendChild( div_wrapper )
count--; // уменьшаю счетчик
});
}