Ajax学习采用Eclipse，
输入a自动提示以下内容。选择下拉框内容变化到输入框内。
首先建立前台页面：search.jsp
<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<style type="text/css">
#mydiv{
position:absolute;
left:50%;
top:50%;
/*先居中在调试 */
margin-left:-200px;
margin-top:-50px;
}
.ky{
border:1px solid ;
height:20px;
}
.mouseOver{
background:#708090;
color:#fff;
}
.mouseOut{
background:#FFFAFA;
color:#000000;
}
</style>
<script type="text/javascript">
var xmlHttp;
function getMoreContents(){
//获得用户输入的关联内容
var content = document.getElementById("keyword");
if(content.value ==""){
clearContent();
return;
}
//给服务器发送数据 ，采用的是 Ajax异步传输数据。
//所以建立一个Ajax的对象xmlHttp,
xmlHttp = createXMLHttp();//xmlhttp= 获得 XmlHttp的对象 ；
//要给服务器发送数据
var url ="search?keyword="+escape(content.value);
xmlHttp.open("GET",url,true);//true表示会在send()方法之后继续执行。
//xmlhttp绑定回调方法 ，当xmlHttp的状态改变的时候才会调用 此方法
//xmlhttp的四种状态我们只关心状态4：（complete）,所以说在完成之后调用回调方法才有意义
xmlHttp.onreadystatechange = callback;//onreadystatechange在这里是小写不能大写 。
xmlHttp.send(null);
//alert(xmlHttp);
}
//创建XMLHttp对象的函数
function createXMLHttp(){
var xmlHttp;
if(window.XMLHttpRequest)
{
xmlHttp = new XMLHttpRequest();
}
if(window.ActiveXObject){
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
if(!xmlHttp){
xmlHttp = new ActiveXOject("Msxml2.HTTP");
}
}
return xmlHttp;
}
//回调函数
function callback(){
if(xmlHttp.readyState == 4){
//4代表完成200代表服务器响应 、 404代表资源未找到 ，500代表 内部出现错误
if(xmlHttp.status == 200){
//定义交互成功时候，获取的数据是 Text数组的格式 。
var result = xmlHttp.responseText;
//结息获取数据
var json = eval("("+result+")");
//获得数据后就可以动态的展示数据了，并把数据展示在下拉框的下方 ，
//在这里打印一下json，看看是否前后台交互成功
setContent(json);//将json数据传输到setContent()方法中
}
}
}
//设置关联数据的展示，参数代表的是服务器传递过来的关联数据
function setContent(contents){
clearContent();
setlocation();
//首先获得关联数据的长度，依次来确定生成多少tr,td
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("border","0");
td.setAttribute("bgcolor","#FFFAFA");
//为td绑定两个样式（鼠标进入和鼠标移出时事件）
td.onmouseover = function(){
this.className = 'mouseOver';
document.getElementById("keyword").value=this.innerHTML;
};
td.onmouseout = function(){
this.className = 'mouseOut';
};
td.onclick = function(){
//方法实现的是，选择关联数据，自动设置为输入框数据
};
//创建一个文本节点
var text = document.createTextNode(nextNode);
td.appendChild(text);
tr.appendChild(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 0px 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 class="ky" 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>
配置web.xml，新建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>search.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>
添加json包,到lib中，全选中，右键Build-path
https://pan.baidu.com/s/1KBrbwj1nAwrVGMuOe-iQPQ
编写后台代码：
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 {
//2018-8-3吕泽坤
static List<String> datas = new ArrayList<String>();
static{
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");
System.out.println("123");
//首先获得客户端发过来的数据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;
}
}
