Справочная информация
Я нахожусь с некоторыми PHP и AJAX на данный момент, чтобы попытаться заставить код работать для автоматического обновления div (каждые 10 секунд), который содержит комментарии.
Вот код javascript, который я использую для обновления div.
<script type="text/javascript">// <![CDATA[ $(document).ready(function() { $.ajaxSetup({ cache: false }); setInterval(function() { $('#content_main').load('/feed_main.php'); }, 5000); }); // ]]></script> Код, который будет заполнять div, называемый «content_main», который находится в файле feed_main.php, по существу обращается к базе данных, а echo – последним комментариям …
Вопрос
Возможно ли загружать div «content_main» только в том случае, если данные внутри него не изменились с момента последнего его загрузки?
Моя логика
Поскольку я относительно новичок в javascript и AJAX, я не совсем знаю, как это сделать, но моя логика такова:
Впервые он запущен.
Каждый раз, когда он запускается …
Причина, по которой я хочу сделать это, состоит в том, что в комментариях обычно есть прикрепленные изображения, и это очень раздражает, чтобы каждый раз обновлять изображение.
Любая помощь с этим была бы весьма признательна.
Я столкнулся с подобной проблемой не так давно, я предполагаю, что вы используете mysql или что-то для ваших серверов хранения данных комментариев?
Я решил свою проблему, сначала добавив столбец целого числа timestamp в мою таблицу mysql, а затем, когда я добавил новую строку, просто просто использовал time() чтобы сохранить текущее время.
Пример вставки строки mysql:
$query = "INSERT INTO comments (name, text, timestamp) VALUES ('". $name ."', '". $text ."',". time() .");";
второй шаг будет состоять в json_encode данных, отправляемых с серверов:
$output = array(); if ($html && $html !== '') { // do we have any script output ? $output['payload'] = $html; // your current script output would go in this variable } $output['time'] = time(); // so we know when did we last check for payload update $json = json_encode($output, ((int)JSON_NUMERIC_CHECK)); // jsonify the array echo $json; // send it to the client
Итак, теперь вместо чистого html ваш серверный скрипт возвращает что-то вроде этого:
{ "payload":"<div class=\"name\">Derpin<\/div><div class=\"msg\">Foo Bar!<\/div>", "time":1354167493 }
Вы можете достаточно просто получить данные в javascript:
<script type="text/javascript"> // <![CDATA[ var lastcheck; var content_main = $('#content_main'); pollTimer = setInterval(function() { updateJson(); }, 10000); function updateJson() { var request = '/feed_main.php?timestamp='+ (lastcheck ? lastcheck : 0); $.ajax({ url: request, dataType: 'json', async: false, cache: false, success: function(result) { if (result.payload) { // new data lastcheck = result.time; // update stored timestamp content_main.html(result.payload + content_main.html()); // update html element } else { // no new data, update only timestamp lastcheck = result.time; } } }); } // ]]> </script>
что в значительной степени заботится о связи между сервером и клиентом, теперь вы просто запрашиваете свою базу данных примерно так:
$timestamp = 0; $where = ''; if (isset($_GET['timestamp'])) { $timestamp = your_arg_sanitizer($_GET['timestamp']); } if ($timestamp) { $where = ' WHERE timestamp >= '.$timestamp; } $query = 'SELECT * FROM comments'. $where .' ORDER BY timestamp DESC;';
Временные метки передаются взад и вперед, клиент всегда отправляет временную метку, возвращаемую сервером в предыдущем запросе.
Ваш сервер отправляет только те комментарии, которые были отправлены с момента последнего обновления, и вы можете добавить их в конец html, как я. (предупреждение: я не добавил к этому никакого контроля за здравомыслием, ваши комментарии могут стать чрезвычайно длинными)
Поскольку вы опросили новые данные каждые 10 секунд, вам может потребоваться отправить чистые данные по вызову ajax, чтобы сохранить существенную пропускную способность канала (строка json с только временной меткой в ней составляет всего около 20 байтов).
Затем вы можете использовать javascript для генерации html, это также имеет преимущество выгрузки партии работы с вашего сервера клиенту :). Вы также получите гораздо более тонкий контроль над тем, сколько комментариев вы хотите отобразить сразу.
Я сделал некоторые довольно большие предположения, вам придется изменить код в соответствии с вашими потребностями. Если вы используете мой код, и ваш кот | computer | house случится взорваться, вы получите все куски 🙂
Как насчет этого:
<script type="text/javascript"> // <![CDATA[ $(function () { function reload (elem, interval) { var $elem = $(elem); // grab the original html var $original = $elem.html(); $.ajax({ cache : false, url : '/feed_main.php', type : 'get', success : function (data) { // compare the result to the original if ($original == data) { // just start the timer if the data is the same setTimeout(function () { reload(elem, interval) }, interval); return; } // or update the html with new data $elem.html(data); // and start the timer setTimeout(function () { reload(elem, interval) }, interval); } }); } // call it the first time reload('#content_main', 10000); }); // ]]> </script>
Это всего лишь идея заставить вас идти, это не касается ошибок или тайм-аутов.