Обновление столбца таблицы с помощью Ajax

Question

У меня есть веб-страница с таблицей заданий, запущенных в моей системе. После завершения или изменения этих заданий таблица должна отражать изменения.

В настоящее время я обновляю всю таблицу через AJAX каждые 8 ​​секунд. Это отлично работает для определенного количества заданий, но вызывает проблемы с производительностью при очень высокой (~ 100) нагрузках, что в конечном итоге приводит к блокировке браузеров.

Я использую Struts2 sx: div для выполнения этих обновлений, и я полагаю, что он каждый раз анализирует возвращенную таблицу для поиска виджетов, поэтому отключение отключает функциональность.

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

Я открыт для использования чего-то другого, кроме тега struts, для выполнения этого. Поэтому, по сути, я спрашиваю, есть ли простой способ просто обновить столбец таблицы.

Заранее спасибо.

Answer 1

Обновление только текстов в столбце состояния должно определенно работать лучше, чем перерисовка всей таблицы. Экономия от пропускной способности, вероятно, не такая уж большая победа. Но это только мое внутреннее чувство - вы, конечно, должны проверить и измерить то, что работает лучше для вас.

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

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

Answer 2

Если у каждого столбца есть класс (col-1, col-2 и т. Д.). Ваш Ajax-вызов может запросить только строку и вывести новый текст в виде строки с разделителями.

Если вы используете jQuery.ajax, вы можете предоставить функцию обратного вызова success с кодом, сначала разбивающим вашу строку. Затем используйте $('.col-X').each(), чтобы перебрать каждый элемент столбца, чтобы обновить их innerhtml.

$.ajax({
    url: "YOUR_URL.php",
    success: function (data) {
        var return = data.split(',');
        $('.col-1').each(function (index) {
            $(this).html(return[index]);
        });
    }
)};

Answer 3

Когда вы говорите «Я обновляю всю таблицу каждые 8 ​​секунд», вы имеете в виду, что вы извлекаете все данные json каждые 8 ​​секунд? Потому что если это так, то замедление нормально ...

Я бы отслеживал изменения на стороне сервера и отправлял маленькую «ту же таблицу», если запрос приходит, тогда как данные не изменились. Отправлять данные таблицы обратно только в том случае, если что-то изменилось на стороне сервера.