К 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, в которую записаны все полученные запросом данные.
Страница сайта, которая будет обрабатывать полученные в ajax запросе данные может возвращать ответ в любом формате. Слово "возвращать" означает выводить точно так же, как если бы страница была запрошена через прямой запрос к странице через браузер. К примеру, может возвращаться HTML код. Либо может возвращаться закодированная в JSON строку информация, которая будет расшифрована в параметре success метода ajax. Всё зависит от того, какую логику выберет создающий сайт программист.
Ajax запросы нужны не только для отправки данных формы. Но к примеру, для загрузки новостей на сайт при нажатии на кнопку "показать предыдущие новости". Да и вообще для создания практически любого интерактивного взаимодействия с сервером сайта без перезагрузки страницы.