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

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

К ajax запросам надо относиться точно так же, как и к формам. То есть они могут передавать данные на определённую страницу сайта, используя два способа: POST и GET. Но только при их отправке и получении результата не происходит перезагрузки страницы. Весь полученный в запросе результат возвращается в переменную, которую можно использовать по своему усмотрению.
Напомним, что при GET запросах передаваемые значения и ключи находятся в адресной строке. А при отправке POST запроса эти данные находятся внутри запроса (в адресной строке их нет).
В 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. Всё зависит от того, какую логику выберет создающий сайт программист.
Ajax запросы нужны не только для отправки данных формы. Но к примеру, для загрузки новостей на сайт при нажатии на кнопку "показать предыдущие новости". Да и вообще для создания практически любого интерактивного взаимодействия с сервером сайта без перезагрузки страницы.
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: