Содержание
Технология Ajax существенно изменила сайтостроение, продвинув его к текущему уровню. Она используется практически на всех ресурсах, начиная сайтами малоизвестных фирм и заканчивая крупными социальными сетями по типу Facebook, «ВКонтакте», Instagram и прочих проектов, находящихся на слуху у практически каждого пользователя Сети.
Обзор
Каждый день вы посылаете сотни, тысячи или даже больше HTTP-запросов. Например, когда в браузере открывается сайт, программа посылает GET, чтобы загрузить содержимое страницы или убедиться, что оно не изменилось от находящейся в кэше информации. Кроме того, загружаются все картинки, видео, CSS-правила, и системы трекинга по типу Яндекс.Метрики тоже регулярно отправляют GET и POST.
В случае с формами всё точно также. Обычно в них используются именно один из двух типов запросов: POST либо GET. Первый вариант обладает преимуществом перед вторым, проявляющимся в виде возможности передавать содержимое неограниченного размера, если лимит специально не установлен на клиентской или серверной стороне. Кроме того, он не даёт прочитать отправленное содержимое через адресную строку, что повышает безопасность (так злоумышленник не сможет найти данные с помощью истории браузера).
Если не пользоваться Ajax, то формы, написанные на HTML и обрабатываемые посредством PHP, будут работать, но пользоваться ими станет неудобно из-за перезагрузок страниц. И если она не особо мешает на редко используемых одним посетителем формах, то в случае с комментированием это вызовет проблемы – представьте себе, если бы каждый раз, когда вы пишете сообщение на «Ютубе», происходило бы обновление вкладки, что действовало бы даже на трансляциях. Именно это позволяет исправить Ajax: с ним запросы отправляются без этого неприятного момента.
Можно задействовать Ajax для скрытой отправки. Это делается, например, сервисами для сбора статистики. Достаточно лишь не приписывать видимое пользователю действие после любого, успешного либо же неудачного выполнения скрипта, и тогда информация об отправке запроса будет содержаться только в редко нужном среднестатистическому посетителю браузерном разделе «Для разработчиков».
Работа с Ajax
На стороне HTML
Понадобится обычная форма, созданная с помощью тега <form>и входящих в него <input>. Для каждого «инпута» следует установить имя через атрибут name, а поскольку в примерах ниже будет вестись поиск значения по идентификатору, нужно задать и его – с помощью id.
Вы также можете использовать class или кастомные параметры, задаваемые посредством data-[…], где вместо фигурных скобок и многоточия можно указать понравившееся наименование латиницей. Значения этих атрибутов не должны иметься у других элементов в документе.
Смените назначение кнопки – её type должен быть button, а не submit. Поскольку планируется использовать JS, можно представить кнопку практически любым элементом: не только ссылками <a> или кнопками <inputtype=»button»>,<button>, но и более экзотическими тегами (в этом контексте) по типу <b>, <em>, <mark>.
Разумеется, нельзя использовать <title>, <link>, <head>и подобные решения. Учтите, что этот момент может сильно испортить юзабилити веб-сайта, поэтому советуется задействовать более «традиционные» варианты. Тем более, что и кнопки можно кастомизировать – огромное количество бесплатных наборов CSS не даст соврать.
На стороне PHP
Формы, «заточенные» под Ajax, делать не надо: доступно пользование уже написанным обработчиком на стороне сервера. Единственное, что может показаться полезным: вырезание функций, посредством которых пользователь специально перенаправляется на другую страницу, либо же выводится ненужная информация.
Вы также можете сделать некую защиту от не-Ajax запросов, посылая их с дополнительным GET- либо POST-параметром, отсутствие которого может привести к недоступности страницы. Впрочем, этот момент можно будет легко обойти, если кому-то станет известна не только ссылка на страницу, но и нужный для её использования параметр.
То есть, стоит цель просто написать программу, способную принимать запросы GET или же POST (в зависимости от метода обращения к серверу).
На стороне JS
Здесь раскрывается самый интересный раздел статьи – Ajax требует написания программы на JS, которую можно скопировать из примеров на этой странице. Потребуется разместить JS-код как можно ниже (желательно, перед закрывающим тегом </body>), однако его простого нахождения не над формой тоже достаточно.
Включите асинхронную загрузку скрипта, если планируется использовать его в формах, требующих долгий ввод текста (например, предназначенных для обратной связи страницах). Это повысит скорость открытия страницы, однако не рекомендуется использовать данную особенность на страницах авторизации – в них поля могут заполниться автоматически браузером, поэтому есть риск возникновения попытки пользователя войти в аккаунт, когда нужный обработчик ещё не загрузился.
Можно использовать «чистый» JS для обеспечивания совместимости формы с Ajax, однако куда проще сделать это в третьей версии библиотеки jQuery, являющейся отличным вариантом для работы не только в этом плане, но и в парсинге. Впрочем, это является уже совершенно другой темой, не нуждающейся в длительном описании здесь. Подойдут и некоторые другие наборы функций для JavaScript, в которых предусмотрено упрощение работы с Ajax.
Написание формы с Ajax
Прежде всего, нужно создать саму форму, используя HTML. Определитесь с типом запросов, которые будут использоваться. Лучше всего задействовать POST, особенно если вы хотите передавать такую информацию, как логины и пароли, или размер данных может быть большим. Лимит для GET– 2048 символов, однако некоторые серверы поддерживают размеры и крупнее, что можно считать исключением.
Далее следует подключить PHP-обработчик. Если форма простая, можно вставить его в этот же документ, что не нарушит удобность чтения. В противном случае рекомендуется вынести скрипт в отдельный файл. Напишите PHP-скрипт под свои цели, а затем – перейдите к JavaScript, чтобы настроить непосредственно сам Ajax.
Подключите библиотеку jQuery, воспользовавшись ссылками на его официальном сайте. Можно задействовать как и CDN (ссылку на внешний ресурс), так и локальный файл, загрузив его на тот же веб-сервер, где находится сайт.
На этом моменте следует заострить внимание: в jQuery присутствует функция $.ajax, которая обладает короткими форматами $.post, $.get и некоторыми другими. Первая поддерживает больше вариантов действия в зависимости от разных случаев (факт отправки вовсе, отдельно: его успешность или проблемность; проверка ответа сервера), однако требуется далеко не во всех случаях.
Например, если предполагается пользование POST-запросами, и это отмечено не только в JS, но и в PHP, актуально задействовать или $.ajax, или $.post. Когда нужен GET, задействуется $.ajax либо $.get. Теперь стоит обратиться к примерам, приведённым ниже.
<script>
$.ajax({
url: ‘/handler.php’,
method: ‘post’,
dataType: ‘html’,
data: {element: ‘value’, abc: ‘test’},
success: function(data){
console.log(«Sent successfully: » + data);
}
});
</script>
Здесь следует указать:
- url – ссылку на обработчик. Если он находится в том же файле, что и форма, напишите адрес этой же страницы.
- method – метод. Например: post.
- dataType – тип данных в ожидающемся ответе от сервера. Скорее всего, это будет json или html, но есть и другие варианты по типу script.
- data – информацию, посылаемую серверу в виде массива. Может включать в себя под-массивы, в которые могут входить другие и так далее.
- success – действие, выполняемое после успешного выполнения задачи.
Успешность – не факт выполнения скрипта, но и ещё наличие подходящего ответа от сервера (например, 200 OK). Если нужно проверить, исполнен ли скрипт вообще, следует использовать complete, а отловить ошибку даст error.
Короткий вариант:
<script>
$.post(‘/handler.php’, {element: ‘value’, abc: ‘test’}, function(data){
console.log(«Sent successfully: » + data);
});
</script>
Пример готовой формы
<?
if(!empty($_POST[‘login’])) {
if(!empty($_POST[‘pass’])) {
$pass = strip_tags($_POST[‘pass’]);
if(strpos(«1234567″, $pass) !== false) {
$logged_in_success = true;
} else {
header($_SERVER[‘SERVER_PROTOCOL’].» 400 Bad Request»);
}
} else {
header($_SERVER[‘SERVER_PROTOCOL’].» 400 Bad Request»);
}
}
?><!DOCTYPE HTML>
<html lang=»ru»>
<head>
<meta charset=»utf-8″ />
<title>Пример формы</title>
<scriptsrc=»https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js»integrity=»sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==»crossorigin=»anonymous»referrerpolicy=»no-referrer»></script>
</head>
<body>
<form>
<input id=»input_name»name=»name»type=»text»placeholder=»Логин» />
<input id=»input_password»name=»password»type=»password»placeholder=»Пароль» />
<button type=»button»id=»input_send»>Отправить</button>
</form>
<script>
$(‘#input_send’).click(function() {
var username = $(«#input_name»).val();
var password = $(«#input_password»).val();
$.post(‘/index.php’, {login: username, pass: password}, function(data){
alert(«Вы успешно вошли на сайт!»);
});
});
</script>
</body>
</html>
