JQuery, Ajax и общение с пользователями

Интерактивность с пользователями — одна из самых важных задач web-программиста.
В данном посте я хотел бы остановится на блоке «авторизация», но данный «метод» можно применить для множества различных задач.
Идея заключается в том, что бы при каждом нажатии клавиши проверять логин (введенный пользователем) с логинами хранящимися в БД. В том случае, если введенный логин соответствует логину хранимому в БД, подсвечивать input зеленным цветом, в противном случае — красным.

Как это выглядит:




Поиграться можно здесь — nikitascr.ks8.ru/for_habr/authorization

Итак, взглянем на код:

1) Сss

input {
outline:none;
transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
}
input:focus {
border: #40c0ff;
box-shadow: 0 0 10px rgba(81, 203, 238, 1);
-webkit-box-shadow: 0 0 10px rgba(81, 203, 238, 1);
-moz-box-shadow: 0 0 10px rgba(81, 203, 238, 1);
}

Ничего особо сложного и интересного.

2) PHP скрипт, который все это обрабатывает

 <?php
if(isset($_POST['login'])){
//В БД все в нижнем регистре, поэтому перевожу 
$login = strtolower($_POST['login']);

	 //Файл с настройками коннекта к БД
	require_once('stores.php');
	if (!$database = mysqli_connect($db_host, $db_user, $db_password, $db_db)){
                  echo 'Ошибка соединения к БД!'; exit();}
         //Открываем соединение
	else{
     
	
		if(!$res = mysqli_query($database, "SELECT `login` FROM `users`")) { 
                        echo 'Ошибка запроса на выборку данных!'; exit(); }
		else {
			while($all_login = mysqli_fetch_assoc($res))
				if($all_login[login] == $login)
                                        //Если в БД есть такой логин, то переменная login_true = 1;
					$login_true = 1;
							
			if($login_true == 1) echo 'ok';
			else echo 'error';
		
		}
	}
}
?>
 

Данный скрипт сравнивает то, что ввел пользователь с данными который хранятся в БД, и если пользователь ввел все верно возвращает «ok» Ajax скрипту, в противном случае возвращает «error».

И собственно Ajax скрипт (с помощью фреймворка JQuery)

<sсript type="text/javascript" src="jquery-1.6.2.min.js"> </sсript>
<sсript type="text/javascript">
//При каждом нажатии клавиши в input элементе
$('#a_login').keyup(function() { 
        //Берем данные с input Элемента
	login_user = $('#a_login').val();

	$.ajax({
		url	       : 'authorization.php', 
		type        : 'POST', //метод запроса
                //Передаем введенные пользователем данные в PHP скрипт
		data        : {login : login_user}, 
                //если PHP отработал верно
		success     : function(xhr, data, textStatus){
			   if(xhr == 'ok'){ //Если логин введен верно
				$('#a_login').css('box-shadow','0 0 10px rgba(0, 255, 0, 1)');
				$('#a_login').css('-webkit-box-shadow','0 0 10px rgba(0, 255, 0, 1)');
				$('#a_login').css('-moz-box-shadow','0 0 10px rgba(0, 255, 0, 1)');
			   }
						
			    else if(xhr == 'error') { //Если такого логина не существует
				$('#a_login').css('box-shadow','0 0 10px rgba(255, 0, 0, 1)');
				$('#a_login').css('-webkit-box-shadow','0 0 10px rgba(255, 0, 0, 1)');
				$('#a_login').css('-moz-box-shadow','0 0 10px rgba(255, 0, 0, 1)');
		           }
						
			    //При какой то ошибке
			    else alert('Ошибка авторизации!');
		}, 
                //В случае, если PHP скрипт отработал с ошибкой
		error		:	function(xhr, textStatus, errorObj){ 
						alert('Произошла критическая ошибка!');
		},
			
	});
			
}); 
<sсript>

И как я уже писал выше, тестовый полигон — nikitascr.ks8.ru/for_habr/authorization