Home Jsp How To Page Refresh Using JavaScript In JSP
Questions:Ask|Latest


 
 

Share on Google+Share on Google+

How To Page Refresh Using JavaScript In JSP

Advertisement
In this section, you will learn how to refresh jsp page using javaScript.

How To Page Refresh Using JavaScript In JSP

     

In this section, we develop an User Login application . We created five file sign.jsp,signout.jsp,user_register.jsp,userlogin.jsp and useradd.jsp. 

Brief description of the flow of the application: 

  • User opens sign.jsp in the browser and clicks on "Sign In" button.
  • New opens where user can provide username and password.
  • If user enters correct username and password  user. If the login is successful, parent window is refreshed and user details is displayed.
  • User can also signup for new account.

 

Step 1: Create a web page(sign.jsp) to show a button to Login user.


<%@ page import="java.sql.*" %> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> New Document </TITLE>
  <META NAME="Generator" CONTENT="EditPlus">
  <META NAME="Author" CONTENT="">
  <META NAME="Keywords" CONTENT="">
  <META NAME="Description" CONTENT="">
  <script>
  function signout()
  {
	  
	   window.location.href="signout.jsp";
  }
  </script>
 </HEAD>

 <BODY>
 <br><br><br><br><br>
 <table width="250px" align="center" bgcolor="#CDFFFF" border=0 style="border:1px solid;">
<%
if(session.getAttribute("username")!=null && session.getAttribute("password")!=null)
{
 String username="";
  String pass="";
Connection conn = null;
    String url = "jdbc:mysql://localhost:3306/";
    String dbName = "user_register";
    String driver = "com.mysql.jdbc.Driver";
    String userName = "root"; 
    String password = "root";
    String data = "";
    int sumcount=0; 
	Statement st;
	
    try {
      Class.forName(driver).newInstance();
	
      conn = DriverManager.getConnection(url+dbName,userName,password);
	    
	   username = session.getAttribute("username").toString();
	  
	   pass = session.getAttribute("password").toString();

	    String query = 
           "select * from userregister where  username='"+username+"' and password='"+pass+"'";

	
       st = conn.createStatement();
	   ResultSet  rs = st.executeQuery(query);
	   if(rs.next())
		{
		   %>
	      <tr><td colspan=3 align="center"><b>User Details</b></td></tr>
	     <tr><td><b>User Name </b></td><td><b>:</b></td><td><%=rs.getString(2)%></td></tr>
	     <tr><td><b>First Name </b></td><td><b>:</b></td><td><%=rs.getString(4)%></td></tr>
	     <tr><td><b>Last Name </b></td><td><b>:</b></td><td><%=rs.getString(5)%></td></tr>
	     <tr><td><b>City </b></td><td><b>:</b></td><td><%=rs.getString(6)%></td></tr>
	      <tr><td><b>State </b></td><td><b>:</b></td><td><%=rs.getString(7)%></td></tr>
              <tr><td><b>Country</b></td><td><b>:</b></td><td><%=rs.getString(8)%></td></tr>
			  <%
		}

       
		out.println(data);
		
	}
	catch (Exception e) {
      e.printStackTrace();
    }
	


%>

<tr>
  <td align="center" colspan=3>
<input type="button" name="signout" value="Sign Out" onclick="signout();">
</td>
</tr>
	
<%
}
else
{
%>
<tr><td colspan=2>&nbsp;</td></tr>
<tr><td colspan=2 align="center"><b>To Login  User Click on  Sign In</b></td></tr>
<tr><td colspan=2>&nbsp;</td></tr>
<tr>
<td colspan="2" align="center">
<input type="button" name="signin" value="Sign In" 
onClick="window.open('userlogin.jsp','mywindow','width=500,
height=350,toolbar=no,resizable=yes,menubar=yes')">
</td></tr>
<tr><td colspan=2>&nbsp;</td></tr>
<%
}
%>

 </table> 
 </BODY>
</HTML>

 

Step:2Create a web page (userlogin.jsp)  to User Login.

<html>

      <head>

      <style>

      a{

      font: bold 13px Verdana;

      padding: 2px;

      padding-left: 4px;

      display: block;

      width: 100px;

      color: black;

      text-decoration: underline;

      }

      a:hover{

      

    color: black;

	text-decoration: none;

      } 

      </style>

      

      

      <script>

      function validate()

      {

	 if(document.frm.username.value=="")

	{

		 alert("Please enter username");

		 document.frm.username.focus();

		 return false;

	}

	 if(document.frm.password.value=="")

	{

		 alert("Please enter username");

		 document.frm.password.focus();

		 return false;

	}

	return true;

      }

      function trim(stringToTrim) {

	return stringToTrim.replace(/^\s+|\s+$/g,"");

      }

      function login()

      { 

	if(validate())

	{

      

	xmlHttp=GetXmlHttpObject()

	if (xmlHttp==null)

	{

	alert ("Browser does not support HTTP Request")

	return

	}

      

	var username =document.getElementById("username").value;

	var password =document.getElementById("password").value;

      

      

      

	var url="userloginmid.jsp"

	url=url+"?username="+username+"&password="+password;

	//alert(url);

      

	xmlHttp.onreadystatechange=stateChanged 

	xmlHttp.open("GET",url,true)

	xmlHttp.send(null)

	}

      

      }

      

      function stateChanged() 

      { 

      

      if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete")

 { 

      

  var showdata = xmlHttp.responseText; 

  var str  = showdata.toString();
   if(trim(str)=="successLogin")

	 {

		window.opener.location.reload();

		window.location.reload(); 

		window.close();

	 }

	 else

	 {

		 	window.location.href="userlogin.jsp?errmsg=error";

	 }

      

 } 

      }

      

      function GetXmlHttpObject()

      {

      var xmlHttp=null;

      try

 {

 // Firefox, Opera 8.0+, Safari

 xmlHttp=new XMLHttpRequest();

 }

      catch (e)

 {

 //Internet Explorer

 try

  {

  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

  }

 catch (e)

  {

  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

  }

 }

      return xmlHttp;

      }

      

      </script>

      

      </head>

      <body>

      <br><br>

      <%

      

      String errmsg="";

      if(request.getParameter("errmsg")!=null && request.getParameter("errmsg")!="")

      {

   errmsg ="Invalid username and password";

      }

      %>

      

      <form name="frm">

      <table border="0" width="400px" align="center" bgcolor="#CDFFFF">

      <tr><td colspan=2 align="center" style="color:red;"><%=errmsg%></td></tr>

      <tr><td colspan=2 align="center">&nbsp;</td></tr>

      <tr><td colspan=2 align="center"><b>User Login</b></td></tr>

      <tr><td>Username : </td><td><input type="text" name="username" id="username"></td></tr>

      <tr><td>Password : </td><td><input type="password" name="password" id="password"></td></tr>

      

      <tr><td colspan=2 align="center"><input type="button" name="submit" value="Submit" onclick="login();"></td></tr>

      <tr><td colspan=2 align="center"><a href="user_register.jsp">New User</a></td></tr>

      </form>

      </body>

      </html>

      
    

 


Step 3:Create a web page (userloginmid.jsp) to retieve the details of selected user. 
 

<%@ page import="java.sql.*" %> 

    <%

    String username = request.getParameter("username").toString();

    String pass = request.getParameter("password").toString();

    

    Connection conn = null;

    String url = "jdbc:mysql://localhost:3306/";

    String dbName = "user_register";

    String driver = "com.mysql.jdbc.Driver";

    String userName = "root"; 

    String password = "root";

    String data = "";

    int sumcount=0; 

	Statement st;

    try {

      Class.forName(driver).newInstance();
      conn = DriverManager.getConnection(url+dbName,userName,password);

	    String query = "select count(*) from userregister where  username='"+username+"' and password='"+pass+"'";
         st = conn.createStatement();

	   ResultSet  rs = st.executeQuery(query);

	   if(rs.next())

		{

		     System.out.println(query);

		   if(rs.getInt(1)>0)

			{

			   session.setAttribute("username",username);

			    session.setAttribute("password",pass);

		    data = "successLogin";

			}

		}

		out.println(data);

	}

	catch (Exception e) {

      e.printStackTrace();

    }

 %>

Step 4:Create a web page (useradd.jsp) to add new user. 


    <%@ page import="java.sql.*" %> 
<%
String username = request.getParameter("username").toString();
String pass = request.getParameter("password").toString();
String first_name = request.getParameter("first_name").toString();
String last_name = request.getParameter("last_name").toString();
String city = request.getParameter("city").toString();
String state = request.getParameter("state").toString();
String country = request.getParameter("country").toString();
String data="";



Connection conn = null;
String url = "jdbc:mysql://localhost:3306/";
String dbName = "user_register";
String driver = "com.mysql.jdbc.Driver";
String userName = "root"; 
String password = "root";

int sumcount=0; 
Statement st;
try {
Class.forName(driver).newInstance();

conn = DriverManager.getConnection(url+dbName,userName,password);
String query = "insert into userregister set username='"+username+"',password='"+pass+"',first_name='"+first_name+
"',last_name='"+last_name+"',city='"+city+"',state='"+state+"',country='"+country+"'";
System.out.println("query : " + query);
st = conn.createStatement();
int i = st.executeUpdate(query);
if(i>0)
{
data ="successAdd";
}


out.println(data.trim());
}
catch (Exception e) {
e.printStackTrace();
}
%>


Successful Output of the program:

Click on Sign In to Login User:






Output when Successfully Submit the User Login refresh the parent window and show the user details.

 

For New User. 


Download the full web application shows here.

Download the application

Advertisement

If you enjoyed this post then why not add us on Google+? Add us to your Circles



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: July 26, 2008

Ask Questions?    Discuss: How To Page Refresh Using JavaScript In JSP   View All Comments

Post your Comment


Your Name (*) :
Your Email :
Subject (*):
Your Comment (*):
  Reload Image
 
 
Comments
Richard
April 24, 2012
Thesis

Thank you very much this great JSP tutorial I learn a lot... I also study php with wordpress and php with joomla.. but i really like using jsp servlet this a great adventure
sandeep
May 4, 2012
session expired

if user logout from homepage and homepage link is logout.jsp I want to if user press back button of browser then display a message please login and his session has been also expired ............ thanks
DMCA.com