JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax выборка</title>
    <link rel="stylesheet" href="assets/css/style.css">
 
    
</head>
<body>
  <div class="loadingStatus">
    <div>Loading...</div>
  </div>
    <div class="ajaxWrapper">
        <button id="ajaxTest">Отправить ajax-запрос</button>
        <h2>Вывод get|post-запросов</h2>
        <input type="text" value="" placeholder="Укажите город" class="ajaxResultsSearch">
        <div class="ajaxResultsWrapper">
            пусто
        </div>
    </div>
    
    <script src="assets/js/script.js"></script>
</body>
</html>

JavaScript

const ajaxButton = document.querySelector('#ajaxTest');
const ajaxResultsWrapper = document.querySelector('.ajaxResultsWrapper');

const ajaxResultsSearch = document.querySelector('.ajaxResultsSearch');
const loadInformer = document.querySelector('.loadingStatus');

ajaxButton.addEventListener('click', sendRequest)


function sendRequest(params) {
  loadInformer.classList.add("loadDisplay"); // индикатор загрузки
  var xhr = new XMLHttpRequest();



  xhr.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      console.log("пришел ответ от сервера")
      console.log(this.responseText);
      loadInformer.classList.remove("loadDisplay");
      ajaxResultsWrapper.innerText = '';
      nativeJS_ajaxInsert(this.responseText); // отправка полученного json в обработку шаблонизатором
    } else {
      console.log("this.readyState: " + this.readyState);
      console.log("this.status: " + this.status);
    }
  };
  xhr.open("GET", "https://raw.githubusercontent.com/smelukov/citiesTest/master/cities.json", true);
  xhr.send();
}


function nativeJS_ajaxInsert(data) {
  let result = JSON.parse(data).sort(function(a, b) {
    return ((a.name === b.name) ? 0 : ((a.name > b.name) ? 1 : -1));
  });
  //console.log(result);

  // 1. Создаём таблицу
  let resultTable = {
    tag: "table",
    id: "ajaxTable",
    place: ajaxResultsWrapper
  }
  createEl(resultTable); // Создание таблицы

  result.forEach( (element, index) => {
    console.log(element)
    let row = {
      tag: "tr",
      id: "row_"+index,
      place: document.getElementById("ajaxTable")
    }
    // Поиск таблицы и заполние данными
    createEl(row); // Создание строк таблицы

    // Наполнение строк - Создание колонок таблицы
    for (let elementKey in element) {
      console.log(elementKey+ ": " + element[elementKey]);
      let col = {
        tag: "td",
        content: element[elementKey],
        place: document.getElementById("row_"+index)
      }
     ...