Ajax Login Program

In this program you will learn how to validate the user and show alert message if user name or password are not correct. These days almost all the e-comm applications requires authentication before accessing the secured part of the web site. In this program we will show how you can send ajax request to authenticate the user.

When a user input username and password and press Login button, 'call_login()' function is called. This method sends ajax request to server (login.php) to validate the user. We have hardcoded the authonication mechanism e.g. if you enter login name admin and password admin then the program will show you success message. Otherwise it will show login failed message. You can change the authentication logic in the page and easily authenticate use from database.

Example of Ajax login Program :

<html>
<head>
<script language="javascript">
function postRequest(strURL){
var xmlHttp;
if(window.XMLHttpRequest){ // For Mozilla, Safari, ...
var xmlHttp = new XMLHttpRequest();
}
else if(window.ActiveXObject){ // For Internet Explorer
var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlHttp.open('POST', strURL, true);
xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4){
updatepage(xmlHttp.responseText);
}
}
xmlHttp.send(strURL);
}

function updatepage(str){
if(str=="yes"){
alert("Welcome User");
}else{
alert("Invalid Login! Please try again!");
}
}

function call_login(){
var username = window.document.f1.username.value;
var password = window.document.f1.password.value;
var url = "login.php?username=" + username + "&password=" +password ;
postRequest(url);
}
</script>
</head>

<body>
<Center>

<form name="f1" onsubmit="return call_login();">
<table border="0" bgcolor="#CCCCFF" cellspacing="1" cellpadding="3" width="287">
<tr>
<td align="left" colspan="2" width="275"><b><font size="5" color="#000080">Login</font></b></td>
</tr>
<tr>
<td align="right" width="81"><b><font color="#000080">User
Name:</font></b></td>
<td width="184"><input type="text" name="username" id="user" size="20" value="" /></td>
</tr>
<tr>
<td align="right" width="81"><b><font color="#000080">Password:</font></b></td>
<td width="184"><input type="password" name="password" size="20" value="" /></td>
</tr>
<tr>
<td colspan="2" align="center" width="275"><input type="button" name="a1" value="Login" onclick="call_login()"></td>
</tr>
</table>
</form>

</center>
</body>
</html>

Here is the code for login.php page:

<?
$username=$_GET["username"];
$password=$_GET["password"];
if($username=="admin" && $password=="admin"){
echo "yes";
}else{
echo "No";
}
?>

Try the example online

Ajax Login Example

Ajax Login Example

Ajax Login Program

Tutorials