在使用Google搜尋或者是Baidu搜尋的時候，在輸入搜尋索引鍵的同時，會自動彈出匹配的其他關鍵字的提示，全心全意為人民服務的精神在這裡嶄露無遺。這種利用Ajax技術實現輸入提示和自動完成的功能是Google率先推出的，然後在其他的Web應用中被廣泛的應用。利用Ajax實現部分頁面重新整理或者自動完成會使得使用者體驗絕大大提升。
技術永遠是為使用者服務的（無論是效能方面還是美觀方面），脫離了使用者就沒有技術的發展，或者說只有使用者才能促進技術的進步。
在掌握了Ajax原理之後我們也可以模仿Google，來實現一個搜尋引擎的小Demo。
在實現的過程中主要運用的是Ajax技術，CSS+DIV布局，Servlet+JavaBean，還有資料庫的基本知識等等。下面大致的描述一下實現的步驟，請大家跟隨文字來共同完成我們的Google。有興趣的朋友可以點擊這裡下載源碼（實現倉促，如有不足之處請諒解）
1、準備後台以及資料庫，完成資料庫（MySql）操作部分。
這裡很簡單，首先編寫ConnectionManager類，來實現對資料庫的串連、查詢功能。
代碼如下：
[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) { 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(); } }
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 ? <%@ 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>
<%@ 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中控制效果。）
代碼如下：
[java] view plain copy print ? package com.ncs.servlet; import jav
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
