Ajax Login Validation for JSP

Here i have tried to build a small Ajax validation example, which will check the login validation using Ajax concept of jQuery.

In this example,

login page consist of the User id and password field. On submit, jQuery will send the control to the JSP page(check.jsp) using ajax.

<!--index.jsp-->
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<!-- ..//JQuery Source\\.. -->
<script type="text/javascript" src="JS/jquery-1.4.2.min.js"></script>
<!-- ..//JavaScript Code for this page\\.. -->
<script type="text/javascript">
$(document).ready(function(){
$("#login_frm").submit(function(){

//remove previous class and add new "myinfo" class
$("#msgbox").removeClass().addClass('myinfo').text('Validating Your Login ').fadeIn(1000);

this.timer = setTimeout(function () {
$.ajax({
url: 'check.jsp',
data: 'un='+ $('#login_id').val() +'&pw=' + $('#password').val(),
type: 'post',
success: function(msg){
if(msg != 'ERROR') // Message Sent, check and redirect
{                // and direct to the success page

$("#msgbox").html('Login Verified, Logging in.....').addClass('myinfo').fadeTo(900,1,
function()
{
//redirect to secure page
document.location='login.jsp?user='+msg;
});

}
else
{
$("#msgbox").fadeTo(200,0.1,function() //start fading the messagebox
{
//add message and change the class of the box and start fading
$(this).html('Sorry, Wrong Combination Of Username And Password.').removeClass().addClass('myerror').fadeTo(900,1);
});

}
}

});
}, 200);
return false;
});

});

</script>

<link href="css/style.css" rel="stylesheet" type="text/css" />
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login Form</title>
</head>
<body>

<form name="login_frm" id="login_frm" action="" method="post">
<div id="login_box">
<div id="login_header">
Login
</div>
<div id="form_val">
<div>User Id :</div>
<div><input type="text" name="login_id" id="login_id"/><span style="font-size: 10px;">hint : admin</span></div>

<div>Password:</div>
<div><input type="password" name="password" id="password"/><span style="font-size: 10px;">hint : test</span></div>
<div style="clear:both;height:0px;"></div>

<div id="msgbox"></div>
</div>
<div id="login_footer">
<label>
<input type="submit" name="login" id="login" value="Login" />
</label>
</div>
</div>
</form>

</body>
</html>

check.jsp will check the login and return an id if the login is valid or it will send ERROR.

<pre><!--check.jsp-->
</pre>
<%
String user=request.getParameter("un");
String pass=request.getParameter("pw");
int user_id=12;
if(user.equalsIgnoreCase("admin") &&
pass.equals("test") )
{
out.print(user_id);
}
else
{
out.print("ERROR");
}
%>

I am sending ID, because using JavaScript I am redirecting the page to the login page where the session for the login will be created. id will not be visible in the source, so that only valid user can redirected to login.jsp

<!--login.jsp-->

<%@page session="true"%>
<%
String user=request.getParameter("user");
session.setMaxInactiveInterval(24 * 60 * 60);
session.setAttribute("user",user);
response.sendRedirect("success.jsp");
%>

On success.jsp page one can sign out, where the session will get clear.

<!--success.jsp-->

<%@page session="true"%>
<%
if(session.getAttribute("user")==null)
{
response.sendRedirect("index.jsp");
}
%>
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login Success</title>
</head>
<body>
<center>
<h1>You are successfully logged in</h1>
<h3><a href="logout.jsp">Logout</a></h3>
</center>
</body>
</html>

<!--logout.jsp-->

<%@page import = "java.util.Date" session="true"%>
<%

session.setAttribute("user", null);
session.invalidate();
response.sendRedirect("index.jsp");
%>

Demo Of the projectis here

Download source files for project here

Some updates on facebox (lightbox)

While working with my project, I was browsing for a JQuery plugin for, dialog box. From the list of all plugin, I found facebox to be very much useful for my project. After altering some css and design I made it according to my requirement, which looks like this:

If you want same kind of dialogue box (lightbox), you may download the sample from here.

Auto refreshing the content without reloading page, using JQuery

In my previous post I have given some tips to select multiple rows from a database table. Now we can import that page into a div, so that we can refresh the content of div without reloading the page (or you can create your own JSP page which content may dynamically change). In result, if the database content get change the page will auto refresh to get reload the changes.
For that we have JQuery framework, which you can download from here. And adding the below function of database we can reload the target JSP file in a DIV in every given time interval.

<html>
	<head>
		<Title>Just A Test</Title>
		<script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
        var auto_refresh = setInterval(
        function ()
        {
        $('#load_me').load('showdata.jsp').fadeIn("slow");
        }, 10000); // autorefresh the content of the div after
                   //every 10000 milliseconds(10sec)
        </script>
   </head>
    <body>
    <div id="load_me"> <%@ include file="showdata.jsp" %></div>
    </body>
</html>