JQuery, Ajax and communication with users

User interactivity is one of the most important tasks of a web programmer.
In this post, I would like to stop at the “authorization” block, but this “method” can be applied to many different tasks.
The idea is to check the login (entered by the user) with the logins stored in the database with each key press. In that case, if the entered login corresponds to the login stored in the database, highlight the input in green, otherwise - in red.

What it looks like:



')
You can play here - nikitascr.ks8.ru/for_habr/authorization

So take a look at the code:

1) sss

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); } 

Nothing particularly complicated and interesting.

2) PHP script that handles all this

  <?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'; } } } ?> 

This script compares what the user entered with the data stored in the database, and if the user entered everything correctly returns "ok" Ajax to the script, otherwise returns "error".

And the actual Ajax script (using the jQuery framework)

 <sript type="text/javascript" src="jquery-1.6.2.min.js"> </sript> <sript 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('  !'); }, }); }); <sript> 

And as I wrote above, the test site - nikitascr.ks8.ru/for_habr/authorization