TA的每日心情 | 开心 2021-3-12 23:18 |
---|
签到天数: 2 天 [LV.1]初来乍到
|
一、web.xml文件:
<web-app version="2.4"
xmlns="http://java.sun.com/xml/ns/j2ee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee
http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
<display-name>SoftwareLibrary</display-name>
<Servlet>
<servlet-name>AutoCompleteServlet</servlet-name>
<display-name>AutoCompleteServlet</display-name>
<servlet-class>cn.ht.AutoCompleteServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AutoCompleteServlet</servlet-name>
<url-pattern>/AutoCompleteServlet</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.HTML</welcome-file>
</welcome-file-list>
</web-app>
二、运行结果图: 

三、index.htm文件
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<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 = "/testajax/AutoCompleteServlet";
xmlHttp.open("POST", url, true);
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xmlHttp.onreadystatechange = callback;
xmlHttp.send("names=" +inputField.value );
} else {
clearNames();
}
} function callback() { if (xmlHttp.readyState == 4) {
if (xmlHttp.status == 200) {
setNames(xmlHttp.responseXML.getElementsByTagName("name"));
} else if (xmlHttp.status == 204){
clearNames();
}
}
} function setNames(the_names) {
clearNames();
var size = the_names.length; setOffsets();
var row, cell, txtNode;
for (var i = 0; i < size; i++) {
var nextNode = the_names.firstChild.data;
row = document.createElement("tr");
cell = document.createElement("td");
cell.onmouseout = function() {this.className="mouseOver";};
cell.onmouseover = function() {this.className="mouseOut";};
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 populateName(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.childNodes);
}
completeDiv.style.border = "none";
}
</script>
</head>
<body>
Names: <input type="text" size="20" id="names" 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>
OK
</body>
</html> 四、servlet源文件:- /**
- * 创建日期 2006-2-16
- * @author
- */
- package cn.ht;
- import java.io.*;
- import java.util.ArrayList;
- import java.util.Iterator;
- import java.util.List;
- import javax.servlet.*;
- import javax.servlet.http.*;
- import org.dom4j.*;
- import com.cache.*;
- public class AutoCompleteServlet extends HttpServlet {
- private List names = new ArrayList();
- public void init(ServletConfig config) throws ServletException {
- //这里主要应结合数据库的相关数据。并添加到names 数组中。
- names.add("abe");
- names.add("abeo");
- names.add("a王");
- names.add("ahner");
- names.add("javap");
- names.add("marcus");
- names.add("北沟");
- names.add("marge");
- names.add("北京猪");
- names.add("北京");
- names.add("上海");
-
- }
- protected void doPost(
- HttpServletRequest request,
- HttpServletResponse response)
- throws ServletException, IOException {
- response.setCharacterEncoding("UTF8");
- response.setContentType("text/xml");
- response.setHeader("Cache-Control", "no-cache");
- String prefix =new String(request.getParameter("names").getBytes("ISO-8859-1"),"UTF8");
- NameService service = NameService.getInstance(names);
- List matching = service.findNames(prefix);
- LogUtil.log(Integer.toString(matching.size()));
- if ( //产生并输出xml
- matching.size() > 0) {
- PrintWriter out = response.getWriter();
- Document document = DocumentHelper.createDocument();
- Element root = document.addElement("response");
- Element name = null;
- Iterator iter = matching.iterator();
- while (iter.hasNext()) {
- String name1 = (String) iter.next();
- name = root.addElement("name");
- name.setText(name1);
- }
- String s = root.asXML();
- LogUtil.log(s);
- out.write(s);
- out.close();
- } else {
- response.setStatus(HttpServletResponse.SC_NO_CONTENT);
- }
- }
-
- }
复制代码- /**
- * 创建日期 2006-2-16
- * @author
- */
- package cn.ht;
- import java.util.ArrayList;
- import java.util.Iterator;
- import java.util.List;
- public class NameService {
- private List names;
- /** Creates a new instance of NameService */
- private NameService(List list_of_names) {
- this.names = list_of_names;
- }
- public static NameService getInstance(List list_of_names) {
- return new NameService(list_of_names);
- }
- public List findNames(String prefix) {
- List matches = new ArrayList();
- Iterator iter = names.iterator();
- while (iter.hasNext()) {
- String name = (String) iter.next();
- // 用String的 startsWith() 方法查找符合的选项
- if (name.startsWith(prefix)) {
- boolean result = matches.add(name);
- }
- }
- return matches;
- }
-
- }
复制代码
源码下载:http://file.javaxxz.com/2014/10/12/234848703.zip |
|