《ajax基础教程》里一个自动补全的例子

这是一个类似于google自动补全的例子，挺长的，很容易打错，我调试了大半天才调出来，希望大家能用上。这个功能在表示层与用户交互的时候很有用，很人性化，很好的诠释了AJAX的异步的特点。

jsp部分如下：

<% ... @ page language="java" import="java.util.*" pageEncoding="gb2312" %>

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html >
   < head >
     < title > Ajax Auto Complete! </ title >
     < style  type ="text/css" > ...
        .mouseOut{...}{
            background: #708090;
            color: #FFFAFA;    
        }
        
        .mouseOver{...}{
            background: #FFFAFA;
            color: #000000;
        }
     </ style >
   < script  type ="text/javascript" > ...
          var xmlHttp;
          var completeDiv;
          var inputField;
          var nameTable;
          var nameTableBody;
          
          function createXMLHttpRequest()...{
              if(window.ActiveXObject)...{
                  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
              }else if(window.XMLHttpRequest)...{
                  xmlHttp=new XMLHttpRequest();
              }
          }
          
          function initVars()...{
              inputField=document.getElementById("names");
              nameTable=document.getElementById("name_table");
              completeDiv=document.getElementById("popup");
              nameTableBody=document.getElementById("name_table_body");
          }
          
          function findNames()...{
              initVars();
              if(inputField.value.length>0)...{
                  createXMLHttpRequest();
                  var url="/ajaxWeb/AutoCompleteServlet.do?names="+escape(inputField.value);
                  xmlHttp.open("GET",url,true);
                  xmlHttp.onreadystatechange=callback;
                  xmlHttp.send(null);

              }else...{
                  clearNames();
              }
              
          }
          
          function callback()...{
              if(xmlHttp.readyState==4)...{
                  if(xmlHttp.status==200)...{
                      var name=xmlHttp.responseXML.getElementsByTagName("name")[0].firstChild.data;
                      //alert(name);
                      setNames(xmlHttp.responseXML.getElementsByTagName("name"));
                  } else if (xmlHttp.status==204)...{
                  clearNames();
                  }
              }
          }
          
          function setNames(the_names)...{          
              //alert("1.the_names="+the_names.length);
              //alert("=1=");
              clearNames();
              //alert("=2=");
              var size=the_names.length;
              //alert("2.the_names="+size);
              //setOffsets()设置下拉框的属性
              setOffsets();
              var row,cell,txtNode,tbody;
              for(var i=0;i<size;i++)...{
                  var nextNode=the_names[i].firstChild.data;
                  
                  //tbody = document.createElement("tbody");                   
                  row=document.createElement("tr");
                  cell=document.createElement("td");
                  txtNode=document.createTextNode(nextNode);
                  //cell的属性设置

                  //===================================
                  cell.onmouseout=function()...{this.className='mouseOver';}
                  cell.onmouseover=function()...{this.className='mouseOut';}              
                  cell.setAttribute("bgcolor","green");    
                  cell.setAttribute("border","0");                      
                cell.onclick=function()...{populateName(this);}                      
                  //===================================        
                  //alert("=3=");    
                  nameTableBody.appendChild(row);          
                  row.appendChild(cell);            
                cell.appendChild(txtNode);
                //alert("=4=");                        
                //===================================    
              }              
          }
          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 populateName(cell)...{
              inputField.value=cell.firstChild.nodeValue;
            clearNames();
          }
          function clearNames()...{
              var ind=nameTableBody.childNodes.length;
              //alert("1.下拉菜单个数="+ind);
              for(var i=ind-1;i>=0;i--)...{
                  nameTableBody.removeChild(nameTableBody.childNodes[i]);
              }
              ind=nameTableBody.childNodes.length;
              //alert("2.下拉菜单个数="+ind);
              completeDiv.style.border="none";
          }          
          
   </ script >
</ head >
   < body >
           < h1 > Ajax AutoComplete Example! </ h1 >
                Names :  < input  type ="text"  id ="names"  size ="20"  onkeyup ="findNames();"  style ="height:20;"   />
                 < div  style ="position:absolute;"  id ="popup" >
                         < table  id ="name_table"  bgcolor ="#FFFAFA"  border ="0"  cellspacing ="0"  cellpadding ="0" >
                             < tbody  id ="name_table_body" ></ tbody >             
                         </ table >
                 </ div >
   </ body >
</ html >

这是两个类：AutoCompleteServlet和NameService

package  com.ajax;

import  java.io.IOException;
import  java.io.PrintWriter;
import  java.util. * ;

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

import  org.apache.struts.action.Action;
import  org.apache.struts.action.ActionForm;
import  org.apache.struts.action.ActionForward;
import  org.apache.struts.action.ActionMapping;

public   class  AutoCompleteServlet  extends  Action  ... {
    private   List names=new ArrayList();
    ...{
        names.add("abe");
        names.add("Abc");
        names.add("Abigail");
        names.add("Abnig");
        names.add("Ainni");
        names.add("Marry");
        names.add("Marcy");
        names.add("Marge");
        names.add("Marie");        
    }
/**//*    public void init() {
        System.out.println("===========>1.测试");
        names.add("abe");
        names.add("Abc");
        names.add("Abigail");
        names.add("Abnig");
        names.add("Ainni");
        names.add("Marry");
        names.add("Marcy");
        names.add("Marge");
        names.add("Marie");        
    }*/
    public ActionForward execute(ActionMapping mapping, ActionForm form,   
            HttpServletRequest request, HttpServletResponse response) throws IOException ...{  
        //init();
        System.out.println("===========>3.测试");
        String prefix=request.getParameter("names");
        NameService service=NameService.getInstance(names);
        System.out.println("===========>5.测试");
        List matching=service.findNames(prefix);
        if(matching.size()>0)...{
            PrintWriter out=response.getWriter();
            
            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);
        }
        return null;
    }
}

 

package  com.ajax;

import  java.util. * ;

public   class  NameService  ... {
    private List names;
    
    private NameService(List list_of_names)...{
        System.out.println("===========>4.测试");
        this.names=list_of_names;
    }
    
    public static NameService getInstance(List list_of_names)...{
        return new NameService(list_of_names);        
    }
    
    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;
    }
}