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

最新推荐文章于 2022-08-21 16:41:54 发布

原创最新推荐文章于 2022-08-21 16:41:54 发布 · 1.6k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #function #测试 #table #string #list

本文介绍了一个基于AJAX的自动补全功能实现案例，包括前端JS代码和后端Servlet处理逻辑，展示了如何响应用户输入并返回匹配项。

这是一个类似于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>

.mouseOut{

background: #708090;

color: #FFFAFA;

}

.mouseOver{

background: #FFFAFA;

color: #000000;

}

</style>

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;" />

</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;

}