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

Question

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

Что мне теперь делать то, что я использую яваскрипта функцию:

<script type="text/javascript"> 

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

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

</script> 

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

Answer 1

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

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

Мой любимый способ делать такого рода вещи (без Comet) заключается в следующем:

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

Update

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

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

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

Answer 2

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

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

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

Answer 3

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

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

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

}) 

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

here некоторые полезные плагины

Answer 4

Вы могли бы рассмотреть возможность использования WebSockets What browsers support HTML5 WebSocket API?

Answer 5

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

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

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

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

Невозможно пойти чище, чем это.