使用Ajax以及CSS+DIV高仿谷歌搜索（附源码下载） .

在使用Google搜索或者是Baidu搜索的时候，在输入搜索关键字的同时，会自动弹出匹配的其他关键字的提示，全心全意为人民服务的精神在这里崭露无遗。这种利用Ajax技术实现输入提示和自动完成的功能是Google率先推出的，然后在其他的Web应用中被广泛的应用。利用Ajax实现部分页面刷新或者自动完成会使得用户体验绝大大提升。

技术永远是为用户服务的（无论是性能方面还是美观方面），脱离了用户就没有技术的发展，或者说只有用户才能促进技术的进步。

在掌握了Ajax原理之后我们也可以模仿谷歌，来实现一个搜索引擎的小Demo。

在实现的过程中主要运用的是Ajax技术，CSS+DIV布局，Servlet+JavaBean，还有数据库的基本知识等等。下面大致的描述一下实现的步骤，请大家跟随文字来共同完成我们的Google。有兴趣的朋友可以点击这里下载源码（实现仓促，如有不足之处请谅解）

1、准备后台以及数据库，完成数据库（MySql）操作部分。

这里很简单，首先编写ConnectionManager类，来实现对数据库的连接、查询功能。

代码如下：

[java] view plain copy print ?

1. package com.ncs.common;  
2.   
3. import java.sql.Connection;  
4. import java.sql.DriverManager;  
5. import java.sql.ResultSet;  
6. import java.sql.SQLException;  
7. import java.sql.Statement;  
8.   
9. public class ConnectionManager {  
10.       
11.     private static String URL="jdbc:mysql://localhost:3306/test";  
12.     private static String DRIVER="com.mysql.jdbc.Driver";  
13.     private static String USER="root";  
14.     private static String PASSWORD="123456";  
15.     private static Connection conn=null;  
16.     private static Statement stmt=null;  
17.     private static ResultSet rs=null;  
18.       
19.     public static void getConnection(){  
20.           
21.         try {  
22.             Class.forName(DRIVER);  
23.             try {  
24.             conn = DriverManager.getConnection(URL, USER, PASSWORD);  
25.             System.out.println("Successfully connected to Mysql DB!");  
26.             } catch (SQLException e) {  
27.                 System.out.println("Connection DB failed!");  
28.             }  
29.         } catch (ClassNotFoundException e) {  
30.             System.out.println("Driver:"+DRIVER+" can't find!");  
31.         }         
32.           
33.     }  
34.       
35.       
36.     public static void closeConnection(){  
37.           
38.         try {  
39.             conn.close();  
40.             conn=null;  
41.         } catch (SQLException e) {  
42.               
43.             e.printStackTrace();  
44.         }  
45.     }  
46.       
47.       
48.     public static  ResultSet executeQuery(String sql){  
49.         try {  
50.             stmt=conn.createStatement();  
51.             rs=stmt.executeQuery(sql);  
52.             return rs;  
53.               
54.         } catch (SQLException e) {  
55.             return null;  
56.         }  
57.           
58.     }  
59.       
60.     public static void main(String[] args) {  
61.         //getConnection();   
62.     }  
63.   
64. }  

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!");
			}
		} 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、编写页面

在页面中添加必须要有的文本框，以及两个按钮。其中必不可少的是在文本框输入文本时才出现的一个隐藏DIV。

代码如下：

[html] view plain copy print ?

1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
2.     pageEncoding="UTF-8"%>  
3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
4.   
5. <html xmlns="http://www.w3.org/1999/xhtml" >  
6. <head>  
7.     <title>Google</title>  
8.     <%  
9.         response.setHeader("Cache-Control","no-store");   
10.         response.setHeader("Pragrma","no-cache");   
11.         response.setDateHeader("Expires",0);   
12.     %>  
13.     <link type="text/css" href="css/autoComplete.css" rel="stylesheet"/>  
14.     <script type="text/javascript" src="scripts/autoComplete.js"></script>  
15. </head>  
16. <body onload="setPosition($('txtKeyword'))">  
17.     <div id="img"><img src="images/google.jpg"></img></div>  
18.     <form id="form1">  
19.     <div id="input"><input type="text" onkeydown="if(GetKeyCode(event)==13)form_submit()" onkeyup="GetSuggest(this.value,event);updown(event)" autocomplete="off" id="txtKeyword" />  
20.     </div>  
21.     <div id="dSuggest"></div>  
22.     <div id="button">  
23.     <input id="submit" type="submit"  value="Google 搜索" onclick="alert('Now Search ...')" />   
24.     <input id="submit" type="submit"  value="手气不错" onclick="alert('Now Search ...')" />  
25.     </div>  
26.     </form>  
27. </body>  
28. </html>  

<%@ 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">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Google</title>
    <%
	    response.setHeader("Cache-Control","no-store"); 
	    response.setHeader("Pragrma","no-cache"); 
	    response.setDateHeader("Expires",0); 
    %>
    <link type="text/css" href="css/autoComplete.css" rel="stylesheet"/>
    <script type="text/javascript" src="scripts/autoComplete.js"></script>
</head>
<body οnlοad="setPosition($('txtKeyword'))">
	<div id="img"><img src="images/google.jpg"></img></div>
    <form id="form1">
    <div id="input"><input type="text" οnkeydοwn="if(GetKeyCode(event)==13)form_submit()" οnkeyup="GetSuggest(this.value,event);updown(event)" autocomplete="off" id="txtKeyword" />
    </div>
    <div id="dSuggest"></div>
    <div id="button">
    <input id="submit" type="submit"  value="Google 搜索" οnclick="alert('Now Search ...')" /> 
    <input id="submit" type="submit"  value="手气不错" οnclick="alert('Now Search ...')" />
    </div>
    </form>
</body>
</html>

3、实现Servlet

编写Servlet来实现将页面的数据拼成Sql语句并传到ConnectionManager类，将返回的结果输出的页面。（需要注意的是，这里我们采用得是直接输出jsp代码，所以要为DIV加上id属性以便在CSS中控制样式，以及相关事件以便于在js中控制效果。）

代码如下：

[java] view plain copy print ?

1. package com.ncs.servlet;  
2.   
3. import java.io.IOException;  
4. import java.io.PrintWriter;  
5. import java.sql.ResultSet;  
6. import java.sql.SQLException;  
7.   
8. import javax.servlet.ServletException;  
9. import javax.servlet.http.HttpServlet;  
10. import javax.servlet.http.HttpServletRequest;  
11. import javax.servlet.http.HttpServletResponse;  
12.   
13. import com.ncs.common.ConnectionManager;  
14.   
15. public class suggest extends HttpServlet {  
16.   
17.     @Override  
18.     protected void doGet(HttpServletRequest req, HttpServletResponse resp)  
19.             throws ServletException, IOException {  
20.         req.setCharacterEncoding("UTF-8");  
21.     //  resp.setContentType("text/xml;charset=utf-8");  
22.         System.out.println("Enter Servlet Get Method..");  
23.         PrintWriter out=resp.getWriter();  
24.         String param=(String)req.getParameter("id");  
25.         String paramValue=param.trim().length()>0?param.trim():"unknown";  
26.         String sql="select name from tbl_ajax_search where name like '"+paramValue+"%'";  
27.         System.out.println("sql="+sql);  
28.         ConnectionManager.getConnection();  
29.         ResultSet rs=ConnectionManager.executeQuery(sql);  
30.         StringBuffer sb=new StringBuffer();  
31.         //sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>")  
32.          // .append("<data>");   
33.         sb.append("<ul id=\"sug\">");  
34.         int pos=0;  
35.         try {  
36.               
37.             while(rs.next()){     
38.                 System.out.println("pos="+pos);  
39.                     sb.append("<li οnclick=\"form_submit()\" οnmοuseοver=\"myMouseOver(")  
40.                     .append(pos)  
41.                     .append(");\" onmouseOut=\"myMouseOut(")  
42.                     .append(pos)  
43.                     .append(");\">")  
44.                     .append(rs.getString(1)+"</li>");  
45.                 //sb.append("<item>")  
46.                   //.append(rs.getString(1))  
47.                  // .append("</item>");         
48.                     pos++;  
49.             }  
50.               
51.             sb.append("</ul>");  
52.               
53.             int posi = sb.toString().indexOf("onmouseover");  
54.             System.out.println("posi="+posi);  
55.             if(posi==-1){  
56.                 System.out.println("no content found.");  
57.                 out.write("");  
58.             }else{  
59.                 System.out.println(sb.toString());  
60.                 out.write(sb.toString());  
61.             }  
62.         } catch (SQLException e) {  
63.               
64.             e.printStackTrace();  
65.         }  
66.   
67.   
68.     }  
69.   
70.     @Override  
71.     protected void doPost(HttpServletRequest req, HttpServletResponse resp)  
72.             throws ServletException, IOException {  
73.         // TODO Auto-generated method stub  
74.         doGet(req,resp);  
75.     }  
76. }  

package com.ncs.servlet;

import java.io.IOException;
import java.io.PrintWriter;
import java.sql.ResultSet;
import java.sql.SQLException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.ncs.common.ConnectionManager;

public class suggest extends HttpServlet {

	@Override
	protected void doGet(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		req.setCharacterEncoding("UTF-8");
	//	resp.setContentType("text/xml;charset=utf-8");
		System.out.println("Enter Servlet Get Method..");
		PrintWriter out=resp.getWriter();
		String param=(String)req.getParameter("id");
		String paramValue=param.trim().length()>0?param.trim():"unknown";
		String sql="select name from tbl_ajax_search where name like '"+paramValue+"%'";
		System.out.println("sql="+sql);
		ConnectionManager.getConnection();
		ResultSet rs=ConnectionManager.executeQuery(sql);
		StringBuffer sb=new StringBuffer();
		//sb.append("<?xml version=\"1.0\" encoding=\"UTF-8\"?>")
		 // .append("<data>");
		sb.append("<ul id=\"sug\">");
		int pos=0;
		try {
			
			while(rs.next()){	
				System.out.println("pos="+pos);
					sb.append("<li οnclick=\"form_submit()\" οnmοuseοver=\"myMouseOver(")
					.append(pos)
					.append(");\" onmouseOut=\"myMouseOut(")
					.append(pos)
					.append(");\">")
					.append(rs.getString(1)+"</li>");
				//sb.append("<item>")
				  //.append(rs.getString(1))
				 // .append("</item>");		
					pos++;
			}
			
			sb.append("</ul>");
			
			int posi = sb.toString().indexOf("onmouseover");
			System.out.println("posi="+posi);
			if(posi==-1){
				System.out.println("no content found.");
				out.write("");
			}else{
				System.out.println(sb.toString());
				out.write(sb.toString());
			}
		} catch (SQLException e) {
			
			e.printStackTrace();
		}


	}

	@Override
	protected void doPost(HttpServletRequest req, HttpServletResponse resp)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(req,resp);
	}
}

4、仿照Google调整页面的布局

这里重点就是调整隐藏的DIV以及按钮的样式。

最终效果如下图

后记：关于模仿

自呱呱坠地我们就开始了自己一生的学习，在学习的过程中有着必不缺少的一个步骤：模仿。我们的学习大多是从模仿开始的，无论是模仿父母的声音牙牙学语，还是模仿大人走路的姿势蹒跚学步；无论是模仿书本上的文字一笔一画，还是模仿课文的结构字斟句酌。这都是开始学习的第一个过程——模仿。当然随着模仿的深入我们掌握了原理就可以开始下一个阶段的学习：使用和发挥。使用和发挥有赖于模仿的功力，只有初期模仿的到位，模仿的逼真，才能有后期的漂亮运用与灵活发挥。

我们的学习之路：模仿——使用——发挥