Simple ajax request on pure XMLHttpRequest?

Question

AJAX

Greetings Connoisseurs! I tried to write a simple ajax request without using promises, fetch and jquery, the script works, but my eyes start to twitch at the global variable count ;) , how can I fix it all? For clarity, how the welcome script works https://codepen.io/sirius100/pen/ExXEdwK

// запрос на сервер

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 )  );
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();

var count =  undefined; // эта переменная глобальная и это мне не нравится !

function getData( data ) {
  return count = data['length'];// узнаю общее количество файлов (например фото) для счетчика запросов ajax
}

function nextRequest(){
  count;
  const wrapper = document.querySelector( '.wrapper' )

  return function () {
    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--; // уменьшаю счетчик
  }
}

const newRequest = nextRequest();

const btn_ajax_request = document.querySelector( '.ajax' )
btn_ajax_request.addEventListener( 'click', () => newRequest() );

Answer 1

Decision!

/ запрос на сервер
 
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--; // уменьшаю счетчик
  });
}

Answer 2

How can a global variable help you here? The response from the server may come when the rest of the code has already completed.
All code that depends on the count value returned in the server response must be in or called from xhr.onprogress.