ajax+servlet实现百度智能提示搜索框–来自慕课课程
- 2020 年 2 月 18 日
- 笔记
/** * @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: 50%; 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()函数编码，已经过时
