Home Ajax Ajaxlogin Ajax Login Example
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

Ajax Login Example

Advertisement
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.

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

Advertisement

Liked it!  Share this Tutorial


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: November 23, 2006

Ask Questions?    Discuss: Ajax Login Example   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
Milan Kyncl
September 18, 2011
Good

Good script!
Harihar
July 4, 2012
Not working Properly

Sir This Ajax Login Form Not Working Properly. Means Not Showing Login Sucess... Always Showing Invalid Login! Please try again! Plz Tell me Thanks
Krishna
July 24, 2012
Thank For Developer

Thank For Developer , superb i like your scripts.
ddc
July 30, 2012
;\

how i add accounts for login ?
DMCA.com