Проверка занятости логина на Ajax
Уже достаточно давно стала очень популярна технология Ajax, позволяющая общаться с сервером без перезагрузки страницы. И одним из примеров её использования является динамическая проверка занятости логина на Ajax, о которой я и напишу в этой статье.
Сразу перейдём к выводу формы:
<form name="my_form" method="post" action="#">
<p>
Логин: <input type="text" name="login" onblur="checkLogin(this.value)" /><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" onblur="checkLogin(this.value)" /><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
?>
Надеюсь, Вы поняли механизм динамической проверки занятости логина на Ajax. Аналогично, проверяется и занятость e-mail, и других данных, которые можно проверить лишь на сервере. Как видите, JavaScript - очень полезный и важный язык, поэтому его необходимо знать любому профессиональному Web-разработчику, а поможет Вам изучить его курс: JavaScript, jQuery и Ajax с Нуля до Гуру.
-
Создано 31.01.2014 13:22:00
-
Михаил Русаков
Комментарии (3):
Насколько безопасно такое соединение с бд? Может ли злоумышленник посмотрев код страницы, каким либо образом взломать БД. Путь к файлу со скриптом он будет знать а вот послать POST запрос нужного содержания, не должно составить труда. Хотелось бы полностью перевести сайт на динамичное обновление (статей, инфы пользователя и т.д). Как вы смотрите на такой переход. Может ли большое обращение к БД загрузить сервер?
Ответить
Здравствуйте, Андрей. Взломать БД, просмотрев исходный код страницы, не реально. Путь к файлу со скриптом, тоже можно закрыть. Крупные запросы да, могут нагрузить сервер, но это тоже решается.
Ответить
А как можно реализовать в функции "checkLogin()" return true или return false?
Ответить
Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.