Use Ajax and css+div Google search (with source download). __ajax

When using Google search or Baidu search, in the input search keyword at the same time, will automatically pop-up matching the other keyword tips, wholeheartedly serve the spirit of the people here. The ability to implement input hints and AutoComplete using AJAX Technologies is Google's first launch and is widely used in other Web applications. Using AJAX to achieve a partial page refresh or automatic completion will greatly enhance the user experience.

technology is always for the user (whether the performance or aesthetic aspects), out of the user there is no technology development, or only users can promote technological progress.

After mastering the principle of Ajax we can also imitate Google, to achieve a search engine small demo.

In the process of implementation of the main use of Ajax technology, Css+div layout, Servlet+javabean, as well as the basic knowledge of the database and so on. The following general description of the implementation of the steps, please follow the text to complete our Google. Interested friends can click here to download the source code (to achieve haste, if there are deficiencies please understand)

1, prepare the backstage and the database, completes the database (MYSQL) operation part.

Here is very simple, first write ConnectionManager class, to achieve the database connection, query function.

The code is as follows:

[Java] View Plain copy print? package com.ncs.common;      import java.sql.connection;   import  java.sql.drivermanager;   import java.sql.resultset;   import  java.sql.sqlexception;   import java.sql.statement;      Public class  ConnectionManager {              private  static string url= "Jdbc:mysql://localhost:3306/test";        Private static string driver= "Com.mysql.jdbc.Driver";        private static string user= "Root";       private static  String password= "123456";       private static Connection  conn=null;       private static Statement stmt=null;       private static ResultSet rs=null;              public static void getconnection () {                       try {               class.forname (DRIVER);               try {                conn = drivermanager.getconnection (URL,  user, password);                system.out.println ("successfully connected to mysql db!");                } catch  ( Sqlexception e)  {     &NBsp;             system.out.println (" Connection db failed! ");                }            } catch  (classnotfoundexception e)  {                system.out.println ("Driver: +DRIVER+")   Can ' t find! ');            }                          }                      public static  void closeconnection () {                      try {   &NBSp;           conn.close ();                conn=null;            } catch  (sqlexception e)  {                                e.printstacktrace ();           }        }                      public static  resultset executequery (String sql) {           try {                stmt=conn.createstatement ();           &Nbsp;    rs=stmt.executequery (SQL);                return rs;                           } catch  ( Sqlexception e)  {                return null;           }                   }               public static void main (String[] args)  {            //getconnection ();        }     }  

Package Com.ncs.common;
Import java.sql.Connection;
Import Java.sql.DriverManager;
Import Java.sql.ResultSet;
Import java.sql.SQLException;

Import java.sql.Statement;
	public class ConnectionManager {private static String url= "Jdbc:mysql://localhost:3306/test";
	private static String driver= "Com.mysql.jdbc.Driver";
	private static String user= "root";
	private static String password= "123456";
	private static Connection Conn=null;
	private static Statement Stmt=null;
	
	private static ResultSet Rs=null;
			public static void Getconnection () {try {class.forname (DRIVER);
			try {conn = drivermanager.getconnection (URL, USER, PASSWORD);
			System.out.println ("Successfully connected to Mysql db!");
			catch (SQLException e) {System.out.println ("Connection DB failed!");
		The catch (ClassNotFoundException e) {System.out.println ("Driver:" +driver+ "can ' t find!");
			}} public static void CloseConnection () {try {conn.close ();
		Conn=null; } CatCH (SQLException e) {e.printstacktrace ();
			} public static ResultSet executequery (String sql) {try {stmt=conn.createstatement ();
			Rs=stmt.executequery (SQL);
			
		Return RS;
		catch (SQLException e) {return null;
	} public static void Main (string[] args) {//getconnection ();
 }

}

2, write the page

Add the necessary text boxes to the page and two buttons. An essential part of this is a hidden div that appears when you enter text in a text box.

The code is as follows:

[HTML] View Plain copy print? <%@ page language= "java"  contenttype= "Text/html; charset=utf-8"         pageencoding= "UTF-8"%>   <! doctype html public  "-//w3c//dtd xhtml 1.0 transitional//en"   "http:// Www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">     

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%> <! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd
	    ">  

 

 

3. Implement Servlet

A servlet is written to translate the page's data into an SQL statement and upload it to the ConnectionManager class, which outputs the resulting output. (Note that here we use the direct output JSP code, so we want to add id attribute to the DIV in order to control the style in CSS, and related events to facilitate the control of the effect in JS.) ）

The code is as follows:

[Java] view plain copy print?      Package com.ncs.servlet; Import JAV