AJAX:即時提示功能

大家還記得Google的搜尋吧，當使用者輸入“北”時，馬上會拉出以“北”開頭的查詢關鍵字。如：

通過ajax技術，我們也可以很容易實現該功能。下面原始碼是我在給Y08班上課的時候示範的例子，自己研究去！

1.XMLServlet.java：這是一個Servlet，以xml格式返回。
package com.aptech.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class XMLServlet extends HttpServlet {
private static List list = new ArrayList();
static {
list.add("北方大學");
list.add("北大荒");
list.add("北愛爾蘭");
list.add("北歐");
list.add("北大青鳥");
list.add("紅色");
list.add("紅日三竿");
list.add("紅男綠女");
list.add("生花之筆");
list.add("生而知之");
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/xml;charset=utf-8");
//禁止緩衝
response.setHeader("pragma", "no-cache");
response.setHeader("cache-control", "no-cache");
response.setDateHeader("expires", 0);

PrintWriter out = response.getWriter();
StringBuffer sb = new StringBuffer();
sb.append("");
request.setCharacterEncoding("utf-8");
String key = request.getParameter("key");
if(key != null && key.trim().length() > 0){
for(String k : list){
if(k.startsWith(key)){
sb.append("");
sb.append(k);
sb.append("");
}
}
}
sb.append("");
out.print(sb.toString());
out.flush();
out.close();
}
}

配置：
XMLServletcom.aptech.servlet.XMLServletXMLServlet/XMLServlet

2.google.html：這是一個靜態頁面，用於輸入查詢關鍵字，並即時顯示匹配的資訊。

關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字

關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字
關鍵字：
關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字
關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字關鍵字

3.styles.css：為了有更好的效果，使用樣式表。
.box {
border: 1px solid #0000FF;
font-size: 14px;
color: #000000;
overflow: auto;
}
.op {
background-image: url(bk.jpg);
border: 1px solid #3300CC;
width: 100%;
color: white;
}

4.效果