Простой ajax запрос на чистом XMLHttpRequest?

Question

[M0OL0L]

Приветствую Знатоки! Попробовал написать простой ajax запрос без использования промисов, fetch и jquery, скрипт работает но вот на глобальную переменную count глаз дергатся начинает ;) , как можно это все поправить? Для наглядности как работает скрипт welcome 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() );

Comments

[Антон Литвиненко]

Олдфаги юзают var

[M0OL0L]

Всем спасибо Знатоки я сам оперативно разобрался! коллбеки затащили ! код с изменениями ниже.

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

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 1

[M0OL0L]

Решение!

/ запрос на сервер
 
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

[Rsa97]

А чем вам тут поможет глобальная переменная? Ответ от сервера может прийти когда весь остальной код уже отработает.
Весь код, зависящий от пришедшего в ответе сервера значения count должен находиться в xhr.onprogress или вызываться из него.

Comments

[M0OL0L]

Глобальная переменная count нужна была чтобы в ней хранился количество файлов на сервере. И да Вы правы

Ответ от сервера может прийти когда весь остальной код уже отработает.

[M0OL0L]

На колбеках зарешал!