Javascript-форум - Скрипт ajax чата

возможно, это подойдёт:

--------------------------------------------------------------------------
Приступим к разбору кода. Добавим в начало файла index.php строки с подключением библиотеки jQuery:
<head>
<script type="text/javascript" src="jquery.js"></script>
</head>

Далее, вынесем из файла index.php фрагмент кода, который отвечает за вывод содержимого гостевой книги, в отдельный файл show.php:


<?php
include ("dbconnect.php");

$c=0;
// выбор всех записей из БД, отсортированных так, что самая последняя отправленная запись
// будет всегда первой.
$r=mysql_query ("SELECT * FROM gb ORDER BY dt DESC");
while ($row=mysql_fetch_array($r)) // для каждой записи организуем вывод.
{
if ($c%2)
$col="bgcolor='#f9f9f9'"; // цвет для четных записей
else
$col="bgcolor='#f0f0f0'"; // цвет для нечетных записей

?>
<table border="0" cellspacing="3" cellpadding="0" width="90%" <? echo $col; ?>
style="margin: 10px 0px;">
<tr>
<td width="150" style="color: #999999;">Имя пользователя:</td>
<td><?php echo $row['username']; ?></td>
</tr>
<tr>
<td width="150" style="color: #999999;">Дата опубликования:</td>
<td><?php echo $row['dt']; ?></td>
</tr>
<tr>
<td colspan="2" style="color: #999999;">
---------------------------------------------------------------
</td>
</tr>
<tr>
<td colspan="2">
<?php echo $row['msg']; ?>
<br>
</td>
</tr>

</table>
<?php
$c++;
}

if ($c==0) // если ни одной записи не встретилось
echo "Гостевая книга пуста!<br>";

?>

Как видим, в коде все осталось без изменений, просто теперь он находится в отдельном файле (поэтому добавилось подключение модуля dbconnect.php для соединения с БД).

В файле index.php, в месте, где раньше располагался вывод, размещаем контейнер:
<div id="messages">
</div>

В этот контейнер мы будем динамически загружать информацию с записями гостевой книги.

Далее в файле index.php следует форма ввода сообщения, её код остался практически без изменений, но:

1. Мы убрали атрибуты name, action и method, и функцию splash(), вызываемую по событию onClick (контроль заполнения формы остался, просто теперь эта проверка выполняется в другой части кода) из строки и добавили параметр id:
<form id="myForm">

2. Убрали строку со скрытым полем action
<input type="hidden" name="action" value="add">

3. Подписали id для всех полей ввода.

Как видно из изменений в форме, в нашем примере полностью изменилась процедура отправки данных на сервер и получение результатов с него.

Отправка данных и получение содержимого гостевой книги описано в следующем скрипте:
<script>

// загрузка сообщений из БД в контейнер messages
function show_messages()
{
$.ajax({
url: "show.php",
cache: false,
success: function(html){
$("#messages").html(html);
}
});
}

$(document).ready(function(){

show_messages();

// контроль и отправка данных на сервер в фоновом режиме
// при нажатии на кнопку "отправить сообщение"
$("#myForm").submit(function(){

var name = $("#username").val();
var msg = $("#msg").val();
if (name =='')
{
alert ("Заполните имя пользователя!");
return false;
}
if (msg =='')
{
alert ("Заполните текст сообщения!");
return false;
}

$.ajax({
type: "POST",
url: "action.php",
data: "username="+name+"&msg="+msg+"&action=add",
success: function(msg){
show_messages();
}
});

return false;
});

});

</script>

Для того, чтобы событие submit не приводило к обновлению страницы в браузере, функция $("#myForm").submit() всегда должа возвращать значение false;

Использование библиотеки jQuery в данном примере заключается в вызове функции $.ajax(), а также для простой адресации к объектам и их параметрам, например $(“#username”).val() – получает значение из поля ввода имени пользователя (id=”username”).

Функция $.ajax() отрабатывает по разному в зависимости от параметров.

Например, в функции show_messages() с помощью функции $.ajax() происходит загрузка данных из файла show.php в фоновом режиме:
$.ajax({
url: "show.php",
cache: false,
success: function(html){
$("#messages").html(html);
}
});

При успешной загрузке (параметр success), выполняется функция, заполняющая контейнер messages этими данными:
function(html){
$("#messages").html(html);
}

А при обработке события нажатия на кнопку «Отправить сообщение» функция $.ajax() отправляет данные на сервер, опять же в фоновом режиме, не перегружая всю страницу:
$.ajax({
type: "POST",
url: "action.php",
data: "username="+name+"&msg="+msg+"&action=add",
success: function(msg){
show_messages();
}
});

Как мы видим, здесь используется метод POST (type: "POST") для отправки данных, как и в исходном примере. Данные из параметра data передаются файлу action.php (url: "action.php"). При успешной передаче данных, выполняется функция, описанная в параметре success, т.е. мы отображаем уже новые записи гостевой книги:
function(msg){
show_messages();
}

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