Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 340|回复: 0

[AJAX学习]ajax + servlet 实现可以辅助输入的input

[复制链接]
  • TA的每日心情
    开心
    2021-3-12 23:18
  • 签到天数: 2 天

    [LV.1]初来乍到

    发表于 2014-10-12 23:48:49 | 显示全部楼层 |阅读模式
    一、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源文件:
    1. /**
    2. * 创建日期 2006-2-16
    3. * @author  
    4. */
    5. package cn.ht;
    6. import java.io.*;
    7. import java.util.ArrayList;
    8. import java.util.Iterator;
    9. import java.util.List;
    10. import javax.servlet.*;
    11. import javax.servlet.http.*;
    12. import org.dom4j.*;
    13. import com.cache.*;
    14. public class AutoCompleteServlet extends HttpServlet {
    15.         private List names = new ArrayList();   
    16.         public void init(ServletConfig config) throws ServletException {
    17.                 //这里主要应结合数据库的相关数据。并添加到names 数组中。
    18.                 names.add("abe");
    19.                 names.add("abeo");
    20.                 names.add("a王");
    21.                 names.add("ahner");
    22.                 names.add("javap");
    23.                 names.add("marcus");
    24.                 names.add("北沟");
    25.                 names.add("marge");
    26.                 names.add("北京猪");
    27.                 names.add("北京");
    28.                 names.add("上海");
    29.                
    30.         }
    31.         protected void doPost(
    32.                 HttpServletRequest request,
    33.                 HttpServletResponse response)
    34.                 throws ServletException, IOException {
    35.               response.setCharacterEncoding("UTF8");
    36.               response.setContentType("text/xml");
    37.               response.setHeader("Cache-Control", "no-cache");
    38.                 String prefix =new String(request.getParameter("names").getBytes("ISO-8859-1"),"UTF8");           
    39.                 NameService service = NameService.getInstance(names);
    40.                 List matching = service.findNames(prefix);
    41.               LogUtil.log(Integer.toString(matching.size()));
    42.                  if (        //产生并输出xml  
    43.                         matching.size() > 0) {
    44.                         PrintWriter out = response.getWriter();
    45.             Document document = DocumentHelper.createDocument();
    46.             Element root = document.addElement("response");
    47.                         Element name = null;
    48.                         Iterator iter = matching.iterator();
    49.                         while (iter.hasNext()) {
    50.                                 String name1 = (String) iter.next();
    51.                             name = root.addElement("name");
    52.                             name.setText(name1);
    53.                         }
    54.                     String s = root.asXML();
    55.                     LogUtil.log(s);
    56.                     out.write(s);
    57.                     out.close();
    58.                 } else {
    59.                         response.setStatus(HttpServletResponse.SC_NO_CONTENT);
    60.                 }
    61.         }
    62.        
    63. }
    复制代码
    1. /**
    2. * 创建日期 2006-2-16
    3. * @author
    4. */
    5. package cn.ht;
    6. import java.util.ArrayList;
    7. import java.util.Iterator;
    8. import java.util.List;
    9. public class NameService {
    10.         private List names;
    11.         /** Creates a new instance of NameService */
    12.         private NameService(List list_of_names) {
    13.                 this.names = list_of_names;
    14.         }
    15.         public static NameService getInstance(List list_of_names) {
    16.                 return new NameService(list_of_names);
    17.         }
    18.         public List findNames(String prefix) {
    19.                 List matches = new ArrayList();
    20.                 Iterator iter = names.iterator();
    21.                 while (iter.hasNext()) {
    22.                         String name = (String) iter.next();
    23.                 //        用String的 startsWith() 方法查找符合的选项
    24.                         if (name.startsWith(prefix)) {
    25.                                 boolean result = matches.add(name);
    26.                         }
    27.                 }
    28.                 return matches;
    29.         }
    30.        
    31. }
    复制代码


      
      
       
       

         
       

         
       
      



    源码下载:http://file.javaxxz.com/2014/10/12/234848703.zip
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-5-22 22:13 , Processed in 0.392059 second(s), 48 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表