How do websites check the login credentials without reloading the page?

Question

Some websites, such as Yahoo and Google, use Ajax to check if the username/password is wrong. Obviously there must be server side authentication because anyone can change the local JavaScript and trick it into thinking username/password is correct. I'm wondering how this is done efficiently since wouldn't the server be checking the same username/password twice? Consider the following scenario where a user logs into a web site:

1. a user comes to the log in page
2. user enters username/password and clicks submit
3. through Ajax the server communicates with the client if the username/password entered are correct
4. Server replies saying whether the username/password is correct - in this example it is
5. The <form> is submitted and an intermittent page takes the inputted values through POST and processes them again on the server side to verify if the username/password is correct and if it is sets a variable in the session

In step 5 the server checks for the second time if the same username/password is correct as in step 3. Is there a way to cache the result from step 3 or make the process more efficient? Also the server has already been sent the username/password in step 3. but I'm not sure if that could accelerate the process.

I'm using a MySQL database to store user names and passwords.

Answer 1

At step 3 your onsubmit handler will send your AJAX request to the server to validate credentials and prevent the normal form submission (by calling .preventDefault() in the handler or returning false from the handler), so step 5 will never happen. If javascript is disabled then you won't have an onsubmit handler and the normal form submission will take place instead.

In your step 4, if you receive a "correct" response then your AJAX handler can redirect to a new page; if it's an "incorrect" response you'd stay on the login page, clear the form, and put up your error message.