В начале 2005 г. в блогах появилась возможность автоматического уведомления о прибытии новых сообщений. Суть ее действия очевидна кз ее названия: она извещает пользователя о том, что было добавлено оовое сообщение. Извещение может отображаться на странице в про¬стой текстовой форме или в виде анимированного изображения, кото¬рое плавно перемещается по странице, но основная идея не меняется. В этом примере модель периодического обновления служит для про¬верки наличия изменений в базе данных, содержащей сообщения, что¬бы определить момент поступления новых сообщений.
Предположим, что в вашем распоряжении имеется простейшая табли¬ца MySQL, созданная следующим образом:
CREATE TABLE 'BlogComments' (
- -Commentld' INT NOT NULL AUTO_INCREMENT ,
'BlogEntryld' INT NOT NULL ,
•Name' VARCHAR( 100 ) NOT NULL ,
Message1 VARCHAR( 255 ) NOT NULL , V: 'Date- 0ATETIME NOT NULL ,
PRIMARY KEY (•Commentld')
) COMMENT = 'Blog Comments';
Вот запрос SQL, который будет выполнять проверку:
select Commentld,Name,LEFT(Message, 50)
. from BlogComments order by Date desc
limit 0,1
Этот запрос возвращает числовой идентификатор сообщения (генер руется автоматически), имя человека, оставившего сообщение, и п вые 50 символов текста сообщения (с помощью функции LEFT()) ново сообщения. Первые 50 символов будут нужны для предварительно просмотра сообщения (потому что получение всего сообщения мо: занять достаточно длительное время).
Страница, запускающая этот запрос, называется CheckComments.р" и выводит строку в следующем формате:
<идентификатор_сообшения>||<имя>||<сообщение>
Этот формат позволяет с помощью метода JavaScript Array. split() влекать отдельные элементы строки с минимальными усилиями. Е в таблице вообще не будет сообщений или возникнет какая-либо ош ка, то в качестве идентификатора будет передано значение -1, а др~ части строки останутся пустыми. Ниже приведен полный код сце рия CheckComments. php:
<?pnp ; ■■■\::у--:'Щк-'%:'-<^ ^ '^ЧР^^С^ ' f.
header("Cache-control: No-Cache"); header("Pragma: No-Cache");
// информация о базе данных
SsOBServer = "your.database.server";
$sDBName = "имя_базы_данных";
SsDBUsername = "имя_пользователя_базы_данных";
$sDBPassword = "пар6ль_пользователя_базы_данных";
// создать строку SQL-запроса
$sSQL = "select Commentld,Name,LEFT(Message, 50) as ShortMessage ".: "from BlogComments order by Date desc limit 0,1";
к1 loLink = mysql_connect($sDBServer,IsOBUsername,SsDBPassword); ;@mysql_select_db($sDBName) or die("-1|| |i ");
if($oResult = rr,ysql_query($sSQL) and mysql_num_rows($oResult) > 0) { SaValues =■ mysql Jetch.ar ray( SoResult, MYSQL.ASSOC); echo SaValues['Commentld']. "||".$aValues['Name']. "||". ' $aValues['ShortMessage'];
} else {
JL/echo "-1Ц || "; :

mysql_free_result($oResult); mysql_close($oLink);
?>
Наверное, самая важная часть сценария - это два заголовка, включае¬мых в ответ в самом начале. Заголовки Cache-Control и Pragma установ¬лены в значение No-Cache, поэтому броузер будет всегда запрашивать евновленные данные с сервера, а не брать их из кэша на стороне клиен¬та. Без этого некоторые броузеры могут все время возвращать одну ■ ту же информацию, фактически полностью игнорируя функцио¬нальность, заложенную в веб-приложение. В остальной части сцена¬рия для вас нет ничего нового, т. к. в ней работают те же самые алго-ряггмы, которые встречались вам в предыдущих примерах работы с ба¬зой данных MySQL.
Неприятностей с кэшированием можно также избежать, постоянно изменяя строку запроса, передаваемую сценарию. Зачастую для этого в строку запро¬са добавляется информация о текущем времени, что заставляет броузер все¬гда брать самые свежие результаты с сервера, а не из кэша.
Теперь переходим к программному коду JavaScript, который обраща-к серверному сценарию. Для начала опишем несколько глобаль-: переменных:

var oXmlHttp = null; ' var ilnterval = 1000; var iLastCommentld = -1; var divNotification = null;
//Объект XMLHttp
//Интервал проверки (в миллисекундах) //ID последнего принятого сообщения //Область отображения уведомления

Жак обычно, первая глобальная переменная, oXmlHttp, представляет со¬бак- ссылку на объект XMLHttp, который будет использоваться для вы-нолнения запросов к серверу. Вторая переменная, ilnterval, задает ин¬тервал опроса сервера в миллисекундах. В данном случае интервал ра¬нен 1000 миллисекунд, или 1 секунде, но его можно изменить. Сле-дующая переменная, iLastCommentld, хранит числовой идентификатор последнего сообщения в базе данных. Сравнивая это значение с самым июследним идентификатором, получаемым от сервера, можно опреде¬лить, имеются ли в БД новые сообщения. Последняя переменная, div-Htm'ication, хранит ссылку на элемент , необходимый для ото¬бражения текста уведомления о прибытии новых сообщений.
Когда обнаружится факт прихода нового сообщения, область divNoti-~.zazion будет заполнена информацией о новом сообщении, включая человека, пославшего сообщение, первые 50 символов самого со-;ения и ссылку для просмотра полного текста сообщения. Если требуемый момент времени элемент еще не был создан, он лахжен быть создан и связан с соответствующей информацией о стиле аяображения:
function showNotificati'on(sName, sMessage) { Ь~~ if (!divNotification) {
t--. divNotification = document, с reateElement("div");
* divNotification. className = "notification"; -г;:
document. body. appendChild(divNotif ication);
divNotification. innerHTML = "HoBoe coo6meHMe"
+'sName + " сообщает: " + sMessage + "...П.росмотреть";
divNotification.style.top ='document.body.scrollTop + "px";
divNotification.style.left = document.body.scrollLeft + "px";
divNotification.style.display = "block";
setTimeout(function () {
От создает прямоугольник с белым фоном и красной рамкой вокруг не-т. Разумеется, можно изменить стиль отображения, чтобы он лучше шимсывался в дизайн сайта. Очень важный момент в этом примере: ат¬рибуту position присвоено значение absolute, а атрибуту display - зна¬чащее попе. Установив эти значения, мы гарантируем, что добавление ыемента не вызовет нарушений в отображении информации в. странице. В результате область уведомления будет выведена в окне €роузера так, как показано на рис. 3.4.Как видите, функция showNotification() принимает два парамет имя и текст сообщения. Однако прежде чем использовать эту инфорк цию, необходимо убедиться в существовании области divNotificatio Если эта переменная содержит пустую ссылку, то создается новый: мент с классом CSS notification, после чего он добавляется в i ло документа. Затем в свойство innerHTML этого элемента записывав код HTML с текстом извещения, который включает в себя заголов «Новое сообщение», имя отправителя, первые 50 символов сообщев и ссылку, щелкнув по которой, можно получить полный текст сооби ния. Ссылка указывает на сценарий ViewComment. php и содержит в ст ке запроса числовой идентификатор сообщения (содержимое переме ной iLastCommentld). Затем с помощью свойств scrollLeft и scrollT^ объекта document.body устанавливается позиция вывода области домления, причем так, чтобы оно всегда располагалось в верхнем. вом углу окна независимо от положения полос прокрутки странв (страница может быть прокручена вниз и/или вправо к моменту пос пления уведомления). Затем область уведомления делается видимо для чего в свойство display записывается значение block.
В заключение функция устанавливает тайм-аут равным 5 секув (5000 миллисекундам), по истечении которых уведомление буд скрыто. Оставлять уведомление на виду вряд ли правильно, если в j зайне страницы для него не отведено специальное место, т. к. обла уведомления земся к коду JavaScript. Функция, выполняющая основную рабо¬ту, называется checkComments(). Она отвечает за проверку наличия об-лений на сервере. Бе код очень напоминает предыдущие примеры:
'unction checkCommentsO { if (!oXmlHttp) {
oXmlHttp = zXmlHttp.createRequestO; } else if (oXmlHttp. readyState .'= 0) { oXmlHttp.abort();
>
oXmlHttp.open("get", "CheckComments.php", true); oXmlHttp.onreadystatechange = function () {
if (oXmlHttp.readyState == 4) { if (oXmlHttp.status == 200) {
var aOata = oXmlHttp.responseText.split("||"); if (aData[0] != iLastCommentld) { if (iLastCommentld != -1) {
showNotification(aData[1], aData[2]);
)
iLastCommentld = aData[0];