JSP部分：
<%@ page language="java" import="java.util.*" pageEncoding="gbk"%>
<!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 = "AutoCompleteServlet?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;
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[i].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[i]);
}
completeDiv.style.border = "none";
}
</script>
</head>
<body>
<h1>
Ajax Auto Complete Example
</h1>
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>
</body>
</html>
Servlet部分：
public class AutoCompleteServlet extends HttpServlet {
private List names = new ArrayList();
public void init(ServletConfig config) throws ServletException {
names.add("Abe");
names.add("Abel");
names.add("Abigail");
names.add("Abner");
names.add("Abraham");
names.add("Marcus");
names.add("Marcy");
names.add("Marge");
names.add("Marie");
}
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(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();
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);
}
}
}
public class NameService {
private List names;
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) {
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;
}
}
分享到：
相关推荐
2. **自动跟踪 AJAX 调用**：识别并跟踪页面中的 AJAX 调用，确保爬虫能够遍历所有相关数据源。 3. **延迟渲染处理**：有些网站会使用延迟加载技术（如 infinite scrolling），Scrapy_AJAX_Utils 可以帮助爬虫识别...
标题 "Ajax+JSON 搜索框自动完成提示功能" 涉及的是网页开发中的一个常见技术，用于提高用户输入体验。Ajax（异步JavaScript和XML）是Web开发中的一种技术，它允许页面在不重新加载整个页面的情况下与服务器交换数据...
通过引入AJAX，我们可以使TextBox拥有更多动态特性，如实时验证、自动完成、延迟加载等。这样的改进可以减少服务器的负载，同时提供即时反馈，提高用户界面的响应速度。 在【ASP_TextBox_AJAX_Extension_...
"Ajax_Jquery_Demo"这个压缩包文件提供了学习和实践这两个技术的机会。下面，我们将深入探讨Ajax和jQuery的核心概念、用法及其在Web开发中的应用。 ### Ajax Ajax的核心理念是局部刷新，它通过XMLHttpRequest对象...
在滚动加载更多内容或自动刷新新闻列表的场景下，定时器可以确保用户在浏览过程中不会感到内容突然变化。 **3.3 节能模式** 对于需要节省服务器资源或减少网络拥堵的情况，可以通过调整定时器间隔，降低请求频率。 ...
【Ajax自动完成技术详解】 Ajax（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。这种技术使得用户可以与网页进行更流畅、更快捷的交互，提高了用户体验。在本...
提供的DEMO文件可能包含了一个简单的Ajax自动完成的示例。通常，DEMO会包括HTML、JavaScript和ASP代码，以及可能的CSS样式文件。HTML文件用于展示界面和绑定事件；JavaScript文件实现Ajax逻辑，与服务器交互；ASP...
在实际开发中，使用"ajax_jar包"这样的库可以简化Ajax的实现过程，通常会提供更方便的API，比如封装好的请求方法，自动处理JSON数据等。但需要注意的是，引入外部库或jar包也会增加项目体积，可能影响加载速度，因此...
在本文中，我们将深入探讨如何使用Ajax实现文本框的自动完成功能，这通常是一个用户友好的特性，可以极大地提升用户体验。该示例中，我们将关注的关键知识点包括.NET框架、Ajax控件库、文本框事件处理以及与数据库的...
6. **回调函数**：Ajax请求完成后，通常会调用预设的回调函数处理返回的数据。 【Silverlight 知识点详解 】 1. **Silverlight介绍**：Silverlight是微软开发的一个插件，用于提供丰富的Web应用程序体验，包括...
总结来说，这个项目提供了一个实用的示例，展示了如何利用Ajax、JSP和Servlet技术实现一个无数据库的自动完成功能，对于学习和理解这些技术的应用有很好的参考价值。开发者可以通过研究这个源代码，学习到如何在实际...
**正文** ...总之，"Exam_AJAJ_AutoCompleteTest"是一个很好的学习和演示Ajax自动补全功能的例子，它涵盖了Ajax的核心概念和技术，对于想要掌握Web交互设计的开发者来说，这是一个非常有价值的实战练习。
3. **AutoComplete**：提供自动完成功能，常见于搜索框和表单输入，提升用户输入体验。 4. **Heartbeat**：保持客户端与服务器的连接活跃，确保长时间运行的会话不会因网络问题而中断。 接下来，我们关注DWR与...
**Ajax控件自动完成（AutoComplete）** Ajax控件自动完成是一种常见的前端技术，它显著提高了用户在网页上的交互体验，特别是在输入数据时。在网页的搜索框或用户登录界面，这种技术尤其有用，因为它能预测并显示...
7. 返回响应：控制器方法执行完成后，Spring会自动将返回的对象转换为JSON，并发送回客户端。 综上所述，"ajax_json.tgz"中的"springdemo"可能包含了一个使用Ajax和JSON在Spring环境中实现数据交互的示例项目。这个...
这些库提供了更高级的功能，如自动处理错误、支持Promise等。 总的来说，Ajax_001【返回String类型】的知识点涵盖了如何使用原生JavaScript进行Ajax请求，以及如何处理返回的字符串数据。了解并熟练掌握这一技术，...
* 使用javascript实现自动完成函数autoComplete() * 使用ajax技术发送请求到服务器，并显示服务器返回的结果 * 使用DOM操作显示服务器返回的结果，并形成下拉表 * 使用键盘选择下拉项的函数selItemByKey() 五、知识...
标题中的"Ajax jQuery 实现自动完成的所有js和css文件"是指使用Ajax技术和jQuery库来创建一个功能，即在用户输入时提供自动填充建议。这种功能常见于搜索框、表单输入等场景，能够提高用户体验，减少用户手动输入的...
在现代Web开发中，AJAX（Asynchronous JavaScript and XML）技术是不可或缺的一部分，它使得页面在无需刷新整个页面的情况下能够与服务器进行数据交互，提供更好的用户体验。然而，在使用AJAX时，开发者可能会遇到...