четверг, 4 ноября 2010 г.

Очень краткий курс AJAX

Основная идея AJAX - отправка запроса на сервер и получения ответа от него без перезагрузки текущей страницы. AJAX поддерживается всеми современными браузерами, поэтому устанавливать какие-либо дополнительные компоненты не потребуется. Если вы знаете JavaScript и PHP (или любой другой серверный язык), то можете считать, что уже на 90% знаете AJAX. Если не знаете, то изучайте.

Решим типичную для AJAX задачу - реализуем на сайте часы, показывающие время на сервере. Для этого при загрузке страницы нам нужно создать специальный объект JavaSctipt, который будет отправлять запрос на сервер и получать ответ от него:

var request = null; //Cпециальный объект
if (window.XMLHttpRequest)
{
   request = new XMLHttpRequest(); //Для всех браузеров, кроме IE
} 
else if (window.ActiveXObject) 
{
   request = new ActiveXObject("Microsoft.XMLHTTP"); //Для IE
}

UpdateTime(); //Запускаем обновление времени

function UpdateTime()
{
   //Проверяем готовность к отправке запроса
   if(request.readyState == 4 || request.readyState == 0)
   {
      //Указывает метод передачи, путь к скрипту и будет ли запрос выполнятся асинхронно
      request.open("GET", "script.php", true);

      //Отключаем кэширование результатов (для IE)
      request.setRequestHeader("If-Modified-Since", "Sat, 1 Jan 2000 00:00:00 GMT");

      //Назначаем функцию, обрабатывающую ответ от сервера
      request.onreadystatechange = function()
      {
         //Проверяем - получен ли ответ
         if(request.readyState == 4)
         {
            if(request.status == 200)
            {
               //Записываем ответ от сервера в div
               document.getElementById('divTimer').innerHTML = request.responseText;

               //Повторяем запрос через 500 миллисекунд
               setTimeout('UpdateTime()', 500);
            }
         }
      };

      //Отправляем запрос
      request.send(null);
   }
   else
   {
      //Если специальный объект был занят, повторяем запрос через 500 миллисекунд
      setTimeout('UpdateTime()', 500);
   }
}

В файле script.php получаем время:

<?php echo date('H-i-s'); ?>

На этом курс окончен.) Ещё раз хочу подчеркнуть - не важно какой язык используется на стороне сервера. В request.responseText окажется то, что вы увидите, введя адрес своего скрипта в браузер (например, www.site.ru/script.php).

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

Отправить комментарий

Мои записи и на Я.ру — levelost!