Главная->Уроки по js->Проверка занятости логина на Ajax
Проверка занятости логина на 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 с Нуля до Гуру.