Как сделать и использовать Ajax запрос?

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

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

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

Но в целом меньше слов и больше дела! 

Что такое Ajax

Ajax это аббревиатура от Asynchronous Javascript and XML, то есть асинхронный js и xml. Если рассматривать тот факт как это работает, то выходит что мы загружаем определенную страницу асинхронно на том-же сервере, после чего полученный ответ уже вытягиваем с js и делаем с ним то, что нам нужно.

Пользователю видно лишь то, как оно красивенько обновляется. Очень часто Ajax запросом я решал очень сложные проблемы, к примеру, когда мы на одной и той-же странице пытались вывести 10 огромных графиков.

из-за того, что графики содержали большие полотна информации, сама страница грузилась очень долго перед тем как просто вывести эти таблицы. Иногда нужно было ждать 1-2 минуты.

Когда я использовал Ajax, скорость загрузки увеличилась, так как каждый график загружался отдельно, более того, страница загружалась сразу, а на месте еще перегруженного графика я ставил бар загрузки который попросту эмулировал готовность загруженной информации.

Вот как я вижу саму работу с Ajax, надеюсь все достаточно просто.

Мы видим клиента и сервер, и видим два отдельных соединения, первое это первоначальная загрузка страницы. 

На ней мы можем вызвать событие либо после загрузки страницы либо после нажатия на кнопку к примеру, которая делает еще один запрос к серверу с целью получить данные.

Дальше мы получаем какую-то строку, которую можем либо вставить в нужную область, либо обработать как-то если это json или xml ответ.

В общем давайте сделаем проще я покажу и объясню на практике.

Как AJAX работает с использованием Vanilla JavaScript

Первым делом давайте разберемся то как можно использовать ajax на обычном javascript.

Кода там конечно-же больше получается, но все логично и просто. Наверное выставлю в виде двух файлов и внутри кода будут комментарии, так-же работающий пример, который пожалуй придется выставить на локальный сервер или просто сервер для того чтобы оно все работало. А ниже можно будет эти файлы скачать.

<html>

    <head>
        <script>
            function ajaxData() {
                    let data = {
                        name: document.querySelector('input[name="name"]').value,
                        phone: document.querySelector('input[name="phone"]').value,
                        date: document.querySelector('input[name="date"]').value
                    }; // данные, которые мы хотим передать для обработки

                    let xhttp = new XMLHttpRequest(); // Создаем конструктор без параметров, создаем XMLHttpRequest
                   
                    xhttp.open("POST", "/JS/ajax.php", true); // Конфигурируем запрос, передав method, url и параметры для авторизации если требуется
                    
                    xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // Content type для передачи данных
                    
                    xhttp.send(new URLSearchParams(data).toString()); // отправляем данные предварительно переобразовав их в query string
                    
                    xhttp.onreadystatechange = function() {//Вызывает функцию при смене состояния.
                        if(xhttp.readyState == XMLHttpRequest.DONE && xhttp.status == 200) { // проверяем все ли успешно, и если так выполняем код
                            console.log(this.responseText); // вывод ответа в консоль
                        }
                    }
                }
        </script>
    </head>

    <body>
        <form action="">
            <p><input type="text" name="name" placeholder="name" value="Serj"></p>
            <p><input type="text" name="phone" placeholder="phone" value="911"></p>
            <p><input type="text" name="date" placeholder="date" value="03.05.1994"></p>
            <p><input type="button" value="SEND" onclick="ajaxData();"></p>
        </form>
    </body>

</html>

По факту все логично и просто:

  1. Формируем данные которые хотим отправить за это у нас отвечает переменная data
  2. Создаем конструктор в котором будем передавать параметры и отправлять запрос
  3. Конфигурируем запрос
  4. Устанавливаем тип контента с которым будем передавать данные
  5. отправляем данные (внутри я переобразовал их в строку вида “data1=val&data2=val2”)
  6. Полученные данные обрабатываем

Следующий файл это будет тот файл на который мы указывали url “/JS/ajax.php”.

<?php
	var_dump($_POST);
	echo "111";
?>

Тут мы просто принимаем данные, обробатываем их и передаем уже обратно. По факту данные можно передать по разному, к примеру это может быть:

  1. html
  2. json
  3. xml

А после эти данные уже принимаем и в удобном виде делаем с ними то, что нужно.

Как работает AJAX с использованием библиотеки jQuery

Понятное дело если мы работаем с jQuery, то лучше всего уже создавать запросы ajax на jQuery, во-первых с ними проще работать, так как конструкция максимально упрощена.

Во вторых кода меньше, ну а в целом логика остается почти такой-же. Я попытался максимально привести такой-же пример как и предыдущий только уже на jQuery, получилось следующее. Пример проекта для скачивания ниже. 

Так-же скажу что php файл точно такой как и в предыдущем примере, потому нужно будет лишь выбрать удобный способ.

<html>

    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
        <script>
            function ajaxData() {
        			
					$.ajax({ // объявляем о работе с ajax
						type:"POST", // задаем метод
						url:"/JQUERY/ajax.php", // на какой url будем отдавать запрос
						data:{ // данные которые будем передавать
							name:$("input[name='name']").val(),
							phone:$("input[name='phone']").val(),
							date:$("input[name='date']").val()
						},
						success:function(e){ // успешный ответ и дальнейшая его обработка
							console.log(e);
						},
						error:function(){ // если что-то пошло не так, узнаем об этом
							console.log("error")
						}
					});
        		}
        </script>
    </head>

    <body>
        <form action="">
            <p><input type="text" name="name" placeholder="name" value="Serj"></p>
            <p><input type="text" name="phone" placeholder="phone" value="911"></p>
            <p><input type="text" name="date" placeholder="date" value="03.05.1994"></p>
            <p><input type="button" value="SEND" onclick="ajaxData();"></p>
        </form>
    </body>

</html>

Все примеры полностью рабочие, потому если есть какие-то вопросы или непонимание о том, что делать с этим, ниже в комментариях можно мне написать, я обязательно отвечу.

Метки: , , ,

Оставьте комментарий