Django, AJAX: как жить эффективно обновлять кучу данных

Question

Я создаю проект, имитирующий фондовую биржу. Я выставляю данные о запасах пользователю на большом html <table>, где каждая строка <tr> имеет две ячейки <td>. Один из них является символом компании (т.е. AAPL), а другой - текущей рыночной стоимостью (не может быть проще).

Теперь я использую функцию javascript, например:

<script type="text/javascript">

$(function(){
    setInterval(loadTable, 10000)
});

function loadTable(){
  $("#se_table").load("/load/table/?ajax&user={{user.username}}");
}

</script>

Это лучший способ? Должен ли я загружать всю таблицу, когда изменяется только одно значение?

Answer 1

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

Во-вторых, если это возможно в вычислительном отношении, это будет гораздо более эффективно с точки зрения передачи данных.и пользовательский опыт, если бы вы могли рассчитать, какие строки изменились, и отправлять только эти строки.Назначьте глобально уникальный id каждой строке в вашей таблице, чтобы вы могли легко обновить только эту строку с помощью jQuery.С помощью этой техники также легко добавить некоторые визуальные подсказки, которые были обновлены в конкретной строке, например, небольшое изменение цвета, что часто приятно (где применимо).

Мой любимый способ делать подобные вещи(без кометы):

1. Опрос каждые 10 секунд на страницу, которая возвращает только то, изменились ли данные.Проверить это гораздо эффективнее, чем отправлять все данные постоянно.Вам нужно только сохранить поле даты и времени, содержащее, когда в последний раз изменилось значение, и сравнить с последней датой и временем, полученными браузером (отправьте это вместе с запросом).
2. Если он изменился, используйте jQuery, метод trigger отправляет другой ajax-запрос, на этот раз ожидая список строк, которые изменились с того времени.
3. Обновление затронутых строк.

Обновление

На основе ваших комментариев я просто добавлю несколько дополнительных заметок.

1. Для опроса вы, вероятно, будете использовать метод jQuery .get () .Вы сказали, что используете Django, поэтому я предлагаю использовать json, что означает, что, по вашему мнению, вы будете возвращать данные JSON.Вот простой учебник , с которого можно начать.
2. В функции обратного вызова для успеха проверьте, есть ли новые данные с логическим значением, возвращенным из вашего представления Django, и, если есть, вызовите функцию, которая делает новый вызов ajax, чтобы получить соответствующие данные (снова,объект JSON).
3. С этим объектом JSON пройдитесь по каждому элементу, который необходимо обновить, и используйте функцию jquery text или один из плагинов таблицы jQuery для обновления строк.

Если вы новичок в этом, это довольно много и много гуглит, но это хороший, чистый способ сделать это.

Answer 2

Широко используйте атрибуты data .Во время первоначального запроса страницы GET ваши столбцы, содержащие значения, будут выглядеть примерно так:

<td data-for-symbol="GOOG">+256.00</td>

Have /load/table/?ajax&user={{user.username}} возвращать JSON-ответ с объектами, которые содержат обновления с момента последней выборки таблицы пользователем, затем примените их индивидуально:

$('td[data-for-symbol=' + obj.symbol + ']').text(obj.value);

Не может быть чище, чем это.

Answer 3

вы могли бы рассмотреть возможность использования веб-сокетов Какие браузеры поддерживают HTML5 WebSocket API?

Answer 4

когда значение изменяется при возникновении события .trigger () и пишется обработчик типа

$("td").live("yourCustomTrigger",function(){

var $td=$(this);
$("$td").val("updated value")
//here update your td only

})

но все же вы должны выяснить некоторые вопросы, например, как будет определено, что значение в td было изменено ?? как указано Spacedman

здесь некоторые полезные плагины

Answer 5

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

Вызывает ли загрузка таблицы какие-либо очевидные проблемы, такие как мерцание страницы при переформатировании браузера? Я буду придерживаться .load, пока это не станет проблемой. Но это еще не все ...

Вы видели широкий спектр улучшений в таблице плагинов jQuery? Все виды магии, завернутые в совершенство jQuery, для сортировки, фильтрации, извлечения данных из источников и так далее. Всегда легче научиться использовать их и начать свой проект с чем-то подобным, чем делать это вручную, а затем конвертировать его, как только вы поймете, что вам нужны все эти функции. Google для "таблицы jquery" и, возможно, "данных" или "AJAX", и вы что-то нажмете.