With Ajax you can able to dynamically showing the searching results for a search item. Instead of entering a search value in the text box and submit the value after that get a search results in a list. Its an old model. Now web technologies are growing rapidly. So we move to the current trend is an important one. In Ajax Search, the implementation should be like this; type a character sequence in the text box during that time we will query the database for that search value and retrieve & showing the matching results dynamically. The below example will explain you clearly.
Example.
Database Name : Books
Table Name : BookDetails
| BookId | BookName | Author | Price |
| 1001 | Ajax | Nicolas Zakas | 1000 |
| 1002 | Java | Herbert Schildt | 800 |
| 1003 | JSP & Servlet | James Gosling | 1200 |
| 1004 | C Programming | Dennis Ritchie | 300 |
| 1005 | C++ Programming | Bjarne Stroustroup | 600 |
| 1006 | Operating | Donald | 750 |
Action Class : BookDetails.java
File contains search logic to retrieve data from the database and send results to the client in XML format.
import java.sql.*; import java.util.*; import java.io.*; import javax.servlet.*; import javax.servlet.http.*; public class BookDetails extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doPost(request, response); } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //Details of DB String driverName="org.gjt.mm.mysql.Driver"; String url="jdbc:mysql://localhost:2345/Books"; String username="root"; String password=""; Connection con=null; try { Class.forName(driverName); con = DriverManager.getConnection(url,username,password); } catch( SQLException e ) { e.printStackTrace(); } Statement stmt = conn.createStatement();; ResultSet res = null; String input = request.getParameter("searchtext"); res = stmt.executeQuery("select BookName from BookDetails where BookName like '%"+input+"%'"); Sting output = ""; String result = ""; while( res.next() ) { String bookname = res.getString("BookName "); result = ""+bookname+""; } output = output + result + ""; System.out.println("Search Output is : "+output); stmt.close(); conn.close(); response.setContentType("text/xml"); PrintWriter out = response.getWriter(); out.println(output); out.close(); } }Client File : book.jsp
File used to get the input of search value and shows the matching search results.
<html>
<script src=”ajax.js” language=”javascript”></script>
<script src=”ajaxsearch.js” language=”javascript”></script>
<body>
<form action=”BookDetails” name=”book”>
Enter Search value : <input type=”text” name=”searchtext” value=”” onkeyup=”showSearchItems(this.value)”/>
</form>
<div id=”showdetails”>
</div>
</body>
<script>
function showSearchItems(val)
{
sendAjaxSearchRequest(“\BookDetails”, “showdetails”);
}
</script>
</html>Script File : ajaxsearch.js
function sendAjaxSearchRequest(url, divid)
{
url = url + getNoCacheValue(url);
var req = getXMLHttpRequest();
req.onreadystatechange = function(){ processResponse(req, divid) };
req.open(’GET’, url, true);
req.send(null);
}function processResponse(req, divid)
{
if (req.readyState == 4) {
if (req.status == 200) {
var response = req.responseXML;
var tags = response.getElementsByTagName(BookDetails)[0];
var result = “”;
for(i=0; i<tags.length; i++)
{
var bookdet = tags[i];
var bookname = bookdet.childNodes[0].firstChild.data
result += “<div>”+bookname+”</div>”;
}
document.getElementById(divid).innerHTML = result;
}
}
}onkeyup – is one of the property of html tags. method specified in this property gets fired when you type any characters in the search input box. In our example javascript method showSearchItems called and this should produce the search results for your entered search input.
Ajax Basics – https://manikandanmv.wordpress.com/2008/09/23/ajax-asynchronous-javascript-and-xml/
Ajax Example – https://manikandanmv.wordpress.com/2008/09/29/ajax-example/
Manikandan's Weblog 