Базовый синтаксис ajax()

Dom7 — это легковесная библиотека для работы с DOM, тесно интегрированная с фреймворком Framework7, но также используемая и отдельно. Одной из её мощных функций является метод ajax(), который позволяет выполнять асинхронные HTTP-запросы, аналогично XMLHttpRequest или fetch, но с упрощённым синтаксисом и встроенной обработкой ответов.

Основной синтаксис

Метод ajax() вызывается как функция объекта Dom7:

$.ajax({
  url: 'https://api.example.com/data',
  method: 'GET',
  data: { id: 123 },
  dataType: 'json',
  success: function (response) {
    console.log(response);
  },
  error: function (xhr, status) {
    console.error('Ошибка запроса', status);
  },
  complete: function (xhr, status) {
    console.log('Запрос завершён');
  }
});

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

  • url — адрес запроса.
  • method — HTTP-метод: 'GET', 'POST', 'PUT', 'DELETE'.
  • data — данные, отправляемые на сервер. Для GET-запросов они преобразуются в query string.
  • dataType — ожидаемый формат ответа: 'json', 'text', 'html', 'xml'.
  • success — функция, вызываемая при успешном выполнении запроса.
  • error — функция, вызываемая при ошибке запроса.
  • complete — функция, вызываемая после завершения запроса, независимо от результата.

GET и POST запросы

GET-запрос:

$.ajax({
  url: '/api/users',
  method: 'GET',
  dataType: 'json',
  success: function (users) {
    console.log(users);
  }
});

При GET-запросе объект data автоматически сериализуется в параметры URL:

$.ajax({
  url: '/api/users',
  method: 'GET',
  data: { page: 2, limit: 10 },
  success: function (response) {
    console.log(response); // /api/users?page=2&limit=10
  }
});

POST-запрос:

$.ajax({
  url: '/api/users',
  method: 'POST',
  data: { name: 'Иван', age: 25 },
  dataType: 'json',
  success: function (response) {
    console.log(response);
  }
});

Для POST-запросов data отправляется в теле запроса в формате application/x-www-form-urlencoded по умолчанию.

Работа с JSON

Чтобы отправить JSON на сервер, необходимо преобразовать объект в строку и указать заголовок Content-Type:

$.ajax({
  url: '/api/users',
  method: 'POST',
  contentType: 'application/json',
  data: JSON.stringify({ name: 'Мария', age: 30 }),
  dataType: 'json',
  success: function (response) {
    console.log(response);
  }
});

При использовании dataType: 'json' библиотека автоматически преобразует JSON-строку ответа в объект JavaScript.

Обработка ошибок и статусов

Метод ajax() позволяет гибко обрабатывать ошибки:

$.ajax({
  url: '/api/users/999',
  method: 'GET',
  dataType: 'json',
  success: function (data) {
    console.log('Данные получены', data);
  },
  error: function (xhr, status) {
    console.log('Статус ошибки:', status);
    console.log('Код ответа:', xhr.status);
    console.log('Текст ошибки:', xhr.statusText);
  }
});

Параметры функции error:

  • xhr — объект XMLHttpRequest.
  • status — строка с типом ошибки ('timeout', 'error', 'abort', 'parsererror').

Настройка таймаута и заголовков

Dom7 позволяет задавать дополнительные настройки запроса:

$.ajax({
  url: '/api/data',
  method: 'GET',
  timeout: 5000, // время ожидания в миллисекундах
  headers: {
    'Authorization': 'Bearer token',
    'X-Custom-Header': 'value'
  },
  success: function (data) {
    console.log(data);
  },
  error: function (xhr, status) {
    console.error('Ошибка или таймаут', status);
  }
});
  • timeout — прерывает запрос после указанного времени.
  • headers — объект с заголовками HTTP.

Промисы и цепочки запросов

В последних версиях Dom7 метод ajax() возвращает объект Promise, что позволяет использовать .then() и .catch():

$.ajax({
  url: '/api/users',
  method: 'GET',
  dataType: 'json'
})
.then(function (data) {
  console.log('Успешно:', data);
})
.catch(function (err) {
  console.error('Ошибка:', err);
});

Такой подход упрощает организацию последовательных или параллельных запросов без вложенных колбэков.

Пример последовательного запроса

$.ajax({ url: '/api/users', method: 'GET', dataType: 'json' })
  .then(function (users) {
    console.log('Пользователи:', users);
    return $.ajax({ url: '/api/details', method: 'POST', data: { id: users[0].id }, dataType: 'json' });
  })
  .then(function (details) {
    console.log('Детали пользователя:', details);
  })
  .catch(function (error) {
    console.error('Ошибка цепочки запросов', error);
  });

Кросс-доменные запросы

Dom7 поддерживает отправку запросов на другие домены при условии правильной настройки CORS на сервере:

$.ajax({
  url: 'https://external-api.com/data',
  method: 'GET',
  dataType: 'json',
  success: function (data) {
    console.log(data);
  },
  error: function (xhr, status) {
    console.error('CORS ошибка или другой сбой', status);
  }
});

Использование xhrFields: { withCredentials: true } позволяет передавать куки и авторизационные заголовки при кросс-доменных запросах.

Особенности Dom7 ajax()

  • Автоматическая обработка query string для GET-запросов.
  • Преобразование JSON при dataType: 'json'.
  • Поддержка колбэков success, error, complete.
  • Возможность возвращать промисы для асинхронного управления.
  • Простая настройка заголовков и таймаута.

ajax() Dom7 сочетает лаконичность синтаксиса и функциональность, позволяя легко интегрировать асинхронные запросы в приложения на JavaScript.

Оглавление