Как выполняется AJAX запрос через JQuery?

AJAX запросы через jQuery

Исторический вопрос о jQuery AJAX. Объясню как это работает, хотя в современном фронтенде используют fetch или axios.

Что такое AJAX?

AJAX (Asynchronous JavaScript and XML) - технология отправки асинхронных HTTP запросов с странице без перезагрузки.

Исторически использовали XML, сейчас в основном JSON.

jQuery $.ajax() - основной синтаксис

Простой GET запрос

$.ajax({
  url: '/api/users/123',
  type: 'GET',
  success: function(data) {
    console.log('Данные получены:', data);
  },
  error: function(error) {
    console.error('Ошибка:', error);
  }
});

Полный пример с POST и данными

$.ajax({
  url: '/api/users',
  type: 'POST',
  data: JSON.stringify({
    name: 'Alice',
    email: 'alice@example.com'
  }),
  dataType: 'json',
  contentType: 'application/json',
  success: function(response) {
    console.log('Пользователь создан:', response);
  },
  error: function(xhr, status, error) {
    console.error('Статус:', xhr.status);
    console.error('Ошибка:', error);
  }
});

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

URL и метод

url: '/api/data'              // адрес запроса
type: 'GET'                   // или POST, PUT, DELETE, PATCH
method: 'POST'                // альтернатива type

Данные

data: {                       // объект, будет преобразован
  name: 'John',
  age: 30
}

data: 'name=John&age=30'      // строка (URL-encoded)

data: JSON.stringify({        // JSON
  name: 'John'
})

Формат данных

dataType: 'json'              // тип ответа (json, html, text, xml)
contentType: 'application/json' // тип отправляемых данных

Обработчики

success: function(data, status, xhr) {
  // Вызывается если статус 200-299
}

error: function(xhr, status, error) {
  // Вызывается при ошибке
  // xhr.status содержит код ошибки
}

complete: function() {
  // Вызывается всегда (успех или ошибка)
}

statusCode: {
  404: function() {
    alert('Page not found');
  },
  500: function() {
    alert('Server error');
  }
}

Заголовки и аутентификация

headers: {
  'Authorization': 'Bearer token123',
  'Custom-Header': 'value'
}

beforeSend: function(xhr) {
  xhr.setRequestHeader('Authorization', 'Bearer token');
}

Практические примеры

1. Загрузка списка пользователей

$.ajax({
  url: '/api/users',
  type: 'GET',
  dataType: 'json',
  success: function(users) {
    users.forEach(function(user) {
      console.log(user.name);
    });
  },
  error: function() {
    alert('Ошибка при загрузке пользователей');
  }
});

2. Отправка формы без перезагрузки

$('#submit-form').click(function() {
  $.ajax({
    url: '/api/contact',
    type: 'POST',
    data: {
      name: $('#name').val(),
      email: $('#email').val(),
      message: $('#message').val()
    },
    success: function() {
      alert('Спасибо, сообщение отправлено!');
      $('#form')[0].reset();
    },
    error: function() {
      alert('Ошибка при отправке');
    }
  });
});

3. С индикатором загрузки

$.ajax({
  url: '/api/data',
  type: 'GET',
  beforeSend: function() {
    $('#loading').show();  // Показываем спиннер
  },
  success: function(data) {
    $('#content').html(data);
  },
  complete: function() {
    $('#loading').hide();  // Скрываем спиннер
  }
});

Сокращенные методы jQuery

jQuery предоставляет удобные методы-обертки:

// $.get() - GET запрос
$.get('/api/users', function(data) {
  console.log(data);
});

// $.post() - POST запрос
$.post('/api/users', {
  name: 'Alice'
}, function(data) {
  console.log(data);
});

// $.getJSON() - GET с автоматическим парсингом JSON
$.getJSON('/api/users', function(data) {
  console.log(data); // Уже распарсено
});

// $.load() - загрузить HTML в элемент
$('#content').load('/pages/about.html');

Обработка ошибок

Полная обработка

$.ajax({
  url: '/api/data',
  type: 'GET',
  error: function(xhr, status, error) {
    // xhr.status - HTTP код (404, 500, etc)
    // status - тип ошибки (error, timeout, etc)
    // error - сообщение об ошибке
    
    if (xhr.status === 404) {
      console.log('Ресурс не найден');
    } else if (xhr.status === 500) {
      console.log('Ошибка сервера');
    } else if (status === 'timeout') {
      console.log('Timeout');
    }
  }
});

Глобальные обработчики ошибок

$(document).ajaxError(function(event, xhr, settings, error) {
  console.log('Глобальная ошибка AJAX:', xhr.status);
});

$(document).ajaxSuccess(function() {
  console.log('Запрос успешен');
});

$(document).ajaxStart(function() {
  $('#loading').show();
});

$(document).ajaxStop(function() {
  $('#loading').hide();
});

Современная альтернатива

Сейчас jQuery AJAX считается устаревшим. Используют:

Fetch API (встроенный)

fetch('/api/users', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({name: 'Alice'})
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Ошибка:', error));

Axios (популярная библиотека)

axios.post('/api/users', {
  name: 'Alice'
})
.then(response => console.log(response.data))
.catch(error => console.error('Ошибка:', error));

Отличия jQuery AJAX от Fetch

Выводы

jQuery $.ajax() это:

• Исторически важный способ отправки запросов
• Удобен для старых проектов, но устарел
• Работает везде, включая старые браузеры
• Сейчас используют Fetch API или Axios в новых проектах

На собеседовании по frontend обычно спрашивают про современный Fetch, но знание jQuery AJAX показывает понимание HTTP и асинхронности.