Подгрузка без перезагрузки

Twitter, Facebook, Вконтакте и Google используют очень интересную технологию для подгрузки новых твитов, обновлений и результатов поиска. Суть заключается в том, что когда вы кликаете на кнопку «еще» новые обновления загружаются ниже предыдущих при этом не перезагружая страницу.

Для начала создаем таблицу messages с полями msg_id и message. Заполняем ее.

Код javascript

<script type="text/javascript">
$(function() {
$('.more').live("click",function() 
{
var ID = $(this).attr("id");
if(ID){
$("#more"+ID).html('5 сег..');
$.ajax({
type: "POST",
url: "more.php",
data: "lastmsg="+ ID, 
cache: false,
success: function(html){
$("div#updates").append(html);
$("#more"+ID).remove();
}
});
}
else{
    $(".morebox").html('конец');
}
return false;
});
});
</script>

Создаем файл load_more.php

Содержит простой php код. Выводит результаты из таблицы сообщений

<?php
include('config.php');
$sql=mysql_query("select * from messages ORDER BY msg_id DESC LIMIT 9");
while($row=mysql_fetch_array($sql))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<li>
<?php echo $message; ?>
</li>
<?php } ?>
</ol>
<div id="more<?php echo $msg_id; ?>" class="morebox">
<a href="#" class="more" id="<?php echo $msg_id; ?>">more</a>
</div>
</div>

Делаем файл more.php

Возвращает записи из таблицы сообщений, где msg_id младше последнего подгруженного id’шника.

<?php
include("config.php");
if(isSet($_POST['lastmsg']))
{
$lastmsg=$_POST['lastmsg'];
$lastmsg=mysql_real_escape_string($lastmsg);
$result=mysql_query("select * from messages where msg_id<'$lastmsg' order by msg_id desc limit 9");
while($row=mysql_fetch_array($result))
{
$msg_id=$row['msg_id'];
$message=$row['message'];
?>
<li>
<?php echo $message; ?>
</li>
<?php
}
?>
<div id="more<?php echo $msg_id; ?>" class="morebox">
<a href="#" id="<?php echo $msg_id; ?>" class="more">more</a>
</div>
<?php
}
?>


Комментарии: