Pro jQuery
Адам Фриман
Конфигурация базовых настроек для 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
, который я использую для этой главы, может разобрать и обработать этот объект.