index.html
<!DOCTYPE html>
<html>
<head>
<script>
var request=new XMLHttpRequest();
function searchInfo(){
var name=document.vinform.name.value;
var url="index.jsp?val="+name;
try{
request.onreadystatechange=function(){
if(request.readyState==4){
var val=request.responseText;
document.getElementById('mylocation').innerHTML=val;
}
}//end of function
request.open("GET",url,true);
request.send();
}catch(e){alert("Unable to connect to server");}
}
</script>
</head>
<body>
<h1>Search Employee Using Ajax.</h1>
<form name="vinform">
<input type="text" name="name" onkeyup="searchInfo()">
</form>
<span id="mylocation"></span>
</body>
</html>
index.jsp
<%@ page import="java.sql.*" %>
<%
String name=request.getParameter("val");
if(name==null||name.trim().equals(""))
{
out.print("<p>Please enter name!</p>");
}
else
{
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/employee", "root", "sagan");
PreparedStatement ps=con.prepareStatement("select * from emp where empname like '"+name+"%'");
ResultSet rs=ps.executeQuery();
if(!rs.isBeforeFirst())
{
out.println("<p>No Record Found!</p>");
}
else
{
out.print("<table border='1' cellpadding='2' width='50%'>");
out.print("<tr><th>Id</th><th>Name</th><th>Address</th></tr>");
while(rs.next()){
out.print("<tr><td>"+rs.getString(1)+"</td><td>"+rs.getString(2)+"</td><td>"+rs.getString(3)+"</td></tr>");
}
out.print("</table>");
}//end of else for rs.isBeforeFirst
con.close();
}catch(Exception e){out.print(e);}
}//end of else
%>
Output:
<!DOCTYPE html>
<html>
<head>
<script>
var request=new XMLHttpRequest();
function searchInfo(){
var name=document.vinform.name.value;
var url="index.jsp?val="+name;
try{
request.onreadystatechange=function(){
if(request.readyState==4){
var val=request.responseText;
document.getElementById('mylocation').innerHTML=val;
}
}//end of function
request.open("GET",url,true);
request.send();
}catch(e){alert("Unable to connect to server");}
}
</script>
</head>
<body>
<h1>Search Employee Using Ajax.</h1>
<form name="vinform">
<input type="text" name="name" onkeyup="searchInfo()">
</form>
<span id="mylocation"></span>
</body>
</html>
index.jsp
<%@ page import="java.sql.*" %>
<%
String name=request.getParameter("val");
if(name==null||name.trim().equals(""))
{
out.print("<p>Please enter name!</p>");
}
else
{
try
{
Class.forName("com.mysql.jdbc.Driver");
Connection con = DriverManager.getConnection("jdbc:mysql://localhost:3306/employee", "root", "sagan");
PreparedStatement ps=con.prepareStatement("select * from emp where empname like '"+name+"%'");
ResultSet rs=ps.executeQuery();
if(!rs.isBeforeFirst())
{
out.println("<p>No Record Found!</p>");
}
else
{
out.print("<table border='1' cellpadding='2' width='50%'>");
out.print("<tr><th>Id</th><th>Name</th><th>Address</th></tr>");
while(rs.next()){
out.print("<tr><td>"+rs.getString(1)+"</td><td>"+rs.getString(2)+"</td><td>"+rs.getString(3)+"</td></tr>");
}
out.print("</table>");
}//end of else for rs.isBeforeFirst
con.close();
}catch(Exception e){out.print(e);}
}//end of else
%>
Output: