Асинхронный JavaScript в jQuery (ajax)

Ни один современный интерактивный сайт не обходится без фоновых запросов. Эти запросы позволяют получить данные от сайта без перезагрузки страницы. Такие запросы называются Ajax (aсинхронный JavaScript). В библиотеке jQuery есть удобные методы для работы с такими запросами.

К ajax запросам надо относиться точно так же, как и к формам. То есть они могут передавать данные на определённую страницу сайта, используя два способа: POST и GET. Но только при их отправке и получении результата не происходит перезагрузки страницы. Весь полученный в запросе результат возвращается в переменную, которую можно использовать по своему усмотрению. В jQuery существует одноименный метод ajax. Поробуем придумать пример с формой, отправку которой можно запрограммировать через ajax:

<form id="mouse" action="/index.php" method="post">
   <input class="js_name" type="text" value="Мышь">
   <input class="js_food" type="submit" value="Сыр">
   <input type="submit" value="Отправить">
</form>
<script>
   $('#mouse').on('submit', function(event) {
      event.preventDefault();
      
      // считываем значения полей
         var name = $('.js_name').val();
         var food = $('.js_food').val();

      $.ajax({ // ajax запрос
         type: "POST", // метод отправки
         url: "/index.php", // адрес, на который отправляем
         data: { 'NAME': name, 'FOOD': food }, // передаваемые данные
         success: function(data){
            alert('Полученные данные:' + data);
         }
      });
   });
</script>

Разберём этот непростой пример по строчкам. Сначала идёт HTML код формы с двумя текстовыми полями и кнопкой для отправки. У текстовых полей есть класс с приставкой "js_". Обычно классы с такой приставкой создают только для того, чтобы упростить обращение к полям через скрипты и не используют их в CSS.

После HTML кода формы стоит скрипт. В нём происходит обработка события отправки (submit) формы с id="mouse". Первой строчкой стоит остановка выполнения стандартного скрипта "preventDefault". То есть при отправки формы страница не будет перезагружена - стандартные действия для отправки формы не будут выполнены. После этого стоит код считывания значений полей с классами "js_name" и "js_food" в переменные "name" и "food". Эти переменные далее будут переданы методу ajax, который произведёт их отправку.

В конце скрипта стоит вызов метода ajax, который отвечает за отправку данных фоновым запросом. У этого метода есть очень много различных параметров, через которые можно определить поведение метода в любых сценариях использования. Но в этой статье мы разберём простейшее использование ajax, поэтому были использованы только параметры:

• type - метод отправки запроса (POST или GET)
• url - адрес страницы сайта (относительный или абсолютный), на который отправляем ajax запрос
• data - набор данных (объект), который передаём на страницу по адресу, указанному в параметре "url"
• success - функция, которую надо выполнить в случае успешного получения данных от запроса. Как видно из примера, внутри функции доступна переменная data, в которую записаны все полученные запросом данные.

Как можно понять из примера, не было никакого смысла определять атрибуты "action" и "method" для формы. Ведь вся отправка происходит через ajax запрос, который только передаёт значение полей формы из примера, но атрибуты формы никак не считывает.

Страница сайта, которая будет обрабатывать полученные в ajax запросе данные может возвращать ответ в любом формате. Слово "возвращать" означает выводить точно так же, как если бы страница была запрошена через прямой запрос к странице через браузер. К примеру, может возвращаться HTML код. Либо может возвращаться закодированная в JSON строку информация, которая будет расшифрована в параметре success метода ajax. Всё зависит от того, какую логику выберет создающий сайт программист.