Настройка параметров запроса

Zepto.js — это лёгкая библиотека для работы с DOM и AJAX, предоставляющая удобный интерфейс для выполнения HTTP-запросов и управления их параметрами. Основной механизм работы с AJAX в Zepto основан на функции $.ajax(), которая позволяет гибко конфигурировать запросы, управлять заголовками, данными и обработкой ответов.

Основные параметры $.ajax()

Функция $.ajax() принимает объект конфигурации с множеством опций:

$.ajax({
    url: '/api/data',
    type: 'GET',
    dataType: 'json',
    data: { id: 123 },
    headers: { 'Authorization': 'Bearer token' },
    timeout: 5000,
    success: function(response) { console.log(response); },
    error: function(xhr, status, error) { console.error(error); }
});

Ключевые параметры:

  • url — адрес, на который отправляется запрос. Может быть абсолютным или относительным.
  • type — HTTP-метод: GET, POST, PUT, DELETE. По умолчанию GET.
  • data — данные, отправляемые на сервер. Для GET они будут сериализованы в строку запроса, для POST — отправлены в теле запроса.
  • dataType — ожидаемый формат ответа: json, text, html, xml, script. Позволяет Zepto автоматически обрабатывать ответ.
  • headers — объект с дополнительными HTTP-заголовками.
  • timeout — максимальное время ожидания ответа в миллисекундах.
  • success и error — функции обратного вызова для обработки успешного и неуспешного ответа соответственно.

Сериализация и кодирование данных

Zepto автоматически сериализует объекты data для GET и POST запросов. Например:

$.ajax({
    url: '/api/search',
    type: 'GET',
    data: { query: 'zepto', page: 2 }
});

Этот запрос преобразуется в URL вида /api/search?query=zepto&page=2. Для сложных структур данных можно использовать JSON:

$.ajax({
    url: '/api/save',
    type: 'POST',
    contentType: 'application/json',
    data: JSON.stringify({ name: 'John', age: 30 })
});

Важно: установка contentType в application/json требует явного преобразования объекта в строку JSON.

Заголовки запроса

Настройка заголовков осуществляется через параметр headers:

$.ajax({
    url: '/api/user',
    headers: {
        'Authorization': 'Bearer token',
        'X-Custom-Header': 'value'
    }
});

Zepto позволяет переопределять стандартные заголовки и добавлять собственные, что особенно важно при работе с API, требующими аутентификацию или специфические метаданные.

Таймаут и обработка ошибок

Параметр timeout задаёт максимальное время ожидания ответа:

$.ajax({
    url: '/api/data',
    timeout: 3000,
    error: function(xhr, status, error) {
        if (status === 'timeout') {
            console.error('Превышено время ожидания запроса');
        } else {
            console.error(error);
        }
    }
});

В error функция получает три аргумента:

  1. xhr — объект XMLHttpRequest.
  2. status — строковое значение статуса (timeout, error, abort и т.д.).
  3. error — текст ошибки или объект исключения.

Асинхронность и синхронные запросы

По умолчанию все запросы в Zepto асинхронные (async: true). Можно явно задать синхронный режим:

$.ajax({
    url: '/api/data',
    async: false
});

Использование синхронных запросов не рекомендуется, так как они блокируют выполнение скрипта и интерфейс страницы.

Настройка обработки ответов

Zepto автоматически преобразует ответ сервера в зависимости от dataType. Дополнительно можно использовать функцию beforeSend для предварительной настройки запроса:

$.ajax({
    url: '/api/data',
    beforeSend: function(xhr) {
        xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
    }
});

beforeSend вызывается перед отправкой запроса и позволяет динамически изменять заголовки или другие параметры.

Удобные сокращения

Zepto предоставляет вспомогательные функции для основных методов HTTP:

  • $.get(url, data, success, dataType) — GET-запрос.
  • $.post(url, data, success, dataType) — POST-запрос.
  • $.getJSON(url, data, success) — GET-запрос с автоматическим разбором JSON.

Примеры:

$.get('/api/items', { category: 'books' }, function(data) {
    console.log(data);
}, 'json');

$.post('/api/save', { name: 'Alice' }, function(response) {
    console.log(response);
});

Эти методы позволяют быстро создавать простые запросы без необходимости указывать полный объект конфигурации.

Обработка ошибок с цепочкой then и fail

Zepto поддерживает промисы через методы then, fail и always:

$.ajax({ url: '/api/data' })
    .then(function(response) {
        console.log('Успешно', response);
    })
    .fail(function(xhr, status, error) {
        console.error('Ошибка', status, error);
    })
    .always(function() {
        console.log('Запрос завершён');
    });

Такой подход упрощает управление асинхронными операциями и объединение нескольких запросов в цепочку.

Отправка файлов и FormData

Для загрузки файлов используется объект FormData:

var formData = new FormData();
formData.append('file', fileInput.files[0]);

$.ajax({
    url: '/api/upload',
    type: 'POST',
    data: formData,
    processData: false,
    contentType: false,
    success: function(response) { console.log(response); }
});

Ключевые моменты:

  • processData: false предотвращает автоматическую сериализацию объекта FormData.
  • contentType: false позволяет браузеру установить корректный заголовок multipart/form-data.

Кастомизация глобальных параметров

Zepto позволяет задавать глобальные настройки для всех AJAX-запросов через $.ajaxSetup():

$.ajaxSetup({
    timeout: 5000,
    headers: { 'X-Global-Header': 'value' }
});

Эти параметры будут автоматически применяться ко всем последующим вызовам $.ajax().

Этот подход к настройке параметров запроса в Zepto обеспечивает гибкость и точный контроль над отправкой данных, обработкой ответов и управлением ошибками. Он позволяет интегрировать AJAX-запросы в сложные интерфейсы с минимальной нагрузкой на код и высокой читаемостью.

Оглавление