Урок - .ajaxSend()

Группа вКонтакте
Лицензия: Лицензия Creative Commons.

Метод .ajaxSend() регистрирует функцию для выполнения до отправки данных на сервер. Метод .ajaxSend() является Ajax-событием (Ajax-Event).

Синтаксис метода .ajaxSend()

.ajaxSend( handler(event, jqXHR, ajaxOptions) )

где

  • handler(event, jqXHR, ajaxOptions) - функция обратного вызова.
  • event - объект хранящий в себе параметры события.
    Список некоторых параметров:
    • type - будет равняться ajaxSend.
    • timeStamp - временнеая метка запроса.
    • target - ссылка на вызывающий DOM-элемент.
  • jqXHR - XMLHttpRequest-объект.
    Некоторые из свойст XMLHttpRequest-объекта:
    • responseText - содержит полученный текст.
    • status - HTTP-код ответа.
  • ajaxOptions - объект хранящий в себе параметры AJAX-запроса.
    • url - URL-на страницу запроса.
    • type - метод HTTP-запроса.
    • async - синхронный или асинхронный запрос.
    • dataType - ожидаемый формат данных.
    • data - строка, данные отправляемы на сервер.

Метод .ajaxSend() возвращает: jQuery-объект.

Внутри метода .ajaxSend() ссылка this указывает на объект document.

Описание метода .ajaxSend()

Все обработчики зарегистрированные методом .ajaxSend() вызываются в момент перед отправкой запроса на сервер, в любом AJAX-запросе.

Метод .ajaxSend() применим только к объекту document:

jQuery(document).ajaxSend(function(event, xhr, settings) {
    ... код обработчика
});

Примеры использования метода .ajaxSend().

Пример 1: Добавляем GET-параметры.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(function() {
            //    регистрируем функцию
            jQuery(document).ajaxSend(function(event, xhr, settings) {
                //    изменяем данные отправяемые на сервер
                settings.url += (settings.url.indexOf('?') < 0 ? '?' : '&') + 'key=123456';
            });
        });
        function go() {
            $("#result").load("/responseHtml.php" );
            $("#result").load("/responseHtml.php?version=2" );
        }
    </script>
</head>
<body>
    <button onclick="go()">Go</button>
    <div id="result"></div>
</body>
</html>

2. Выводим информацию об урле обращения в log.

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script type="text/javascript">
        jQuery(function() {
            //    регистрируем функцию
            jQuery(document).ajaxSend(function(event, xhr, settings) {
                //    выводим сообщение на страницу
                jQuery('#log').prepend('<div><b>ajaxSend:</b> '+settings.url+'</div>');
            });
        });
        function go() {
            $("#result").load("/responseHtml.php" );
            $("#result").load("/responseHtml.php?version=2" );
        }
    </script>
</head>
<body>
    <button onclick="go()">Go</button>
    <div id="log"></div>
    <div id="result"></div>
</body>
</html>

 

Задания для практики.

* Используя метод .ajaxSend(), задайте функцию, которая будет подсчитывать количество отправленых AJAX-запросов и отображать количество запущеных запросов на странице.