ajax 业务逻辑：文本框实现自动完成 引入prototype.js包
页面：autoComplete.jsp
<% page contentType="text/html; charset=GBK" %>
<html>
<head>
<title>
Ajax自动完成
</title>
<!--定义样式-->
<style type="text/css">
.mouseOut{
background:#708090;
color:#FFFAFA;
}
.mouseOver{
background:#FFFAFA;
color:#000000;
}
</style>
<script src="prototype.js"></script>
<script type="text/javascript">
var xmlHttp;
var completeDiv;
var inputField;
var nameTable;
var nameTableBody;
//创建XMLHttpRequest对象
function createXMLHttpRequest() {
if (window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else if (window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest();
}
}
//初始化变量
function initVars(){
inputField = $("names");
nameTable = $("name_table");
completeDiv = $("popup");
nameTableBody = $("name_table_body");
}
//执行方法
function findNames(){
initVars();
//如果有输入值
if (inputField.value.length > 0){
createXMLHttpRequest();
var url = "AutoCompleteServlet?names=" + escape(inputField.value);
xmlHttp.open("GET",url,true);
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
}
//回调方法
function callback(){
if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200){
var name = xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
setNames(xmlHttp.responseXML.getElementsByTagName("name"));
}
}
}
//填充表单
function setNames(the_names){
clearNames();
var size = the_names.length;
//设置坐标
setOffsets();
var row,cel,txtNode;
for (var i = 0; i < size; i++){
var nextNode = the_names[i].firstChild.data;
row = document.createElement("tr");
cell = document.createElement("td");
cell.onmouseout = function(){this.className="mouseOut";};
cell.onmouseover = function(){this.className="mouseOver";};
cell.setAttribute("bgcolor","#FFFAFA");
cell.setAttribute("border","0");
cell.onclick = function(){populateName(this);};
txtNode = document.createTextNode(nextNode);
cell.appendChild(txtNode);
row.appendChild(cell);
nameTableBody.appendChild(row);
}
}
//设置坐标
function setOffsets(){
var end = inputField.offsetWidth;
var left = calculateOffsetLeft(inputField);
var top = calculateOffsetTop(inputField) + inputField.offsetHeight;
completeDiv.style.border = "black 1px solid";
completeDiv.style.left = left +"px";
completeDiv.style.top = top + "px";
nameTable.style.width = end + "px";
}
//计算左坐标点
function calculateOffsetLeft(field){
return calculateOffset(field,"offsetLeft");
}
//计算顶坐标点
function calculateOffsetTop(field){
return calculateOffset(field,"offsetTop");
}
//计算坐标点
function calculateOffset(field,attr){
var offset = 0;
while(field){
offset += field[attr];
field = field.offsetParent;
}
return offset;
}
//自动完成
function pupulateName(cell){
inputField.value = cell.firstChild.nodeValue;
clearNames();
}
//清除
function clearNames(){
var ind = nameTableBody.childNodes.length;
for (var i = ind -1; i >= 0; i--){
nameTableBody.removeChild(nameTableBody.childNode[i]);
}
completeDiv.style.border = "none";
}
</script>
</head>
<body>
<h1>
Ajax自动完成示例
</h1>
名称:
<input type="text" size="20" id="names" onkeyup="findNames();" id="popup">
<table id="name_table" bgcolor="#FFFAFA" border="0" cellpadding="0" cellspacing="0">
<tbody id="name_table_body">
</tbody>
</table>
</div>
</body>
</html>
服务器端：AutoCompleteServlet
package ajaxbook.chap4;
import javax.servlet.*;
import javax.servlet.http.*;
import java.io.*;
import java.util.*;
public class AutoCompleteServlet
extends HttpServlet {
private static final String CONTENT_TYPE = "text/html; charset=GBK";
private List names = new ArrayList();
//初始化集合
public void init() throws ServletException {
names.add("Abe");
names.add("Abel");
names.add("Abigail");
names.add("Abner");
names.add("Abraham");
names.add("Marcus");
names.add("Marge");
names.add("Marie");
}
//处理get方法
public void doGet(HttpServletRequest request, HttpServletResponse response) throws
ServletException, IOException {
//得到参数值
String prefix = request.getParameter("names");
//查找符合条件的列表
NameService service = NameService.getInstance(names);
List matching = service.findNames(prefix);
//如果列表有值
if (matching.size() > 0){
PrintWriter out = response.getWriter();
//构造xml字串
response.setContentType("text/xml");
response.setHeader("Cache-Control","no-cache");
out.println("<response>");
Iterator iter = matching.iterator();
while(iter.hasNext()){
String name = (String)iter.next();
out.println("<name>" + name + "</name>");
}
out.println("</response>");
matching = null;
service = null;
out.close();
}else{
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
}
}
//Clean up resources
public void destroy() {
}
}
处理类：NameService
package ajaxbook.chap4;
import java.util.List;
import java.util.ArrayList;
import java.util.Iterator;
public class NameService {
private List names;
/**
* 默认构造函数
* param list_of_name List
*/
private NameService(List list_of_name){
this.names = list_of_name;
}
/**
* 返回实例
* param list_of_name List
* return NameService
*/
public static NameService getInstance(List list_of_name){
return new NameService(list_of_name);
}
/**
* 查找符合条件的列表
* param prefix String 前缀
* return List 列表
*/
public List findNames(String prefix){
String prefix_upper = prefix.toUpperCase();
List matches = new ArrayList();
Iterator iter = names.iterator();
while(iter.hasNext()){
String name = (String)iter.next();
String name_upper_case = name.toUpperCase();
if (name_upper_case.startsWith(prefix_upper)){
boolean result = matches.add(name);
}
}
return matches;
}
}
