Ajax Login Program

Ajax login  program request to server without refreshing the web page.  In this Session you will learn the how to display massage the login alert massage. This program call the method 'call_login()' for the alert display massage. The login program performed in the 'login.php' page at serverside. The 'call_login ()' send massage as url string by calling the 'PostRequest()' method . Here this  program finally call  the 'updatepage()' method the alert massage display on the html page. This program if  you give the invalid username and password  then display the massage invalid massage.  

 

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 support of the login.php page:

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

Try the example online