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
|
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
