Главная страница   /   15.7. Конфигурация базовых настроек для Ajax запроса (Pro jQuery

Pro jQuery

Pro jQuery

Адам Фриман

15.7. Конфигурация базовых настроек для Ajax запроса

Есть группа настроек, которая позволяет выполнять некоторую базовую конфигурацию Ajax запроса. Они интересны минимум из-за своей доступности, и они очевидны. В таблице 15-7 показаны настройки, к которым я обращаюсь, и продемонстрирую некоторые из этих настроек в следующих разделах.

Таблица 15-7: Базовые настройки конфигурации запроса
Настройка Описание
accepts Устанавливает значение заголовка Accept запроса, который указывает MIME типы, принимаемые браузером. По умолчанию это определяется настройкой dataType
cache Если установить на false, содержание запроса не будет кешироваться сервером. По умолчанию не кешируются типы данных script и jsonp, все остальное кешируется
contentType Устанавливает для запроса заголовок Content-Type
dataType Указывает тип данных, который ожидается от сервера. Когда используется эта настройка, jQuery будет игнорировать информацию, предоставляемую сервером, о типе данных ответа. О том, как это работает, можно прочесть в главе 14
headers Указывает дополнительные заголовки и значения, которые нужно добавить в запрос. Далее вы увидите наглядный пример
jsonp Указывает строку, которую нужно использовать вместо функции обратного вызова при создании JSONP запросов. Это требует согласования с сервером. Подробную информацию о JSONP можно увидеть в главе 14
jsonpCallback Указывает имя функции обратного вызова, заменяя случайно сгенерированное имя, которое по умолчанию использует jQuery. Подробную информацию о JSONP можно увидеть в главе 14
password Указывает пароль для использования в ответ на попытку аутентификации
scriptCharset При запросе JavaScript содержания говорит jQuery, что скрипт использует определенную кодировку
timeout Указывает тайм-аут (в миллисекундах) запроса. Если время для выполнения запроса истекло, тогда будет вызвана функция, указанная настройкой error, со статусом timeout
username Указывает имя пользователя для ответа на попытку аутентификации

Установка тайм-аутов и заголовков

Пользователи часто не знают, что происходит Ajax запрос, поэтому установка времени для тайм-аута – это хороший способ избежать того, что пользователь "подвиснет" на веб приложении в ожидании окончания процесса, даже не зная о том, что произойдет, когда он завершится. В листинге 15-14 показано, как можно установить тайм-аут для запроса.

Листинг 15-14: Установка тайм-аутов
<script type="text/javascript">
	$(document).ready(function () {
		$.ajax("mydata.json", {
			timeout: 5000,
			headers: {
				"X-HTTP-Method-Override": "PUT"
			},
			success: function (data, status, jqxhr) {
				var template = $('#flowerTmpl');
				template.tmpl(data.slice(0, 3)).appendTo("#row1");
				template.tmpl(data.slice(3)).appendTo("#row2");
			},
			error: function (jqxhr, status, errorMsg) {
				console.log("Error: " + status);
			}
		});
	});
</script>

В этом примере я использовал настройку timeout, чтобы указать максимальную продолжительность для запроса в пять секунд. Если запрос не завершится за это время, тогда будет выполняться функция, указанная настройкой error, со значением status равном error.

Внимание

Таймер запускается, как только запрос передается в браузер, и большинство браузеров устанавливают лимит на число текущих запросов. Это обозначает, что вы рискуете получить тайм-аут запроса прежде, чем он даже начался. Чтобы избежать этого, вы должны иметь некоторое понимание о лимитах браузеров и объемах и ожидаемой продолжительности любых других Ajax запросов, которые выполняются.

В этом листинге я также использовал настройку headers, чтобы добавить в запрос заголовок:

headers: {
	"X-HTTP-Method-Override": "PUT"
},

Дополнительные заголовки добавляются при помощи объекта-карты. Заголовок в этом примере – это тот, о котором я упоминал в разделе "Создаем POST запрос" ранее в этой главе. Этот заголовок может быть полезен для создания RESTful веб приложений, если он правильно понят сервером.

Отправка на сервер данных JSON

Отправлять данные JSON на сервер может быть полезно; это компактный и выразительный формат данных и его просто генерировать из JavaScript объектов. Вы используете настройку contentType, чтобы указать заголовок запроса Content-Type, который говорит серверу, какой тип данных отправляется. Пример отправки данных JSON можно увидеть в листинге 15-15.

Листинг 15-15: Отправка JSON на сервер
<script type="text/javascript">
	$(document).ready(function () {
		$.ajax("mydata.json", {
			success: function (data, status, jqxhr) {
				var template = $('#flowerTmpl');
				template.tmpl(data.slice(0, 3)).appendTo("#row1");
				template.tmpl(data.slice(3)).appendTo("#row2");
			}
		});
		$('button').click(function (e) {
			$.ajax({
				url: $('form').attr("action"),
				contentType: "application/json",
				data: JSON.stringify($('form').serializeArray()),
				type: 'post',
				success: processServerResponse
			})
			e.preventDefault();
		})
		function processServerResponse(data) {
			var inputElems = $('div.dcell').hide();
			for (var prop in data) {
				var filtered = inputElems.has('input[name=' + prop + ']')
					.appendTo("#row1").show();
			}
			$('#buttonDiv, #totalDiv').remove();
			$('#totalTmpl').tmpl(data).appendTo('body');
		}
	});
</script>

Я использовал настройку contentType, чтобы указать значение application/json, которое является MIME типом для JSON. Я мог выслать на сервер любой объект, но я хотел показать, как можно выражать данные из формы в качестве JSON:

data: JSON.stringify($('form').serializeArray()),

Я выбираю элемент form и вызываю метод serializeArray; он создает массив объектов, каждый из которых имеет свойство name и свойство value, представляющих один из элементов input формы. Затем я использую метод JSON.stringify, чтобы конвертировать их в строку:

[{"name":"astor","value":"1"}, {"name":"daffodil","value":"1"},
{"name":"rose","value":"1"}, {"name":"peony","value":"1"},
{"name":"primula","value":"1"},{"name":"snowdrop","value":"1"}]

И вот у вас есть удобный массив объектов JSON, который вы можете отправить на сервер. Скрипт Node.js, который я использую для этой главы, может разобрать и обработать этот объект.