Двойной ответ по AJAX
 

Добрый день.
Не смог понять причину такой реакции, надеюсь тут объяснят.

var btn = document.querySelector('button');

    btn.onclick = function loadPhones() {
        var xhr = new XMLHttpRequest();

        xhr.open('GET', 'phones.json', true);
        xhr.send();

        xhr.onreadystatechange = function () {
            if (this.readyState != 4) return;

            if (this.status != 200) {
                alert(`Error: ${this.status}, ${this.statusText}`)
            }

            let ul = document.createElement('ul');
            let phones = JSON.parse(this.responseText);

            for (let value of phones) {
                let li = document.createElement('li');
                li.textContent = value.name;
                ul.appendChild(li);
            }

            document.body.appendChild(ul);

            btn.innerHTML = `Загружено`;
            btn.disabled = `true`;
        }
    }

Проблема в том, что если я изменю условия на

if (this.readyState != 4 && this.status != 200) return;

То получу ошибку и 2 списка с телефонами. Если кому не сложно, можете объяснить?:thanks:

p.s. Если я не ошибся, то повторяется лишь stage 3 , до получения всего пакета, то есть переход на 4 лишь 1 раз, в конце, через console.log дебажил ход выполнения и статуса. Получил вот это:

это условие не срабатывает как Вы ожидаете. Например, readyState == 3, а status == 200 -- условие не выполнилось, выхода из ф-ции не произошло. То есть код, который ниже, исполняется многократно. Пишите ==4 && status == 200){/*code*/}

Добра вам добрый человек) Тупанул, спасибо =/