理论分析：
1.在搜索框输入关键字
2.在浏览器将关键字异步发送给服务器
3.服务器经过处理，将相应的数据以JSON格式返回给客户端
4.客户端接受到服务器的响应数据，解析之后使用js操作dom显示数据。
search.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<link rel="shortcut icon" href="#"/>
<style type="text/css">
#mydiv{
position:absolute;
left:50%;
top:40%;
margin-left:-200px;
margin-top:-50px;
}
#text{
height:30px;
}
.mouseOver{
background: #708090;
color:#FFFAFA;
}
.mouseOut{
background: #FFFAFA;
color:#000000;
}
</style>
</head>
<body>
<div id="mydiv">
<input id ="text" type= "text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()"/>
<input id ="text" type="button" value="百度一下" width="50px"/>
<div id="popdiv">
<table id="content_table" bgcolor="#FFFAFA" border="0" cellspaceing="0" cellpadding="0">
<tbody id="content_table_body"></tbody>
</table>
</div>
<script type="text/javascript">
var xmlHttp;
//获得用户输入内容关联信息的函数
function getMoreContents(){
//首先要获得用户的输入
var content = document.getElementById("keyword");
//然后要给服务器发送输入的内容，因为我们采用ajax异步发送数据，所以我们要是用一个对象，叫做XmlHttp对象
if(content.value ==""){
clearContent();
return;
}
//else{
xmlHttp = createXMLHttp();
//要发送服务器发送数据
var url="search?keyword="+escape(content.value);
//true表示JavaScript脚本会在send()方法之后继续，而不等待来自服务器的响应
xmlHttp.open("GET",url,true);
//xmlHttp绑定回调方法，这个回调方法会在xmlHttp状态改变的时候被调用，xmlHttp状态0-4，我们只关心4（complete），所以当完成之后，在调用回调方法才有意义。
xmlHttp.onreadystatechange = callback;
xmlHttp.send(null);
}
//}
//获得XmlHttp对象
function createXMLHttp(){
//对于大多数的浏览器都适用
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}
//要考虑浏览器兼容性
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
if(!xmlHttp){
xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
}
}
return xmlHttp;
}
//回调函数
function callback(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//交互成功，获得相应的数据，是文本格式，json也是文本格式
var result = xmlHttp.responseText;
//解析获得数据
var json = eval("("+result+")");
//获取数据之后，可以动态显示数据，将数据展示到输入框下面
setContent(json);
}
}
}
//设置关联数据的展示，参数代表服务器传递过来的关联数据
function setContent(contents){
clearContent();
//首先或的关联数据的长度，确定生成多少<tr>
setLocation();
var size = contents.length;
//设置内容
for(var i=0;i<size;i++){
var nextNode = contents[i];//代表json数据的第i个元素
var tr = document.createElement("tr");
var td = document.createElement("td");
td.setAttribute("boder","0");
td.setAttribute("bgcolor","#FFFAFA");
td.onmouseover=function(){
this.className= 'mouseOver';
};
td.onmouseout= function(){
this.className = 'mouseOut';
};
td.onclick =function(){
//这个方法实现的是当鼠标点击一个关联数据，关联数据自动设置为输入框的数据
};
var text = document.createTextNode(nextNode);
td.appendChild(text);
tr.appendChlid(td);
document.getElementById("content_table_body").appendChild(tr);
}
}
//清空数据
function clearContent(){
var contentTableBody = document.getElementById("content_table_body");
var size = contentTableBody.childNodes.length;
for(var i=size-1;i>=0;i--){
contentTableBody.removeChild(contentTableBody.childNodes[i]);
}
document.getElementById("popdiv").style.border="none";
}
//当输入框失去焦点，关联信息清空
function keywordBlur(){
clearContent();
}
function setLocation(){
var content = document.getElementById("keyword");
var width = content.offsetWidth;
var left = content["offsetLeft"];
var top = content["offsetTop"]+content.offsetHeight;
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>
</body>
</html>
SearchServlet.java
package com.imooc;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import net.sf.json.JSONArray;
public class SearchServlet extends HttpServlet {
static List<String> datas = new ArrayList<String>();
static{
List<String> datas = new ArrayList<String>();
datas.add("ajax");
datas.add("ajax post");
datas.add("becky");
datas.add("bill");
datas.add("james");
datas.add("jerry");
}
@Override
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException{
request.setCharacterEncoding("utf-8");
response.setCharacterEncoding("utf-8");
// 首先获得客户端发送的数据keyword
String keyword = request.getParameter("keyword");
// 获得关键字之后进行处理，得到相关数据
List<String> listData = getData(keyword);
// 返回json格式
// System.out.println(JSONArray.fromObject(listData));
response.getWriter().write(JSONArray.fromObject(listData).toString());
}
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;
}
}
web.xml
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
<display-name></display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list>
<servlet>
<servlet-name>search</servlet-name>
<servlet-class>com.imooc.SearchServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>search</servlet-name>
<url-pattern>/search</url-pattern>
</servlet-mapping>
</web-app>
9270
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
