Java Source Codes and Everything: Simple Ajax Example of UserName and Password Validations

Below set of codes are the examples of Ajax which takes the username and password from a XML file stored in the server directory.

Below example has a parent window, where an Edit Label is there. On click on Edit Label, it will go to a child window and will have provision to enter username and password. The username and password, entered, will be checked with those of parent window, which has been populated from a XML file using Ajax.

Before going into the code, let’s have some basics of Ajax:

AJAX is Asynchronous JavaScript and XML and based on JavaScript and HTTP requests. With AJAX, a JavaScript can communicate directly with the server, with the XMLHttpRequest object. With this object, a JavaScript can trade data with a web server, without reloading the page.

AJAX uses asynchronous data transfer (HTTP requests) between the browser and the web server, allowing web pages to request small bits of information from the server instead of whole pages.

Source Codes:

This example consists of five jsps and one Credentials.xml [in the server directory]

testAjax.jsp, time.jsp, EnterCredentials.jsp, UserName.jsp, Password.jsp

If the username and password matches with the one which are stored in the server, it will automatically check the checkbox in the parent window.

testAjax.jsp

<html> <body onload="ajaxFunction1(); ajaxFunctionUserName(); ajaxFunctionPassword();"> <script type="text/javascript"> function ajaxFunction1() { var xmlHttp1; try { // Firefox, Opera 8.0+, Safari xmlHttp1=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp1=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp1=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } xmlHttp1.onreadystatechange=function() { if(xmlHttp1.readyState==4) { document.myForm.time.value=xmlHttp1.responseText; } } xmlHttp1.open("GET","time.jsp",true); xmlHttp1.send(null); } </script> <script type="text/javascript"> function ajaxFunctionUserName() { var un; var xmlHttp2; try { // Firefox, Opera 8.0+, Safari xmlHttp2=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp2=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } xmlHttp2.onreadystatechange=function() { if(xmlHttp2.readyState==4) { document.myForm.username.value = xmlHttp2.responseText; } } xmlHttp2.open("GET","UserName.jsp",true); xmlHttp2.send(null); } </script> <script type="text/javascript"> function ajaxFunctionPassword() { var p; var xmlHttp2; try { // Firefox, Opera 8.0+, Safari xmlHttp2=new XMLHttpRequest(); } catch (e) { // Internet Explorer try { xmlHttp2=new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { xmlHttp2=new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { alert("Your browser does not support AJAX!"); return false; } } } xmlHttp2.onreadystatechange=function() { if(xmlHttp2.readyState==4) { document.myForm.password.value = xmlHttp2.responseText; } } xmlHttp2.open("GET","Password.jsp",true); xmlHttp2.send(null); } </script> <script language="JavaScript1.2"> var tstbox; function openwindow() { window.open("EnterCredentials.jsp","mywindow","menubar=1,resizable=0,status=1,scrollbars=1,width=350,height=250"); } function getItDone(textBox){ document.myForm.flag.checked = true; } </script> <form name="myForm"> <input type="hidden" name="username" value=""> <input type="hidden" name="password" value=""> <input type="hidden" name="usernameFromChild"> <input type="hidden" name="passwordFromChild"> <table align="center" border="2" cellpadding="2" bgcolor="cyan"> <tr align="center"> <td align="center">Time: </td> <td align="center"> <input type="text" name="time" align="center"> </td> <td align="center"> <input type="checkbox" name="flag" value="FlagValue"> </td> </tr> <tr align="center"> <td onclick="openwindow();" value="Display a prompt box" align="center"> Edit </td> </tr> </table> </form> </body> </html>

time.jsp

EnterCredentials.jsp

<%@page contentType="text/html"%> <%@page pageEncoding="UTF-8"%> <html> <head> <meta equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Enter Credentials</title> </head> <script language="JavaScript" type="text/JavaScript"> function submitOnParent(){ window.opener.document.myForm.usernameFromChild.value = document.enterForm.usernameInChild.value; window.opener.document.myForm.passwordFromChild.value = document.enterForm.passwordInChild.value; if((window.opener.document.myForm.usernameFromChild.value==window.opener.document.myForm.username.value)&&(window.opener.document.myForm.passwordFromChild.value==window.opener.document.myForm.password.value)){ window.opener.getItDone(); close(); } else{ alert('UserName and Password are incorrect'); document.enterForm.usernameInChild.focus(); } } function closeIt(){ close(); } </script> <body onload="javascript:document.enterForm.usernameInChild.focus();"> <h1>Enter UserName and Password</h1> <form method="POST" name="enterForm" action="EnterCredentials.jsp" onsubmit="submitOnParent();"> <input type="hidden" value="true" name="check"> UserName: <input type="text" value="" name="usernameInChild" size="15"> Password: <input type="password" value="" name="passwordInChild" size="15"> <input type="submit" value="Submit" name="ok"> <input type="button" value="Exit" name="exit" onclick="closeIt()"> </form> </body> </html>

UserName.jsp

<%@ page contentType="text/html; charset=ISO-8859-1" language="java" import="java.util.Date"%> <% response.setContentType("text/plain"); response.setHeader("Cache-Control", "no-cache"); response.setHeader("pragma","no-cache"); String username = new String(""); String password = new String(""); try{ javax.xml.parsers.DocumentBuilderFactory factory = javax.xml.parsers.DocumentBuilderFactory.newInstance(); javax.xml.parsers.DocumentBuilder builder = factory.newDocumentBuilder(); org.w3c.dom.Document document = builder.parse("./Credentials.xml"); org.w3c.dom.NodeList nlUserName = document.getElementsByTagName("UserName"); org.w3c.dom.NodeList nlPassword = document.getElementsByTagName("Password"); username = nlUserName.item(0).getTextContent(); password = nlPassword.item(0).getTextContent(); }catch(javax.xml.parsers.ParserConfigurationException pace){ pace.printStackTrace(); }catch(Exception e){ e.printStackTrace(); } out.clear(); out.write(username); out.close(); %>

Password.jsp

Credentials.xml in the server directory