Ajax and normal http get/post both need an SSL certificate and https:// to ensure security, because both are vulnerable and can be caught from thin air.
step 1: you will need ajax to verify the correctness of the username/password (using a server script). $.ajax is the jQuery function to use.
step 2: when you receive a response from the server that username/password are incorrect you can do one of the following:
- have a hidden absolutely positioned div in the middle of the page. Once you get a response, you can use:
$(divID).show(); //divID is the id of the div you want to show
$(divID).fadeTo(0,3000); //this will fade the div in 3 seconds
- OR you can create the div on the fly using :
$("<div id='invalid'>Invalid username/password</div>").appendTo($('body')); //this creates the div and attaches it to body
$('div#invalid').fadeTo(0,3000); //this fades the div in 3 seconds
That’s it.
In my personal opinion i would NOT recommend using ajax to send passwords unless you have an SSL certificate and https:// active on the page as anyone could just grab the password from thin air and use it