Что такое AJAX и с чем его кушать

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

AJAX (аббревиатура от «Asynchronous Javascript And Xml») – технология обращения к серверу без перезагрузки страницы. То есть с помощью этойт технологи мы можем видоизменть контент страницы не обновляя саму страницу. 

Самый простой пример: 

Человек заполнил форму на сайте, нажал "Отправить", в этот момент данные (имя, телефон) с помощью ajax отправляются на сервер, обрабатываются, например, отправляются на почту в виде заявки и сразу же возвращается ответ, что все хорошо и мы , используя JQuery, выдаем человеку информацию, что сообщение отправлено и все хорошо.

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

А часто ли вы пользуетесь интернет-магазинами? Бывает такое, что надоедает переходить по куче ссылок и ждать пока что они загрузятся? Так вот эту проблему можно решить! Мы просто внедряем ajax и тогда кликая на элемент каталога инетрнет-магазина, тут же, без задержек открывается информация по товару. Посмотрели, закрыли, продолжили серфить информацию по нужной нам тематике. Круто? Конечно круто!

Чтобы еще лучше понять, давайте разберем очень простой простой пример, как раз отправку форму через ajax. 

Я уже писал статью, где рассказывал как отправить письмо с помощью php. Там мы разбираем что такое get и post запросы, рассказываю про тег form и немного касаюсь php. Если вы еще не разбираетесь в этих определениях, то прежде чем продолжить, прочитайте этот урок: lesson-web.ru/blog/10

И так, смело создавайте страницу с таким содержимым:

<form method="post" action="post.php">
    <p>Укажите E-mail, на который необходимо отправить заявку</p>
    <input type="email" name="email_send" placeholder="E-mail">
    <p>
        Укажите ваши данные
    </p>
    <input type="text" name="name" placeholder="Имя">
    <input type="tel" name="phone" placeholder="Телефон">
    <input type="email" name="email" placeholder="E-mail">
    <button class='js-button'>ОТПРАВИТЬ</button>
</form>

Конечно же, еще описываем css-свойства, которые можно посмотреть в исходнике. Ссылка в конце урока. 

Далее, нам надо отработать клик по кнопке "отправить", собрать все данные из формы и отправить на наш файлик post.php

Для этого пишем вот такой js-код:

P.S. Прежде чем писать jscript, не забудьте подключить JQuery.

$(document).ready(function(){
    $('.js-button').click(function(){
        var title=$('.js-title').val();
        var name=$('.js-name').val();
        var phone=$('.js-phone').val();
        var email=$('.js-email').val();

        var email_send=$('.js-email-send').val();
        
        
        $.post(
            'post.php',
            {
                title:title,
                name:name,
                phone:phone,
                email:email,
                email_send:email_send,
            },function(data){
                $('.js-form').html('Заявка отправлена');
            }
        );
    });
});

Что тут происходит? Опишем по пунктам: 

1) Обрабабатываем клик по кнопке;

2) Собираем все данные обращаюсь ко все input и забирая их value;

3) Пишем ajax запрос. Из чего он состоит: 

• Пишем путь к файлу, в котором нужно сделать обращение и который сделает какое-то целевое действие
• Прописываем все переменные, которые необходимо передат на этот файл. ВНИМАНИЕ! Все переменные, которые мы указали, мы можем на конечно файле принять с помощью post!
• Пишем функцию, которая отработает по окончании действий на файле. В данном случае в форму подгружается сообщение "Заявка отправлена"

Вот так предельно просто работает AJAX. 

Пишите собственные запросы. Отписывайте в комментариях, понравился ли вам ajax и будете ли вы его внедрять в свои проекты.