Подгрузка данных AJAX'ом

15 марта 2021, 08:30

var text, 
  arr = [], 
  div, 
  input = document.querySelector('input'); 
 
input.addEventListener('keypress', () => { 
 
  const search = () => { 
    var xhr = new XMLHttpRequest(); 
 
    xhr.open('GET', 'phones.json', true); 
    xhr.send(); 
 
    xhr.onreadystatechange = () => { 
      if (xhr.readyState != 4) return; 
 
      arr = JSON.parse(xhr.responseText); 
      var previousDiv = document.querySelectorAll('div'); 
 
      if (previousDiv) { 
        for (let i of previousDiv) { 
          i.remove(); 
        } 
      } 
 
      if (arr) { 
 
        arr.forEach(i => { 
 
          if (i.includes(input.value)) { 
            var div = document.createElement('div'); 
            div.innerHTML = i; 
            document.body.appendChild(div); 
          } 
 
        }); 
      } 
 
    } 
 
  }; 
 
  return search(); 
});

<input placeholder='Для поиска введите слово'>

Попытался реализовать вывод возможных результатов на основе введённой строки. Нужно ли при каждом изменении строки требовать у сервера передачи всех данных? В данном коде проверка осуществляется после загрузки абсолютно всех значений. Но что, если их будет много? Как запросить у сервера только то, что удовлетворяет условию?

Answer 1

Зачем грузить файл на каждое изменение инпута?

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

В ответе же каждый раз одно и тоже. Просто загрузите его один раз в самом начале работы, а потом ищите по уже имеющимся данным.

Либо добавьте в запросе условие фильтрации и проводите её на стороне сервера, а не клиента. Трафика будете гонять заметно меньше.

Не ищите сразу, добавьте таймер. Как только пользователь ввёл что-то, запустите таймер. Если пользователь вводит ещё что-то - прибейте таймер и запустите снова. Ищите только если таймер истёк целиком и пользователь больше ничего не вводил. Так вы избавитесь от лишних поисковых запросов в момент медленного написания какой-то длинной поисковой строки.

Когда будете отправлять запрос на сервер, запоминайте искомую строку. Если до ответа сервера пользователь успел поискать ещё что-то, а первый запрос не успел вернуться, то есть риск, что вы будете показывать результат старого запроса даже после ввода новой строки. В коллбеках проверяйте, действительно ли получен ответ на самую последнюю актуальную поисковую строку. Устаревшие отбрасывайте и никак не обрабатывайте.

Answer 2

В твоём примере ты в любом случае получишь всё, что вернет сервер.

Полагаю, это файл phones.json; Ты можешь отфильтровать ответ на клиенте, но время ответа сервера всегда будет одинаковым (читай первое предложение).

Полагаю, функцию поиска/фильтрации следует отдать серверу.