Показ анимации во время выполнения AJAX-запроса

В большинстве случаев во время выполнения AJAX-запроса нужно показывать какую-либо анимацию. Это необходимо для того, чтобы уведомить пользователя о том, что запрос уже обрабатывается и ему не нужно нажимать кнопку ещё раз.

В этом примере роль анимации будет исполнять gif-изображение. Если нет возможности создать gif-анимацию самостоятельно, то её можно скачать. Например, с preloaders.net. Для показа анимации нужно создать какой-нибудь элемент рядом с элементом, к которому относится выполняемый запрос:

<table>
   <tr>
      <td><input type="button" value="Отправить"></td>
      <td id="myAnimation" height="16" width="16"></td><!--Элемент для показа анимации-->
   </tr>
</table>

Показ и скрытие анимации в функции, отправляющей запрос:

function MyFunction()
{
   //Анимацию нужно показать перед отправкой запроса
   var tdAnimation = document.getElementById('myAnimation');
   tdAnimation.style.background = 'url(load.gif)';

   if(request.readyState == 4 || request.readyState == 0)
   {
      request.open("GET", "script.php", true);
      request.onreadystatechange = function()
      {
         if(request.readyState == 4)
         {
            if(request.status == 200)
            {
               //Обработка данных 
               //...

               //Скрывать анимацию нужно только после выполнения запроса
               tdAnimation.style.background = null;
            }
         }
      };
      request.send(null);
   }
   else
   {
      setTimeout('MyFunction()', 500);
   }
}

Всё очень просто. Главное показывать и скрывать анимацию в нужное время.