Html file For Ajax Login
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="ajex_login.js"></script>
<form name="login_form" method="post" action="javascript:login();" id="login_form">
<table width="70%" border="0" align="center" cellpadding="2" cellspacing="2">
<tr>
<td colspan="2" class="star" align="center"><div id="login_response" class="star"></div></td>
</tr>
<tr>
<td width="40%" align="right" class="label">User Name : </td>
<td width="60%"><input type="text" name="UserName" class="input" id="UserName"/>
</tr>
<tr>
<td align="right" class="label">Password : </td>
<td><input type="password" name="Password" class="input" id="Password"/>
<!--a href="#" class="hintanchor" onMouseover="showhint('Enter the desired password.', this, event, '200px')">[?]</a-->
<span id="password_warning" style="color:red" class="star"></span></td>
</tr>
<tr>
<td align="right"> </td>
<td>
<input type="submit" name="Submit" value="Login" class="submit" />
<input type="reset" name="Reset" value="Reset" class="submit"/></td>
</tr>
</table>
<!--/div-->
</form>
Javascript file for Ajax login ajex_login.js
// JavaScript Document
function createObject()
{
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer")
{
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
request_type = new XMLHttpRequest();
}
return request_type;
}
var http = createObject();
var nocache = 0;
function login()
{
// Optional: Show a waiting message in the layer with ID ajax_response
//document.getElementById('login_response').innerHTML = "Loading..."
// Required: verify that all fileds is not empty. Use encodeURI() to solve some issues about character encoding.
var UserName = encodeURI(document.getElementById('UserName').value);
var Password = encodeURI(document.getElementById('Password').value);
// Set te random number to add to URL request
nocache = Math.random();
// Pass the login variables like URL variable
http.open('get', 'login.php?UserName='+UserName+'&Password='+Password+'&nocache = '+nocache);
http.onreadystatechange = loginReply;
http.send(null);
}
function loginReply()
{
if(http.readyState == 4)
{
var response = http.responseText;
if(response == 0)
{
document.getElementById('login_response').innerHTML = 'Wrong UserName or Password! ';
}
else
{
window.location="homepage.php";
}
}
}
php file for ajax login login.php
<?php
$UserName = $_GET['UserName'];
$Password = $_GET['Password'];
$var_msg = $_GET['var_msg'];
if($UserName =="admin" && $Password="admin")
echo '1';
}
else
{
echo '0';
}
?>
No comments:
Post a Comment