3. ConnectDB类源码:

/******************************************************
* 名称: ConnectDB, 连接数据库
* 作者： 孙丰伟
* 时间： 2008年1月20日
* 主要方法:
* getConnection : 获取数据库连接
* close : 关闭连接
******************************************************/
package cn.sunfengwei.suggest.database;

import java.sql.*;

public class ConnectDB {

private static Connection con = null;

private static String url = "jdbc:sqlserver://localhost:1433;databaseName=suggestDB";

public static Connection getConnection() {
   try {
    Class.forName("com.microsoft.jdbc.sqlserver.SQLServerDriver");
    con = DriverManager.getConnection(url, "xxxx", "xxxx");
   } catch (ClassNotFoundException e) {

    e.printStackTrace();
   } catch (SQLException e) {

    e.printStackTrace();
   }
   return con;

} // end of getConnection

public static void close() {

   try {
    if (!con.isClosed())
     con.close();
   } catch (SQLException e) {

   }
} // end of close
} // end of ConnectDB

4. 创建数据访问对象SearchDAO.java

/******************************************************
* 名称: SearchDAO 数据访问对象
* 作者： 孙丰伟
* 时间： 2008年1月20日
* 主要方法:
* getSearch : 数据搜索
* close     : 关闭连接
******************************************************/
package cn.sunfengwei.suggest.model;
import java.util.*;
import java.sql.*;

import cn.sunfengwei.suggest.database.*;
public class SearchDAO {
private Connection con;
private PreparedStatement pstmt;
private ResultSet rs;
public SearchDAO()
{
con=ConnectDB.getConnection();
}
/*************************************************
* @author 孙丰伟
* @param userName 要注册的新用户名
* @return String , 在数据中搜索到的相关数据,每项使用\n分隔
* 前置条件：数据连接
*************************************************/
public String getSearch(String search)
{
StringBuilder searches=new StringBuilder();
try {
   pstmt=con.prepareStatement("select * from suggest where title like ? order by title");
   pstmt.setString(1,search+"%" );
   rs=pstmt.executeQuery();
   while(rs.next())
   {
    searches.append(rs.getString("title")+"\n");
   }
   rs.close();
   pstmt.close();
} catch (SQLException e) {
   // TODO Auto-generated catch block
   e.printStackTrace();
}
return searches.toString();
}

public void close()
{
ConnectDB.close();
}
}

5. 创建控制器SearchServlet.java

/******************************************************
* 名称:SearchServlet, 控制器，URL映射为search
* 作者： 孙丰伟
* 时间： 2008年1月20日
* 主要方法:
* doGet : 检查用户名是否存在
******************************************************/
package cn.sunfengwei.suggest.controller;

import java.io.IOException;
import java.io.PrintWriter;

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

import cn.sunfengwei.suggest.model.*;
public class SearchServlet extends HttpServlet {

/**
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @param request the request send by the client to the server
* @param response the response send by the server to the client
* @throws ServletException if an error occurred
* @throws IOException if an error occurred
*/
public void doGet(HttpServletRequest request, HttpServletResponse response)
    throws ServletException, IOException {
   String search=request.getParameter("search");
   response.setContentType("text/html");
   PrintWriter out = response.getWriter();
   SearchDAO searchDAO=new SearchDAO();
   out.print(searchDAO.getSearch(search));
   searchDAO.close();
   out.flush();
   out.close();
}
}

6. WEB项目配置文件 web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<servlet>
    <description>user</description>
    <display-name>user of ajax</display-name>
    <servlet-name>SearchServlet</servlet-name>
    <servlet-class>cn.sunfengwei.suggest.controller.SearchServlet</servlet-class>
</servlet>

<servlet-mapping>
    <servlet-name>SearchServlet</servlet-name>
    <url-pattern>/search</url-pattern>
</servlet-mapping>

</web-app>

7. 样式表文件css.css

body{font:12px arial;}
.suggest_link{
background-color=#FFFFFF;
padding:2px 6px 2px 6px;
}

.suggest_link_over{
background-color:#E8F2FE;
padding:2px 6px 2px 6px;
}
#search_suggest{
position:absolute;
background-color:#FFFFFF;
text-align:left;
border:1px solid #000000;
}

8. AJAX异步提交程序suggest.js

//create XMLHttpRequest object
function getXmlHttpRequestObject()
{
   var xmlhttp=false;
   try{
   xmlhttp= new ActiveXObject('Msxml2.XMLHTTP');
}catch(e){
   try{
    xmlhttp= new ActiveXObject('Microsoft.XMLHTTP');
   }catch(e){
    try{
     xmlhttp= new XMLHttpRequest();
    }catch(e){}
   }
}
return xmlhttp;
}

var searchXmlRequest=getXmlHttpRequestObject();
function searchSuggest()
{

var str = escape(document.getElementById('txtSearch').value);
searchXmlRequest.open("get","search?search="+str,true);
searchXmlRequest.onreadystatechange=handleSearchSuggest;
searchXmlRequest.send(null);

} // end function searchSuggest

function handleSearchSuggest()
{
if(searchXmlRequest.readyState==4)
{
var divSearch=document.getElementById("search_suggest");
divSearch.innerHTML="";
var str=searchXmlRequest.responseText.split("\n");
for(i=0;i<str.length-1;i++)
{
   var suggest="<div onmouseover='javascript:suggestOver(this);'";
   suggest+=" onmouseout='javascript:suggestOut(this);'";
   suggest+=" onclick='javascript:setSearch(this.innerHTML);'";
   suggest+=" class='suggest_link'>"+str[i]+"</div>";
   divSearch.innerHTML+=suggest;
} //end of for

}// end of if
} //end function handleSearchSuggest

function suggestOver(div_value)
{
div_value.className="suggest_link_over";
}

function suggestOut(div_value)
{
div_value.className="suggest_link";
}

function setSearch(value)
{
   document.getElementById("txtSearch").value=value;
   document.getElementById("search_suggest").innerHTML="";
}

9. 程序主页index.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
   <title>搜索引擎</title>

   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
   <meta http-equiv="description" content="this is my page">
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   <link rel="stylesheet" href="css/css.css" type="text/css"></link>
   <script type="text/javascript" src="js/suggest.js"></script>
</head>

<body>
    <h2>基于AJAX的搜索提示</h2>
     <hr>
     <div style="width:500px;">
     <form id="form1" action="">
     <input type="text" id="txtSearch" name="txtSearch" onkeyup="searchSuggest();" autocomplete="off"/>
     <input type="submit" id="btnSubmit" name="btnSubmit" value='搜索'/>
     <div id="search_suggest"></div>
     </form>
     </div>
</body>
</html>

10. 运行结果