Итак, мы на второй неделе школы кодирования. События развиваются довольно быстро, и в этой статье мы попытаемся описать то, что мы узнали об AJAX за последнюю неделю.

Когда мы хотим получить некоторую информацию от API, мы используем AJAX для обработки вызова и ответа. Мы начинаем с ввода $.ajax(), а затем передаем два параметра — URL-адрес нашего конкретного вызова API и объект, содержащий ссылки на функции-обработчики для успеха или ошибки. В целом это выглядит так:

$.ajax(API_CALL_URL, {
success: successHandler,
error: errorHandler,
});

Предполагая, что сам API в настоящее время работает правильно, вызов AJAX возвращает либо объект JSON, либо объект ошибки, которые передаются в соответствующие вызовы функций-обработчиков. С помощью обработчика ошибок мы можем получить код состояния из объекта ошибки с помощью error.status и отобразить его пользователю вместе с кратким поясняющим сообщением. С помощью обработчика успеха мы можем получить доступ к информации, содержащейся в полученном объекте JSON.

Введя вызов API прямо в адресную строку нашего браузера, мы можем просмотреть объект JSON через консоль. Просмотрев его, мы можем увидеть, с какими конкретными данными нам нужно работать (например, подобъекты, которые содержат данные, которые нам нужны), и получить доступ к этим данным в нашем обработчике успеха следующим образом:

function successHandler(data) {
  data.subObject.particularData
}

В примере, который мы создали в классе, полученный объект JSON содержал ссылки на изображения и описательные теги для каждого изображения. Следует отметить, что в каждом объекте была масса других данных, но нас интересовали только изображения и теги. Как только мы определили пары ключ: значение, которые привели нас к изображениям и тегам, мы могли делать с ними что-то в нашем коде javascript, который в нашем случае мы проанализировали их в шаблон HTML («карточка» из Bootstrap), который мы вставили в пустой набор <div id="image-container">tags в нашем HTML-коде с помощью вставки JQuery DOM:

$('#image-container').append(htmlTemplate);

На данный момент у нас все готово: мы смогли использовать AJAX для выполнения вызова API и возврата объекта JSON.

Еще один интересный момент, который можно кратко отметить, заключается в том, что мы можем делать уникальные вызовы API, используя прослушиватель событий для ввода текста HTML. После того, как мы поместили входные данные в наш javascript, мы можем преобразовать входной текст в собственный URL-адрес, который мы создадим для передачи в наш вызов AJAX. Для нашего примера в классе создание нового пользовательского URL-адреса выглядело так:

И чтобы вернуть все обратно, мы делаем наш вызов AJAX с нашим настраиваемым полным URL:

$.ajax(completeURL, {
  success: successHandler,
  error: errorHandler,
});