Уже достаточно давно стала очень популярна технология Ajax , позволяющая общаться с сервером без перезагрузки страницы. И одним из примеров её использования является динамическая проверка занятости логина на Ajax , о которой я и напишу в этом материале.
Уже достаточно давно стала очень популярна технология Ajax, позволяющая общаться с сервером без перезагрузки страницы. И одним из примеров её использования является динамическая проверка занятости логина на Ajax, о которой я и напишу в этом материале.
Сразу перейдём к выводу формы:
<form name="my_form" method="post" action="#">
<p>
Логин: <input type="text" name="login" /><span id="check_login"></span>
</p>
<p>
<input type="submit" name="check" value="Отправить" />
</p>
</form>
При потере фокуса с поля, отвечающего за логин, сразу вызывается функция checkLogin(), куда так же передаётся сам логин. Теперь разберём код JavaScript:
<form name="my_form" method="post" action="#">
<p>
Логин: <input type="text" name="login" /><span id="check_login"></span>
</p>
<p>
<input type="submit" name="check" value="Отправить" />
</p>
</form>
<script type="text/javascript">
/* Функция, создающая экземпляр XMLHTTP */
function getXmlHttp() {
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
xmlhttp = new XMLHttpRequest();
}
return xmlhttp;
}
function checkLogin(login) {
var xmlhttp = getXmlHttp(); // Создаём объект XMLHTTP
xmlhttp.open('POST', 'check_login.php', true); // Открываем асинхронное соединение
xmlhttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // Отправляем тип содержимого
xmlhttp.send("login=" + encodeURIComponent(login)); // Отправляем POST-запрос
xmlhttp.onreadystatechange = function() { // Ждём ответа от сервера
if (xmlhttp.readyState == 4) { // Ответ пришёл
if(xmlhttp.status == 200) { // Сервер вернул код 200 (что хорошо)
if (xmlhttp.responseText) document.getElementById("check_login").innerHTML = "Логин занят!";
else document.getElementById("check_login").innerHTML = "Логин свободен!";
}
}
};
}
</script>
В функции checkLogin() мы отправляем запрос к файлу check_login.php с логином. Далее ждём ответа от этого PHP-файла и после получения анализируем его. Если возвращено true, значит, логин занят, что мы и выводим в соответствующий span-элемент. А если возвращено false, то выводим уже другую надпись в тот же элемент.
И, наконец, файл check_login.php:
<?php
$login = strtolower(htmlspecialchars($_POST["login"])); // Получаем логин, преобразуем ряд спецсимволов и приводим строку к нижнему регистру
$logins = array("admin", "user", "nik", "abc"); // Занятые логины
echo in_array($login, $logins); // Проверяем наличие переданного логина в массиве с уже занятыми
?>
Безусловно, этот код из этого файла далёк от реальной практики, но Вы его прямо сейчас можете скопировать и сразу применить. В реальности же пользователи обычно хранятся в базе данных, поэтому потребуется примерно такой код:
<?php
$login = strtolower(htmlspecialchars($_POST["login"])); // Получаем логин, преобразуем ряд спецсимволов и приводим строку к нижнему регистру
$mysqli = new mysqli("localhost", "root", "", "mydb"); // Подключаемся к базе данных
$query = "SELECT `id` FROM `users` WHERE `login`='".$mysqli->real_escape_string($login)."'"; // Формируем запрос на поиск пользователя с полученным логином
$result_set = $mysqli->query($query); // Отправляем запрос
echo $result_set->num_rows != 0; // Если ничего не найдено, то выводим false, иначе true
?>
