在使用 Google 搜索或者是 Baidu 搜索的時候，在輸入搜索關鍵字的同時，會自動彈出匹配的其他關鍵字的提示，全心全意為人民服務的精神在這里嶄露無遺。這種利用 Ajax 技術實現輸入提示和自動完成的功能是 Google 率先推出的，然后在其他的 Web 應用中被廣泛的應用。利用 Ajax 實現部分頁面刷新或者自動完成會使得用戶體驗絕大大提升。
技術永遠是為用戶服務的（無論是性能方面還是美觀方面），脫離了用戶就沒有技術的發展，或者說只有用戶才能促進技術的進步。
在掌握了 Ajax 原理之后我們也可以模仿谷歌，來實現一個搜索引擎的小 Demo 。
在實現的過程中主要運用的是 Ajax 技術， CSS+DIV 布局， Servlet+JavaBean ，還有數據庫的基本知識等等。下面大致的描述一下實現的步驟，請大家跟隨文字來共同完成我們的 Google 。有興趣的朋友可以 點擊這里下載源碼 （實現倉促，如有不足之處請諒解）
1 、準備后臺以及數據庫，完成數據庫（ MySql ）操作部分。
這里很簡單，首先編寫 ConnectionManager 類，來實現對數據庫的連接、查詢功能。
代碼如下：
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 。
代碼如下：
<%@ 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 onload="setPosition($('txtKeyword'))">
<div id="img"><img src="images/google.jpg"></img></div>
<form id="form1">
<div id="input"><input type="text" onkeydown="if(GetKeyCode(event)==13)form_submit()" onkeyup="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 搜索" onclick="alert('Now Search ...')" />
<input id="submit" type="submit" value="手氣不錯" onclick="alert('Now Search ...')" />
</div>
</form>
</body>
</html>
3 、實現 Servlet
編寫 Servlet 來實現將頁面的數據拼成 Sql 語句并傳到 ConnectionManager 類，將返回的結果輸出的頁面。（需要注意的是，這里我們采用得是直接輸出 jsp 代碼，所以要為 DIV 加上 id 屬性以便在 CSS 中控制樣式，以及相關事件以便于在 js 中控制效果。）
代碼如下：
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 onclick=\"form_submit()\" onmouseover=\"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 以及按鈕的樣式。
最終效果如下圖
后記：關于模仿
自呱呱墜地我們就開始了自己一生的學習，在學習的過程中有著必不缺少的一個步驟：模仿。我們的學習大多是從模仿開始的，無論是模仿父母的聲音牙牙學語，還是模仿大人走路的姿勢蹣跚學步；無論是模仿書本上的文字一筆一畫，還是模仿課文的結構字斟句酌。這都是開始學習的第一個過程——模仿。當然隨著模仿的深入我們掌握了原理就可以開始下一個階段的學習：使用和發揮。使用和發揮有賴于模仿的功力，只有初期模仿的到位，模仿的逼真，才能有后期的漂亮運用與靈活發揮。
我們的學習之路： 模仿——使用——發揮
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
