Главная страница   /   15.2. Объект jqXHR (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

15.2. Объект jqXHR

Результатом метода ajax является объект jqXHR, который можно использовать для получения информации о запросе и взаимодействия с ним. Объект jqXHR – это расширенный объект XMLHttpRequest, который поддерживает браузерную поддержку для Ajax и был адаптирован для работы со свойства отложенного объекта (deferred object) jQuery, о чем я расскажу в главе 35.

Для большинства Ajax операций вы можете просто игнорировать объект jqXHR, что я и советую вам делать. Объект jqXHR полезен, если вам нужно больше информации об ответе сервера, чем доступно на данный момент. Также объект jqXHR можно использовать для конфигурации Ajax запроса, но это делается гораздо проще при помощи настроек метода ajax. В таблице 15-2 описаны члены объекта jqXHR.

Таблица 15-2: Члены объекта jqXHR
Член объекта jqXHR Описание
readyState Возвращает прогресс запроса в его жизненном цикле от неотправленного (0) до завершенного (4)
status Возвращает код HTTP статуса, отправленного обратно сервером
statusText Возвращает текстовое описание кода статуса
responseXML Возвращает ответ, если это XML документ
responseText Возвращает ответ как строку
setRequestHeader(name, value) Устанавливает заголовок запроса (это гораздо проще сделать при помощи настройки headers)
getAllResponseHeaders() Возвращает все заголовки в ответе как одну строку
getResponseHeader(name) Возвращает значение указанного заголовка ответа
abort() Завершает запрос

В некоторых местах вы видите объект jqXHR. Во-первых, в качестве результата метода ajax, как показано в листинге 15-2.

Листинг 15-2: Использование объекта jqXHR
<script type="text/javascript">
	$(document).ready(function () {
		var jqxhr = $.ajax("mydata.json", {
			success: function (data) {
				var template = $('#flowerTmpl');
				template.tmpl(data.slice(0, 3)).appendTo("#row1");
				template.tmpl(data.slice(3)).appendTo("#row2");
			}
		});
		var timerID = setInterval(function () {
			console.log("Status: " + jqxhr.status + " " + jqxhr.statusText);
			if (jqxhr.readyState == 4) {
				console.log("Request completed: " + jqxhr.responseText);
				clearInterval(timerID);
			}
		}, 100);
	});
</script>

В этом примере я определяю результат метода ajax, а затем использую метод setInterval, чтобы выводить информацию о запросе каждые 100 миллисекунд на консоль. Использование результата метода ajax не меняет того факта, что запрос выполняется асинхронно, поэтому будьте внимательны при работе с объектом jqXHR. Я использую настройку readyState, чтобы проверить статус запроса (значение 4 показывает, что запрос завершен) и вывести ответ сервера на консоль. Результат выполнения этого скрипта следующий (хотя из-за конфигурации вашего браузера он может выглядеть немного по-другому):

Status: 200 OK

Request completed: [{"name":"Astor","product":"astor","stocklevel":"10","price":"2.99"},
{"name":"Daffodil","product":"daffodil","stocklevel":"12","price":"1.99"},
{"name":"Rose","product":"rose","stocklevel":"2","price":"4.99"},
{"name":"Peony","product":"peony","stocklevel":"0","price":"1.50"},
{"name":"Primula","product":"primula","stocklevel":"1","price":"3.12"},
{"name":"Snowdrop","product":"snowdrop","stocklevel":"15","price":"0.99"}]

Вообще, я редко использую объект jqXHR и никогда в качестве результата метода ajax. jQuery автоматически начинает Ajax запрос, если был вызван метод ajax, поэтому возможность конфигурации запроса я не считаю полезной. Если я хочу работать с объектом jqXHR (обычно для получения более подробной информации об ответе сервера), тогда я это делаю при помощи настроек обработчика событий, о чем я расскажу далее в этой главе в разделе "Обработка событий Ajax". Они предоставляют мне содержание в зависимости от статуса запроса, что обозначает, что мне не нужно дополнительно собирать данные по статусу запроса.