Уже более десяти лет разработчики веб-приложений используют ajax для того, чтобы внести динамику в html страницы. AJAX базируется на двух принципах: динамическом обращении к серверу в фоновом режиме и DHTML. Первый принцип говорит о том, что при необходимости интерактивного взаимодействия с пользователем, в котором необходимо участие сервера, в ответ на событие от пользователя, будет сформирован и отправлен запрос на сервер в фоне. Это позволит клиенту продолжить работу с приложением, вместо того, чтобы ждать пока придёт сервер получит запрос, обработает его и вернет ответ.  Когда клиент получит ответ от сервера, будет вызвана функция-обработчик, которая с помощью javascript произведёт необходимые манипуляции с DOM и изменит содержимое страницы согласно информации полученной с сервера. Так как серверу нет нужды отдавать всю страницу целиком, а то, как ответ будет обработан, ложится на того, кто будет писать клиентский код приложения, стало принято отдавать xml (X в аббревиатуре AJAX). На текущей момент мода на XML ушла и вместо него зачастую передают в теле запроса JSON. Но по факту никаких ограничений по формату на передачу нет. Всё что всможете обработать с помощью JS можно засунуть в тело ответа.

 Не могу не затронуть в своем предисловие и то, зачем вообще сдался этот AJAX и какой профит от него. Первый, очевидный плюс - снижение нагрузки на сеть и сервер. Засчёт чего это происходит? Всё просто, если есть необходимость после какого-то действия пользователя изменить, небольшой участок страницы, например после авторизации необходимо в шапке сайта заменить кнопку входа, на аватрку и имя пользователя, а также кнопку перехода в ЛК, то совершенно нет необходимости возвращать на сервер всё содержимое страницы, достаточно вернуть лишь имя пользователя и url его аватара. Второй плюс - появляется возможность разгрузить сервер и нагрузить мощности клиента простой обработкой, оставив за сервером лишь ресурсоемкие задачи и задачи уровня бизнес-логики. Клиент и сам может справиться с манипулированием DOM'а. Другой плюс, для многих менее очевидный, в том, что, когда обрабткой ответа сервера управляет не браузер, а клиентская часть приложения, появялется возможность обработки ошибок, связанных с потерей соединения. Доводилось ли вам видеть такую страницу? 

Да, много кто её видел. Но, что если я хочу, не имея возможности получить новую страницу из-за отсутствия интернета, посмотреть то, что у меня было загружено до этого? Можно нажать браузерную кнопку назад, но к сожалению это далеко не всегда работает. Почему это происходит? При переходе по ссылке мы передали управление браузеру. Запрос упал, и что ему делать в таком случае? 

А вот, если запрос послан через AJAX, то тут уж как душе разработчика угодно. Нет интернета? Ну ладно, можешь, например, продолжать слушать ту музыку, что уже загружена в кеше. Или же почитать ту статью, на которой только что был. Здесь всё зависит от того, кто и как конкретно сделает.

Какие минусы есть у AJAX? К ним перечисляют отсутсвие сохранений в браузерной истории ajax переходов, не индексируемость поисковиками, отсутсвие учеты статистики различными google/yandex аналитками. Всё это уже давно пройдено и не правда. Есть способы решения этих проблем. Например, ничто не мешает писать в history браузера через history API. Но, конечно же, всё это требует больших манипуляций и усложняет написание кода. Такова цена за получаемый в руки разработчики контроль над запросами.

Надеюсь те, кто не знал или плохо понимал AJAX разобрались. Но что там с SuperAgent? О нём же должна быть статья. SuperAgent позиционируется разработчиками как легковесная и расширяемая библиотека для работы с AJAX. 

Сразу несколько слов о том, что есть кроме неё. Есть XHR (XMLHttpRequest) - можно считать первым что появилось для работы с AJAX. Старый как наскальные рисунки. Имеет ряд недостатков, как функциональных, так и из ряда эстетики и удобства написания кода. Так, например, задача сделать цепочку зависящих друг от друга вызовов превращается в нечитаемый спагетти-код. Про передачу Multipart form-data лучше вообще не вспоминать.

Следующей на очереди является функция ajax из библиотеки jquery. Скажу лишь пару слов. Работать с ней приятнее, но во-первых это лишь кусочек достаточно жирной библиотеки.

Также на замену XHR был придуман fetch. У этой функции уже достаточно хорошая поддержка браузерами (если оно вам подходит, то никакой лишней библиотеки не нужно)  вот.  Ниже пример POST запроса, используя fetch.

fetch(url, {  
    method: 'post',  
    headers: {  
      "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"  
    },  
    body: 'a=b&c=d'  
  })
  .then(json)  
  .then(function (data) {  
    console.log('Request succeeded with JSON response', data);  
  })  
  .catch(function (error) {  
    console.log('Request failed', error);  
  });

В fetch появилась нормальная возможность передачи formdata, есть поддержка promise, API представлен ввиде функции, в отличии от xhr, который был достаточно сложным и страшным объектом. Можно сразу пачкой передать нужные заголовки в виде объекта. Всё хорошо.

Однако, почему статья не о нём, а о SuperAgent? Мне лично не понравилось то, что вся конфигурация запроса задаётся одним объектом. Когда же появятся условная обработка, то выше образуется множество кода, который собирает объект по кусочкам, для запроса. а потом уже в него впихнут всё что нужно и то, что внесёт вызов fetch скроется. Конвейерный подход SuperAgent мне нравится больше. Вот пример запроса на SuperAgent

 request
   .post('/api/pet')
   .send({ name: 'Manny', species: 'cat' })
   .set('X-API-Key', 'foobar')
   .set('Accept', 'application/json')
   .then(res =>{
       console.log('I got: ' + JSON.stringify(res.body));
   }).catch(error => {
       console.log("Something wrong", errror);
   });

SuperAgent умеет много полезных вещей: из коробки просто работать с CORS запросами, посылать form-data, есть возможность задать кол-во попыток отправки запроса, сделать редирект, можно переопределить функцию, которая решает какие запросы завершились с ошибкой. Также есть поддержка промисов и генераторов, плюс приятной плюшкой идёт возможность отслеживания прогресса загрузки больших файлов. Не самое важное, но стоит заметить, что у библиотеки очень хорошая поддержка. Работает она аж на 7ой версии IE.

На текущий момент, для меня SuperAgent является лучшей библиотекой для работы с ajax. Оставлю вам ссылочку на гитхаб, документацию и npm-пакет в репозиториии.

На этом я, пожалуй, откланяюсь.