0

Подскажите , есть где-нибудь пример такого кейса на чистом JavaScript: идет запрос на сервер (fetch например) и в real time идет добавление строки таблицы с данными из сервера, каждые 20 секунд дергается метод и мы получаем данные и сразу загружаем в таблицу (в таблицу добавляется новая строка с данными каждые 20 секунд).

Или может быть какой-нибудь плагин для этого. Нужно сделать быстро

2
  • А может быть сразу получать все данные и выводить их через 20 секунд порциями? Через setInterval? 13 мар 2018 в 21:36
  • @РоманТатаринов не думаю, все таки каждые 20 секунд информация (еще не полученная) может измениться
    – DaemonHK
    14 мар 2018 в 7:30

2 ответа 2

1

Вот вам пример. Для асинхронных запросов используется библиотека fetch, в качестве API - openlibrary.org, табличка рендерится "вручную" с помощью JS.

Это только пример, сегодня это всё делается с помощью Angular/React/Vue совсем иначе.

const URL = 'https://openlibrary.org/api/books';
const numbers = ["8020409262", "0261103407", "9781565116696", "9780563536574", "0618042210", "0618517650", "9780061917806", "9780618640157", "0261102389", "0563528885", "9780048230911", "9780261102385", "9780048231147", "0048230464", "0048231126"];
const data = [];

function fetchData() {
  const number = generateRandom();
  const params = `?bibkeys=ISBN:${number}&jscmd=data&format=json`;
  return window.fetch(URL + params)
    .then(function(response) {
      return response.text();
    }).then(function(body) {
      let parsed = '';
      try {
        parsed = JSON.parse(body);
      } catch (error) {
        console.log('Error with parsing server response');
      }
      return parsed[`ISBN:${number}`] || {};
    });
}

function generateRandom() {
  const number = Math.floor(Math.random() * numbers.length);
  return numbers[number];
}

function renderTable(rows) {
  function renderHeader(keys) {
    let header = '<tr>';
    for (let i = 0; i < keys.length; i++) {
      key = keys[i].split('_').join(' ');
      header += `<th>${key}</th>`;
    }
    header += '</tr>';
    return header;
  }

  function renderRow(item, keys) {
    let row = '<tr>';
    for (let i = 0; i < keys.length; i++) {
      key = keys[i];
      row += `<td>${item[key] || 'unknown'}</td>`;
    }
    row += '</tr>';
    return row;
  }

  let table = '<table><thead>';
  const keys = ['title', 'notes', 'number_of_pages', 'publish_date', 'url'];
  table += renderHeader(keys);
  table += '</thead><tbody>';
  for (let i = 0; i < rows.length; i++) {
    table += renderRow(rows[i], keys);
  }
  table += '</tbody></table>';
  return table;
}

setInterval(function() {
  fetchData().then(res => {
    data.push(res);
    document.body.innerHTML = renderTable(data);
  });
}, 10000);
table,
tr,
td {
  border: 1px solid black;
}

table {
  width: 100%;
}

th {
  text-transform: capitalize;
  background-color: lightskyblue;
}

td,
th {
  padding: 5px;
  border-color: lightgrey;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch/2.0.3/fetch.min.js"></script>

<div>
  Hello world! (Wait for 10 seconds)
</div>

Пример на JSFiddle

0

Как я понял из вашего вопроса, вам нужен асинхронный запрос, чтобы в режиме реального времени что-то происходило без перезагрузки страницы. Объект XMLHttpRequest дает возможность из JavaScript делать HTTP-запросы к серверу без перезагрузки страницы, поэтому для отправки запросов я рекомендую использовать именно этот подход.

var xhr = new XMLHttpRequest(); // создаем объект
xhr.open('GET', 'url', false); // конфигурируем GET запрос на url 
xhr.send(); // отправляем запрос

if (xhr.status == 200) {
  // результат обработайте и поместите в таблицу должным образом
  var result = xhr.responseText; // результат ответа на запрос
} else {
  // если статус не `200`, то произошла ошибка
}

Это то, что касается запроса, чтобы получить данные с сервера, нужно отправить запрос и получить ответ. Теперь перейдем ко второй части вашего вопроса - каждые 20 секунд дергать метод (интервал времени есть, код, предоставленный выше можем поместить в метод, изначально дописав его под свои нужды). Для этого нужна функция setInterval, которая запускает выполнение функции через указанный интервал времени регулярно, пока не будет остановлена через clearInterval. Все просто, вот пример:

function alertMessage() {
  // тут вместо вывода сообщения делайте запрос к серверу
  alert( "Я вызвалась!" );
}

// начать повторы с интервалом 20 секунд
var timerId = setInterval(function() {
  alertMessage();
}, 20000);

// через 60 секунд (минута) остановить повторы
setTimeout(function() {
  clearInterval(timerId);
}, 60000);

Задержка задается в миллисекундах, 1000 миллисекунд равны 1 секунде.
Отсюда 20000 мс = 20 сек, а 60000 мс = 60 сек = 1 мин.

Полезные ссылки для ознакомления:

P.S.: Хотел написать комментарий, да вот весь текст не поместился, поэтому опубликовал в качестве ответа. Так как кода в вопросе я не увидел - поэтому и в ответе связанного кода не много, советы, примеры и ссылки для изучения.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.