ajax+servlet实现百度智能小搜索框———慕课课程

来源：互联网发布：淘宝托管公司被骗18万编辑：程序博客网时间：2024/05/17 05:09

本人的第一篇博客

/** * @author xiaohejun * Man Always Remember Love Because of Romance Only. *  */

一.实现效果：
这里写图片描述

1.serach.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"pageEncoding="UTF-8"%><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <title>搜索</title>    <style type="text/css">        #myDiv {            position:absolute;            left: 50%;            top: 30%;            margin-left: -200px;            margin-top: -50px;        }        .mouseOver{            background: #708090;            color: #FFFAFA;        }        .mouseOut{            background: #FFFAFA;            color: #000000;        }    </style>    <script type="text/javascript">        var xmlHttp;        /*获得用户关联信息*/        function getMoreContents() {            // 首先获得用户输入            var content = document.getElementById("keyword");            if(content.value == ""){                return;            }            // 然后给服务器发送用户输入类容，用ajax异步发送请求，获得一个对象，骄傲做xmlHttp            xmlHttp = createXmlHttp();            // 要给服务器发送数据,escape()方法对字符串进行编码            var url="search?keyword=" + decodeURI(content.value);            // 和服务器建立链接,true参数表示javascript脚本会在send()方法之后继续执行，而且不会等待来自服务器的响应            xmlHttp.open("GET",url);            // 绑定一个回调方法，这个会调方法会在xmlHttp状态改变0-4，我们只关心4（complete）这个状态，完成之后，调用回调方法            xmlHttp.onreadystatechange=callback;            xmlHttp.send(null);        }        // 清空之前的数据        function clearContent() {            var tbody = document.getElementById("content_table_body");            var size = tbody.childNodes.length;            for (var i = size-1; i >= 0;i--) {                tbody.removeChild(tbody.childNodes[i]);            }            document.getElementById("popDiv").style.border = "none";        }        //回调函数        function callback() {            if(xmlHttp.readyState==4){                // 服务器响应成功                if(xmlHttp.status==200){                    // 交互成功，获得响应数据                    var result = xmlHttp.responseText;                    // 解析成JSON格式                    var json = eval("("+result+")");                    // 获得数据之后，就可以动态显示这些数据，把这些数据展示到输入框的下面                    setContent(json);                }            }        }        // 设置关联数据的展示        function setContent(contents) {            clearContent();            setLocation();            var size = contents.length;            for (var i = 0; i < size; i++) {                var nextNode = contents[i];                var tr = document.createElement("tr");                var td = document.createElement("td");                td.setAttribute("border","0");                td.bgColor = "white";                td.onmouseover = function () {                    this.className = 'mouseOver';                };                td.onmouseout = function () {                    this.className = 'mouseOut';                }                td.onmousedown = function() {                    document.getElementById("keyword").value = this.innerHTML;                }                var text = document.createTextNode(nextNode);                td.appendChild(text);                tr.appendChild(td);                document.getElementById('content_table_body').appendChild(tr);            }        }        // 获得xmlHttp对象        function createXmlHttp() {            // 对于大多数浏览器适用的            var xmlHttp;            if (window.XMLHttpRequest) {                xmlHttp = new XMLHttpRequest();            }            // 要考虑浏览器的兼容            if (window.ActiveXObiect) {                xmlHttp = new ActiveXObiect("Microsoft.XMLHTTP");                if (!xmlHttp) {                    xmlHttp = new ActiveXObiect("Msxml2.XMLHTTP");                }            }            return xmlHttp;        }        function keywordBlur() {            clearContent();        }        // 设置显示的位置        function setLocation() {            // 关联信息的显示位置要和输入框一致            var content = document.getElementById("keyword");            // 输入框的宽度            var width = content.offsetWidth;            // 到左边框的距离            var left = content["offsetLeft"];            // 到顶部的距离            var top = content["offsetTop"] + content.offsetHeight;            // 获得显示数据的div            var popDiv = document.getElementById("popDiv");            popDiv.style.border = "black 1px solid";            popDiv.style.left = left + "px";            popDiv.style.top = top + "px";            popDiv.style.width = width + "px";            document.getElementById("content_table").style.width = width + "px";        }    </script></head><body><div id="myDiv">    <!-- 输入框 -->    <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()"/>    <input type="button" value="百度一下" width="50px"/>    <!-- 内容展示的区域 -->    <div id="popDiv">        <table id="content_table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0">            <tbody id="content_table_body">            </tbody>        </table>    </div></div></body></html>

2.SearchServlet.java

package com.servlet;import java.io.IOException;import java.util.ArrayList;import java.util.List;import javax.servlet.ServletException;import javax.servlet.annotation.WebServlet;import javax.servlet.http.HttpServlet;import javax.servlet.http.HttpServletRequest;import javax.servlet.http.HttpServletResponse;import net.sf.json.JSONArray;/** * Servlet implementation class search */@WebServlet("/search")public class SearchServlet extends HttpServlet {    private static final long serialVersionUID = 1L;    private static List<String> datas;    /**     * @see HttpServlet#HttpServlet()     */    public SearchServlet() {        super();        // TODO Auto-generated constructor stub    }    /**     * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)     */    static {        datas  = new ArrayList<String>();        datas.add("ajax");        datas.add("ajax post");        datas.add("b啊哈");        datas.add("b哈");        datas.add("这是ajax");        datas.add("你全家都是ajax");    }    public List<String> getData(String keyword) {        List<String> list = new ArrayList<String>();        for (String data : datas) {            if (data.contains(keyword)) {                list.add(data);            }        }        return list;    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException{         response.setCharacterEncoding("UTF-8");        request.setCharacterEncoding("UTF-8");;        String keyword = request.getParameter("keyword");        List<String> listData = getData(keyword);        response.getWriter().write(JSONArray.fromObject(listData).toString());    }    /**     * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)     */    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        // TODO Auto-generated method stub        doGet(request, response);    }}

注意：不可以使用escape()函数编码，已经过时

这里写图片描述

阅读全文

0 0