Ошибка Ajax при ответе 200 OK: корректное удаление записи

Быстрый ответ

Если сервер вернул статус 200 OK, а ваш Ajax-запрос вызвал ошибку, скорее всего, причина в несоответствии типов данных или некорректном формате ответа. Укажите в запросе параметр dataType таким образом, чтобы его значение совпадало с форматом данных, возвращаемых сервером. Для JSON применяется следующий код:

$.ajax({
  url: "your-url",
  dataType: "json", // Проверьте, соответствует ли этот параметр формату данных, возвращаемых сервером
  success: function(data) {
    console.log("Успех! Мы это сделали! ✋✋");
  },
  error: function(xhr) {
    console.error("Ошибка! Что-то пошло не так.", xhr.responseText);
  }
});

Понимание ответов сервера

Будьте внимательны! Если вы ожидаете получить HTML в ответе, а не JSON, вам не следует использовать dataType: 'json', поскольку ваш HTML попробуют проанализировать как JSON, что, естественно, вызовет ошибку. Поэтому используйте:

dataType: 'html'

Просто и понятно, не правда ли?

Что, если ответ сервера пуст и/или JSON сформирован не корректно?

Пустой ответ следует возвращать как объект null или в виде пустого JavaScript объекта {}. Некорректно сформированный JSON вызовет ошибку. Проверьте корректность вашего JSON — ваше будущее "я" обязательно скажет вам спасибо за это.

// Псевдокод для серверной части
if (dataIsEmpty) {
  response.write('{}'); // Пустой объект не вызовет проблем
}

Заголовок Content-Type — это наш секретный код

Заголовок Content-Type в ответе сервера — это своего рода рукопожатие 🤝, которое передает клиенту информацию о том, как обрабатывать полученные данные:

dataType: 'json'  // Ожидания клиента

Content-Type: application/json; charset=utf-8  // Реальность сервера

Вот это уже похоже на командную работу!

CORS: междоменные запросы

При работе с кросс-доменными запросами, убедитесь, что ваш сервер отвечает с нужными CORS заголовками (Access-Control-Allow-Origin). В противном случае, запрос будет заблокирован быстрее, чем вы успеете сказать «запрещено».

Как обрабатывать ошибки на профессиональном уровне

Будьте готовы к неожиданным ситуациям и реализуйте функции для обработки ошибок:

error: function(xhr, status, error) {
  console.error("Произошла AJAX-ошибка со статусом:" + status);
}

Отладка — ваш главный инструмент

Обнаруживайте и исправляйте ошибки, отлаживая Ajax-запросы. Для этого используйте вкладку «Сеть» в инструментах разработчика вашего браузера 🔎.

Визуализация

Вероятно, вы чувствуете себя так, как будто получили коробку (📦✅), но её содержимое не соответствует ожидаемому (📦❌). Именно такое ощущение возникает, когда ответ Ajax-запроса — 200 OK, но событие генерирует ошибку.

Обеспечьте 100% совместимость данных

Чтобы сделать ваши Ajax-запросы более универсальными, установите в dataType значение 'text json'. Таким образом, ответ будет сначала обработан как текст, а затем преобразован в JSON:

$.ajax({
  url: "ваш-url",
  dataType: "text json", // Работает сначала как текст, затем преобразуется в JSON
  // ...
});

Правильное преобразование JSON

Если вы работаете с ASP.NET, не забывайте использовать JavaScriptSerializer для корректного преобразования JSON. Этот совет также актуален и для других серверных языков — правильное преобразование — ваш надежный союзник.

Полезные материалы

1. jQuery.ajax() | Документация по jQuery API
2. HTTP коды состояния – HTTP | MDN
3. XMLHttpRequest: событие ошибки – Веб API | MDN
4. Политика одного источника – Безопасность | MDN
5. Promise – JavaScript | MDN
6. JSON.parse() – JavaScript | MDN
7. Cross-Origin Resource Sharing (CORS) – HTTP | MDN