Поставлена задача отслеживать ход выполнения AJAX-запроса.

Опубликовал: admin Tuesday, July 23, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

Необходимо выполнить некоторые действия перед отправкой запроса на сервер. Кроме того, нужно контролировать максимальное время ожидания ответа от сервера и выполнять разные действия в случае успешного ответа и сообщения об ошибке.

Решение

Для решения задачи воспользуемся вспомогательной функцией $.ajax() (листинг 9.2.1), которая может предоставить нам гораздо больше возможностей управления AJAX-запросами, чем рассмотренные функции $.get() и $.post(), по сути, являющиеся высокоуровневыми абстракциями, более простыми в понимании и применении, но с ограниченной функциональностью.

Листинг 9 .2 .1 . Использование вспомога те л ьной ф ун к ции $.ajax()

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-9-2-1</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div {
width:400px; height:200px; padding:10px; margin:10px; border:3px double #369; overflow:auto;
}
span { color:#f00; }
</style>
<script type="text/javascript">
$(function () {
$("button:first").click(function(){
$.ajax("testAjax.php", { type: "POST",
data: "name=Jonh&age=35", timeout: 5000, beforeSend: function(){
$("div").text("Загрузка...");
},
success: function(data, textStatus, jqXHR){
$("div").html(data + '<br />Статус ответа: ' + textStatus + '<br
/>Код ответа сервера: ' + jqXHR.status);
},
error: function(jqXHR, textStatus){
$("div").html('<span>' + textStatus +
'</span><br />Код ответа сервера: ' + jqXHR.status);
}
});
});
$("button:last").click(function(){
$("div").empty();
});
});
</script>
</head>
<body>
<button>Загрузить</button>
<button>Очистить</button>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-9-2-1</title>

div {

width:400px; height:200px; padding:10px; margin:10px; border:3px double #369; overflow:auto;

}

span { color:#f00; }

</style>

$(function () {

$("button:first").click(function(){

$.ajax("testAjax.php", { type: "POST",

data: "name=Jonh&age=35", timeout: 5000, beforeSend: function(){

$("div").text("Загрузка...");

success: function(data, textStatus, jqXHR){

$("div").html(data + '<br />Статус ответа: ' + textStatus + '<br

/>Код ответа сервера: ' + jqXHR.status);

error: function(jqXHR, textStatus){

$("div").html('<span>' + textStatus +

'</span><br />Код ответа сервера: ' + jqXHR.status);

}

});

$("button:last").click(function(){

$("div").empty();

});

</script>

</head>

<body>

<button>Загрузить</button>

<button>Очистить</button>

</body>

</html>

Обсуждение

В листинге 9.2.1 мы снова видим надоевшую уже HTML-разметку — элемент div, предназначенный для помещения в него ответа от сервера, и кнопки Загрузить и Очистить, выполняющие те действия, названия которых на них написаны.

Подробно будем рассматривать JavaScript-код, который выполняется при щелчке мышью по кнопке Загрузить. Именно здесь мы применим вспомогательную функцию $.ajax() с двумя аргументами — url, к которому будем отправлять запрос, и объектом, состоящим из пар ключ/значение, для настройки этого AJAX-запроса. Все свойства этого объекта необязательные и используются только тогда, когда нужно установить значение, отличное от значения по умолчанию.

ПРИМЕЧАНИЕ

Значения по умолчанию для всех AJAX-запросов веб-страницы могут быть установлены для любой опции в $.ajaxSetup().

Но давайте вернемся к примеру из листинга 9.2.1.

Итак, первым аргументом мы передаем url, к которому будет отправлен запрос —

testAjax.php.

Во втором аргументе передаем объект с настройками и первая опция, которую мы определяем в этом объекте — опция type, задает требуемый тип запроса. В нашем случае на сервер будет отправлен POST-запрос.

Опция data — данные, которые нужно отправить на сервер. Данные представлены в виде строки запроса точно таким же образом, каким они представляются при отправке обычного GET-запроса, т. е. пары имя/значение, объединенные знаком ‘&’.

Опция timeout — число в миллисекундах, определяющее время ожидания ответа от сервера. При превышении этого времени запрос будет считаться не выполненным.

Опция beforeSend — тут можно определить функцию, выполняемую перед отправкой запроса на сервер. В нашем примере мы просто вставляем в элемент div текст, информирующий о том, что начался процесс загрузки. Вообще здесь можно написать функцию, проверяющую какие-либо условия и в зависимости от результата отменяющую выполнение AJAX-запроса, вернув false.

Опция success — здесь определяем функцию, которая исполняется только в случае успешного выполнения запроса. В примере все полученные от сервера данные вставляются в элемент div как HTML-код.

В опции error можно определить функцию, вызываемую при возникновении ошибки. В примере мы вставляем в элемент div HTML-код, содержащий сообщение об ошибке.

В листинге 9.2.1а приведен исходный код файла testAjax.php, к которому мы отправляли наш запрос. Попробуйте изменить количество итераций цикла for до 5, задав 5-секундную задержку ответа, и убедитесь, что вы получите сообщение об ошибке — ‘timeout’.

Листинг 9 .2 .1 a . Исходный код файла testAjax.php

[code language=”php”]
Ответ
сервера

Время: ‘.date(“H:i:s”,
time()).’

‘;
}
}
?>

На примере из листинга 9.2.1 мы рассмотрели только несколько возможных опций, хотя нужно отметить, что именно эти опции встречаются наиболее часто. В табл. 9.1 приведен полный список и описания всех возможных опций, применяемых при настройках AJAX-запросов с помощью вспомогательных функций

$.ajax() или $.ajaxSetup().

Таблица 9.1. Опции вспомогательных функций $.ajax() и $.ajaxSetup()

Опция	Описание
async	По умолчанию все AJAX-запросы передаются в асинхронном режиме. Опция принимает значения true или false. По умолчанию установлено true. Если необходимо выполнить синхронный запрос, ее нужно установить в false. При этом следует помнить, что пока синхронный запрос не завершен, блокируется любая активность браузера. Кроссдоменные запросы и запросы с dataType: ‘jsonp’ не поддерживают синхронный запрос
beforeSend(jqXHR, settings)	Функция, которая может быть вызвана с целью изменения объекта jqXHR (в jQuery 1.4.x объект XMLHTTPRequest) перед его отправкой на сервер. Можно использовать для проверки условий, при которых должна состояться передача объекта на сервер и т. п. В этой функции можно вернуть false, чтобы отменить отправку запроса на сервер
cache	Опция добавлена в jQuery, начиная с версий 1.2. Принимает логические значения true или false. Если установлена в false, то браузер не будет кэшировать запрашиваемую страницу. По умолчанию задано значение true, но если для опции dataType установлено значение script, то для опции cache по умолчанию будет назначено false
complete(jqXHR, textStatus)	Функция, которая может быть вызвана после завершения AJAX-запроса (и после того как будут выполнены функции, определенные в опциях success и error). Функция принимает два аргумента: объект jqXHR (в jQuery 1.4.x объект XMLHTTPRequest) и строку, описывающую тип успешно выполненного запроса
contents	Добавлено в версии 1.5. Объект, состоящий из пар строка/регулярное выражение, которые определяют, как jQuery будет разбирать ответ с учетом типа его содержимого
contentType	Строка, определяющая используемый content-type при передаче данных на сервер. По умолчанию установлен application/x-www-form-urlencoded, как наиболее подходящий в большинстве случаев

Таблица 9.1 (продолжение)

Опция	Описание
context	Объект, определяющий контекст для callback-функций AJAX-запроса
converters	Добавлено в версии 1.5. Конвертер типа данных в тип данных. Значение по умолчанию {"* text": window.String, "text html": true, "text json": jQuery.parseJSON, "text xml": jQuery.parseXML}. Каждое значение объекта является функцией, которая возвращает преобразованное значение ответа сервера
crossDomain	Добавлено в версии 1.5. Значение по умолчанию: true для кроссдоменных запросов и false для запросов к своему домену. Если необходимо заставить кроссдоменный запрос (например JSONP) выполняться к своему домену, следует установить значение true
data	Объект или строка с данными, предназначенными для передачи на сервер. Преобразуются в строку запроса, если уже не являются таковой. Для запросов типа GET добавляются в URL. Объект должен представлять собой пары ключ/значение. Если значение будет являться массивом, jQuery упорядочит множество значений с одним и тем же ключом. Например: {foo:["bar1", "bar2"]} превратится в ‘&foo=bar1&foo=bar2’
dataFilter(data, type)	Функция, которая будет использоваться для обработки данных, возвращенных в объекте XMLHttpRequest. Это функция предварительной фильтрации, которая должна возвратить предварительно обработанные данные. Функция принимает два аргумента: данные, возвращенные с сервера в аргументе data, и значение опции dataType в аргументе type
dataType	Строка, определяющая тип данных, которые ожидаются в ответе сервера. Если опция не определена, то jQuery передаст в success либо responseXML, либо responseText. Выбор будет произведен на основании MIME-типа ответа. Доступные значения: xml — возвращается XML-документ, который может быть обработан через jQuery; html — возвращается HTML как простой текст. Включенные теги <script> расцениваются как вставленные в объектную модель документа (DOM); script — ответ оценивается как JavaScript и возвращается как простой текст; json — ответ оценивается как данные в формате JSON и возвращается как объект JavaScript; jsonp — ответ оценивается как данные в формате JSON, загружаемые с удаленного домена с использованием JSONP; text — строка, представляющая собой простой текст

Таблица 9.1 (продолжение)

Опция	Описание
error(jqXHR, textStatus, errorThrown)	Функция, которая может быть вызвана, если запрос потерпел неудачу. Функция принимает три аргумента: объект jqXHR (в jQuery 1.4.x объект XMLHTTPRequest), строку, описывающую тип ошибки, которая произошла, и дополнительный объект исключения, если он имеется. Возможные значения второго аргумента — "timeout", "error", "abort" и "parsererror"
global	Опция определяет, вызывать или нет глобальные обработчики событий для этого AJAX-запроса. По умолчанию установлено true. Необходимо установить опцию в false, чтобы предотвратить вызов глобальных обработчиков (например ajaxStart или ajaxStop) из этого запроса. Эту опцию можно использовать для управления различными AJAX-событиями
headers	Добавлено в версии 1.5. Объект, содержащий дополнительные заголовки, которые могут быть отправлены. Этот параметр устанавливается до вызова функции, определенной в beforeSend и поэтому на этом этапе имеется возможность внести изменения
ifModified	Опция принимает значения true или false. По умолчанию установлено false. Если установить значение true, то это позволит запросу быть успешным только в том случае, если ответ сервера изменился со времени последнего запроса к нему. Реализовано проверкой заголовка Last-Modified
isLocal	Добавлено в версии 1.5.1. Значение по умолчанию зависит от текущего значения свойства protocol объекта location. Позволяет распознавать текущее окружение как локальное, даже если jQuery не распознает его. Если требуется изменить значение опции, лучше делать это в $.ajaxSetup()
jsonp	Строка, которая переопределяет имя callback-функции при выполнении запроса с jsonp. Это значение будет использоваться вместо callback в той части строки запроса, где передается callback=? (в GET-запросе) или в данных (в POSTзапросе). Например, вариант {jsonp: onJsonPLoad} приведет к передаче на сервер данных onJsonPLoad=?
jsonpCallback	Указывается имя callback-функции для запроса JSONP. Это значение будет использоваться вместо случайных имен, создаваемых jQuery
mimeType	Добавлено в версии 1.5.1. Строка, в которой можно указать значение MIME-типа, чтобы изменить значение, определенное в объекте XMLHTTPRequest
password	Строка, где можно указать пароль для ответа на запрос HTTP-аутентификации
processData	Опция может принимать значения true или false. По умолчанию установлено значение true. Технически, данные передаются как объект, который будет обработан и преобразован в строку запроса, соответствующую content-type application/x-www-form-urlencoded. Если же необходимо передать DOM-документ или другие данные, не подлежащие обработке, необходимо установить значение этой опции в false

Таблица 9.1 (окончание)

Опция	Описание
scriptCharset	Строка, определяющая кодировку данных. Может применяться исключительно с запросами типа GET и только, если опция DataType имеет значения jsonp или script
statusCode	Добавлено в версии 1.5. Объект, где ключом является числовой код ответа сервера, а значением — функция, которая будет вызвана при получении соответствующего кода ответа от сервера
success(data, textStatus, jqXHR)	Функция, которая будет вызвана, когда запрос будет успешно завершен. Функция принимает три аргумента: данные, возвращенные с сервера и отформатированные согласно значению, установленному в опции dataType, строку, описывающую статус ответа сервера, и объект jqXHR (в jQuery 1.4.x объект XMLHTTPRequest)
timeout	Число в миллисекундах. С помощью этой опции устанавливается локальный тайм-аут для AJAX-запроса. Переопределяет значение глобального тайм-аута, если он определен через $.ajaxSetup()
traditional	Может принимать значения true и false. Устанавливается в true, если необходим традиционный способ упорядочивания параметров в строке запроса
type	По умолчанию — "GET". Строка, определяющая тип запроса, — "POST" или "GET". Необходимо отметить, что другие типы запросов, такие как "PUT" и "DELETE", также допустимы здесь, но они поддерживаются не всеми браузерами
url	Строка, содержащая адрес ресурса в Интернете, к которому будет отправлен запрос. Значение по умолчанию — текущая страница
username	Строка, где можно указать имя пользователя, которое будет использоваться в ответ на запрос HTTP-аутентификации
xhr	Функция обратного вызова для создания объекта XMLHTTPRequest. По умолчанию — ActiveXObject (если доступен), в противном случае XMLHTTPRequest. Переопределение позволяет обеспечить свою собственную реализацию создания объекта XMLHTTPRequest
xhrFields	Добавлено в версии 1.5.1. Объект, содержащий пары имя/значение для установки в собственном объекте XMLHTTPRequest

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

Поставлена задача отслеживать ход выполнения AJAX-запроса.

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply