В предыдущей статье мы немного познакомились с запросами Ajax, которые позволяет выполнять библиотека jQuery. Теперь рассмотрим события Ajax и примеры обработки этих событий…

ajaxComplete( callback ) – прикрепляет функцию, которая выполняется всякий раз, когда выполненajax-запрос. Функция принимает в качестве аргументов объект XMLHttpRequest и установки, используемые в этом запросе.
Пример: показываем сообщение, когда AJAX запрос выполнен.

$("#msg").ajaxComplete(function(request, settings){
   $(this).append("<span>Request Complete.</span>");
});

ajaxError( callback ) – прикрепляет функцию, которая выполняется всякий раз, когда какой-либо ajax-запрос неудачен. Функция принимает в качестве аргументов объект XMLHttpRequest и установки, используемые в этом запросе. Третий параметр передается, если при обработке запроса произошла ошибка и эта ошибка определена.
Пример: показываем сообщение, когда AJAX запрос неудачен.

$("#msg").ajaxError(function(event, request, settings){
   $(this).append("<span>Error requesting page "
   + settings.url
   + "</span>");
});

ajaxSend( callback ) – прикрепляет функцию, которая выполняется всякий раз, когда какой-либо ajax-запрос отправлен. Функция принимает в качестве аргументов объект XMLHttpRequest и установки, используемые в этом запросе.
Пример: показываем сообщение, когда AJAX запрос отправлен.

$("#msg").ajaxSend(function(evt, request, settings){
   $(this).append("<span>Starting request at "
   + settings.url
   + "</span>");
});

ajaxStart( callback ) – прикрепляет функцию, которая выполняется всякий раз, когда ajax-запрос начат (и нет выполняющихся запросов).
Пример: показываем сообщение о загрузке.

$("#loading").ajaxStart(function(){
   $(this).show();
});

ajaxStop( callback ) – прикрепляет функцию, которая выполняется всякий раз, когда ajax-запросы закончены.
Пример: скрываем сообщение о загрузке после того, как все AJAX-запросы окончены.

$("#loading").ajaxStop(function(){
   $(this).hide();
});

ajaxSuccess( callback ) – прикрепляет функцию, которая выполняется всякий раз, когда ajax-запрос выполнен успешно. Функция принимает в качестве аргументов объект XMLHttpRequest и установки, используемые в этом запросе.
Пример: показываем сообщени, когда AJAX-запрос выполнен успешно.

$("#msg").ajaxSuccess(function(evt, request, settings){
   $(this).append("<span>Successful Request!</span>");
});

Чтобы все это было немного понятнее, придумаем, напишем и испытаем какой-нибудь вполне реальный пример, в котором используем некоторые из перечисленных выше событий. Вот сам пример:

Вы можете скачать исходный код примера, и при наличии библиотеки jQuery воспроизвести это пример на своем сайте.

Итак создадим два файла: events.html – где будут размещен элемент (например обычная ссылка), щелчок мышью на которой будет инициировать ajax запрос, и файл events.php – обработчик ajax-запросов.
Понятно, что в раздел HEAD файла events.html необходимо подключить библиотеку jQuery.

<script type="text/javascript" src="js/jquery-1.2.1.js"></script>

Затем простенький HTML-код:

<ul>
  <li>
    <a href="http://www.linkexchanger.su/wp-admin/#" id="a1">Выполнить Ajax-запрос</a>
    <span id="loading">Выполняется Ajax-запрос...</span>
  </li>
  <li>
    <span id="message">Ajax-запрос выполнен.</span>
  </li>
</ul>

кусочек из таблицы стилей:

#loading {
  display:none;
  padding-left:10px;
}
#message {
  display:none;
  padding-left:10px;
}

и полностью javascript-код:

<script type="text/javascript">
$(document).ready(function(){
  $("#a1").click(
    function () {
      $.ajax({
        type: "POST",
        data: "n=3",
        url: "events.php"
      });
    });  

  $("#loading").ajaxStart(function(){
   $(this).show();
   $("#message").hide();
  });
  $("#loading").ajaxStop(function(){
   $(this).hide();
  });
  $("#message").ajaxComplete(function(){
   $(this).show();
 });  

});
</script>

Теперь давайте все это попробуем разобрать по шагам и отталкиваться будем от javascript-кода.
По клику на элементе а с идентификатором а1 будет выполнен ajax-запрос к файлу events.php (его код чуть позже). Тип запроса мы определим как POST и в качестве данных передадим некий параметр n=3.
Затем займемся «развешиванием» событий на HTML-элементы. По событию ajaxStart будет показан элемент с идентификатором #loading, изначально скрытый с помощью CSS. Элемент #message по этому же событию будет скрыт (он скрыт и изначально, но мы делаем это для того, чтобы скрыть его, если раньше выполнялись запросы и этот элемент был показан). Далее, по событию ajaxStop надо будет скрыть элемент #loading, а по событию ajaxComplete показать элемент #message.

А теперь приведу код обработчика ajax-запроса – файл events.php

<?php
if($_SERVER['HTTP_X_REQUESTED_WITH']=='XMLHttpRequest') {
  if ($_POST) {
  	for($i=0;$i<count($_POST['n']);$i++) sleep(1);
  } else {
  	echo "Не передан параметр!";
  }
}
?>

Для начала мы проверяем существование объекта XMLHttpRequest и выполняем код только в том случае, если он существует. Сам по себе этот код только прогоняет цикл из 3 итераций, каждый раз «засыпая» на секунду (эта задержка сделана для того, чтобы сам процесс запроса можно было «почувствовать»).

Пример получился, естественно простейший, без дальнейшей обработки возвращаемых сервером данных, но его целью было только продемонстрировать работу с событиями Ajax, а для более реальных примеров еще будет время…

Поделиться в FaceBookПоделиться ВКонтактеДобавить в TwitterПоделиться в Моём МиреСохранить закладку в GoogleОтправить в Живую ленту GoogleДобавить в Яндекс.ЗакладкиПоделиться в ОдноклассникахОпубликовать в LiveJournal