Ajax: Проверка логина при регистрации (Урок 5)

Этот урок посвящен созданию функции проверки занятости логина при регистрации пользователя. Создадим форму с текстовым полем для ввода логина и кнопкой. При нажатии кнопки будет осуществляться запрос на сервер для проверки уникальности введенного логина.

Создание формы и обработка запроса

Создадим HTML-форму с текстовым полем и кнопкой:

<input type="text" id="login" placeholder="Введите имя">
<button id="checkButton">Готово</button>

Обработчик события click для кнопки отправляет AJAX-запрос:

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('checkButton').addEventListener('click', checkLogin);
});

function checkLogin() {
  let login = document.getElementById('login').value;
  let xhr = new XMLHttpRequest();
  xhr.open('POST', 'check.php', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onload = function() {
    if (xhr.status === 200) {
      handleResponse(xhr.responseText);
    }
  };
  xhr.send('name=' + login);
}

Функция checkLogin отправляет значение поля login с параметром name на серверную страницу check.php. Ответ сервера обрабатывается функцией handleResponse.

Обработка ответа сервера и серверная часть

Функция handleResponse обрабатывает ответ сервера:

function handleResponse(data) {
    if (data === 'file') {
        alert('Имя занято');
    } else {
      // Выводим полученное имя или другое сообщение
    }
}

Если сервер возвращает file, логин занят. В противном случае, выводится полученное от сервера имя (или другое сообщение).

Серверный скрипт check.php (пример на PHP):

<?php
  if ($_POST['name'] === 'admin') {
    echo 'file';
  } else {
    echo $_POST['name'];
  }
?>

Этот скрипт проверяет, равен ли переданный логин «admin». Если да, возвращает ‘file’, иначе возвращает переданный логин.

Улучшение пользовательского опыта

Для улучшения пользовательского опыта можно добавить индикатор загрузки или обратную связь пользователю во время ожидания ответа сервера. Это можно реализовать с помощью дополнительных элементов HTML и JavaScript кода, отображающих сообщение «Пожалуйста, подождите…» во время отправки запроса и его обработки. Пример такой реализации выходит за рамки данного урока.

В этом уроке мы разработали функционал проверки занятости логина с помощью AJAX. Серверная часть обрабатывает запрос и возвращает результат, который затем отображается пользователю. Этот пример демонстрирует простой, но эффективный способ интеграции AJAX в веб-приложение для улучшения пользовательского опыта.