Серия статей "Ajax на практике"
Данную статью начал по просьбам новичков, которые только начинают осваивать JS/jQuery и, рано или поздно, сталкиваются с проблемой, как же на практике использовать технологию Ajax. В этой части, я попробую простым языком (пусть не смущает это пользователей продвинутых) объяснить, как применить данную "фишку" с использованием библиотеки jQuery в своих проектах.
Итак... В jQuery есть несколько методов, которые осуществляют запросы к серверной части сайта без перезагрузки страницы. Мы не будем рассматривать каждый метод отдельно "под микроскопом", по той простой причине, что все они являются урезанными/сокращенными функция метода $.ajax(). Для начала, давайте помотрим на код ниже, а дальше разберем его подробней:
HTML (файл index.html)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cool page site</title>
<script src="/js/jquery.js"></script><!-- Библиотека jQuery -->
<script src="/js/script.js"></script><!-- Наш JS-код -->
</head>
<body>
<button id="btn">Кликни меня!</button><!-- Кнопка для старта AJAX-запроса -->
<div id="output"></div><!-- Блок для вывода результатов -->
</body>
</html>В этом файле у нас подключена библиотека jQuery, файл с нашим JS-кодом, кнопка (id="btn"), по нажатию на которую будет запускаться ajax-запрос и блок (id="output"), в который мы будем выводить результат работы ajax-запроса
JS/jQuery (файл script.js)
$(function(){
var output = $('#output'); // блок вывода информации
$('#btn').on('click', function(){
$.ajax({
url: 'path/to/handler.php', // путь к php-обработчику
type: 'POST', // метод передачи данных
dataType: 'json', // тип ожидаемых данных в ответе
data: {key: 1}, // данные, которые передаем на сервер
beforeSend: function(){ // Функция вызывается перед отправкой запроса
output.text('Запрос отправлен. Ждите ответа.');
},
error: function(req, text, error){ // отслеживание ошибок во время выполнения ajax-запроса
output.text('Хьюстон, У нас проблемы! ' + text + ' | ' + error);
},
complete: function(){ // функция вызывается по окончании запроса
output.append('<p>Запрос полностью завершен!</p>');
},
success: function(json){ // функция, которая будет вызвана в случае удачного завершения запроса к серверу
// json - переменная, содержащая данные ответа от сервера. Обзывайте её как угодно ;)
output.html(json); // выводим на страницу данные, полученные с сервера
}
});
});
});Этот код я сразу прокомментировал, поэтому каких-то особых вопросов возникнуть не должно. Единственное, что хочу отметить для любителей копипаста, то что нужно указывать реальный путь к обработчику в параметре url. И еще один момент - в примере мы передаем данные прописанные вручную (ключ "key" со значением "1"), но в реальных проектах, эти данные подхватываются из каких-либо источников, но об этом поговорим дальше.
PHP-обработчик (файл handler.php)
<?php
if(isset($_POST['key'])){
$req = false; // изначально переменная для "ответа" - false
$key = (int)$_POST['key']; // мини-защита - приводим к типу INT
if($key > 0) $req = '<p>Получили значение равное: <strong>' . $key . '</strong></p>'; // присваиваем переменной нужные данные
echo json_encode($req); // возвращаем данные ответом, преобразовав в JSON-строку
exit; // останавливаем дальнейшее выполнение скрипта
}И наконец, PHP-обработчик, в котором обрабатываются данные запроса и формируется ответ, который возвращается обратно на растерзание нашему JS-коду. Тут все предельно просто. Почему мы преобразовываем данные в JSON-строку - потому, что мы указали в параметре dataType, что именно такие данные нужно ожидать в ответе. А почему именно такие - потому, что это наиболее удобный формат для дальнейшей работы: можно передавать как строку, так и массив данных или же сразу подготовленный HTML-код для вставки на страницу.
Что же будет происходить на каждом этапе:
- По нажатию на кнопку, начинает работать JS-код
- Перед отправкой, сработает функция в beforeSend. Она выведет в блок "output" сообщение о начале запроса
- Если что-то пойдет не так (например, путь к обработчику указан не верно), то сработает функция error и в блок выведется ошибка
- Если всё нормально, то запустится функция success и в блоке появится результат нашего запроса
- На последнем этапе - выполнится функция complete, которая добавит в блок вывода сообщения об окончании AJAX-запроса
*beforeSend и complete можно использовать, например, для вывода какой-нибудь картинки-прелоадера, чтоб давать пользователю понять о том, что процесс идет. И это далеко не все полезные опции метода $.ajax(), но тот необходимый минимум, который позволит правильно и грамотно функционировать методу.
И еще один полезный метод jQuery, который достоин внимания в рамках этой тема - $.ajaxSetup(). Если в вашем проекте будет множество Ajax-запросов, то этот метод, поможет избежать постоянного перечисления одинаковых установок метода $.ajax(). К примеру, если у вас один файл-обработчик, используете один и тот же метод передачи данных, принимаете данные в одинаковом формате и т.д., то это прописывается один раз в методе $.ajaxSetup() и в дальнейшем все эти установки, будут автоматически применены ко всем запросам.
// Описываем общие установки для всех ajax-запросов
$.ajaxSetup({
url: 'path/to/handler.php', // путь к php-обработчику
type: 'POST', // метод передачи данных
dataType: 'json', // тип ожидаемых данных в ответе
beforeSend: function(){ // Функция вызывается перед отправкой запроса
output.text('Запрос отправлен. Ждите ответа.');
},
error: function(req, text, error){ // отслеживание ошибок во время выполнения ajax-запроса
output.text('Хьюстон, У нас проблемы! ' + text + ' | ' + error);
},
complete: function(){ // функция вызывается по окончании запроса
output.append('<p>Запрос полностью завершен!</p>');
}
});
$(function(){
var output = $('#output');
$('#btn').on('click', function(){
// Теперь, вся запись любого запроса, будет сводится
// к параметрам data и success: данные, которые передаём
// и обработка ответа от сервера
$.ajax({
data: {key: 1}, // данные, которые передаем на сервер
success: function(json){ // функция, которая будет вызвана в случае удачного завершения запроса к серверу
output.html(json);
}
});
});
});
В следующей части, рассмотрим получение и передачу данных средаствами AJAX из форм и других источников, а так же поделюсь маленькими полезностями, которые Вам пригодятся в работе над своими проектами.
