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;
}
}
