为了更好的理解Ajax的原理和结构性实现方式，特意的简单的实现了这个小小的功能，为以后复习用。
JSP页面的代码如下：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax Suggestion</title>
<style type="text/css">
#popup{
border:#999 solid 1px;
width:150px;
height:80px;
display:none;
}
span{
display:block;
}
</style>
</head>
<script type="text/javascript" >
function $(id){return document.getElementById(id);}
var a;
//Ajax核心代码
var xmlhttp;
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest){
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}else{
// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("POST",url,true);
xmlhttp.send();
}
function resp(){
var tmp=""
if(xmlhttp.readyState==4 && xmlhttp.status==200){
tmp=xmlhttp.responseText;
}
a=tmp.split("|");
matchstr();
}
//对获取的数据进行处理
function matchstr(){
var hint="";
var num=0;
if(a.length<=5){
num=a.length;
}else{
num=5;
}
for(var i=0;i<num;i++){
var tmp=a[i];
hint=hint+'<span id="sug'+i+'">'+tmp+'</span>';
}
$('popup').innerHTML=hint;
}
//Ajax获取数据
function subvalue(url){
var str=document.valueForm.aText.value;
url=url+"?str="+str;
loadXMLDoc(url,resp);
}
//监听键盘按下事件
function ShowMsg(id){
$(id).style.display="block";
subvalue('AjaxServlet');
}
function HideMsg(id){
$(id).style.display="none";
}
</script>
<body>
<div id="main">
<div id="formText">
Ajax Suggestion实例练习：
<form id="showform" name="valueForm" action="AjaxServlet">
<input type="text" name="aText" onkeyup="ShowMsg('popup');" onblur="HideMsg('popup');" />
<input type="submit" value="提交" />
</form>
<div id="popup">
</div>
</div>
</div>
</body>
</html>
Servlet的实现代码，这里没有从数据库中获取数据，只是利用Servlet中定义的一个数组模拟了一下实现：
package controller;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
* Servlet implementation class AjaxServet
*/
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public AjaxServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
this.doPost(request, response);
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
String str=request.getParameter("str");
System.out.println("**************");
System.out.println(str);
System.out.println("**************");
str=str.toUpperCase();
List list=new ArrayList();
list.add("Anna");
list.add("Aonew");
list.add("Bind");
list.add("Colla");
list.add("Droid");
list.add("Ella");
list.add("Frunk");
list.add("Gland");
list.add("Hylun");
list.add("Illust");
list.add("John");
list.add("Kate");
list.add("Lumia");
list.add("Monne");
list.add("Nacy");
list.add("Octor");
list.add("Peter");
list.add("Quance");
list.add("Rank");
list.add("Steven");
list.add("Tema");
list.add("Ubuntu");
list.add("View");
list.add("Wenslet");
list.add("Xeelee");
list.add("Yella");
list.add("Zend");
List resplist=new ArrayList();
for(int i=0;i<list.size();i++){
String tmp=list.get(i).toString().toUpperCase();
if(str.equals(tmp.substring(0,str.length()))){
resplist.add(list.get(i));
}
}
String resp="";
for(int i=0;i<resplist.size();i++){
resp=resp+resplist.get(i).toString()+"|";
}
PrintWriter out = response.getWriter();
System.out.println(resp);
out.println(resp);
}
}
