使用ajax技术实现模拟百度搜索功能，本案例使用原生态xmlhttprequest对象，GET方法通讯，后台使用map保存搜索数据，查询到对应数据后，返回xml格式数据，前端使用responseXML属性返回xml格式数据，结合JavaScript定位下拉框，显示搜索数据。
ajax封装库（ajax.js）
var xmlhttp=null;
//创建XMLHttpRequest对象
function createHttpRequest(){
if(window.XMLHttpRequest){ //Mozilla 浏览器
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
try{
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); //新版IE
}catch(e){
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
xmlhttp = null;
}
}
}
if(!xmlhttp){ //创建XMLHttpRequest失败
alert("不能创建XMLHttpRequest对象实例");
}
}
//发送函数
function sendRequest(method,url,param,callbackHandler){
//创建对象
createHttpRequest();
//绑定事件,后台返回的数据，通过callback方法处理
xmlhttp.onreadystatechange = callbackHandler;
if(method=="get" || method=="GET"){
//初始化发送信息
xmlhttp.open(method,url + "?" + param,true);
xmlhttp.send(null);
}
if(method=="post" || method=="POST"){
//初始化发送信息
xmlhttp.open(method,url,true);
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xmlhttp.send(param);
}
}前端页面（searchsuggest.html）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb18030" />
<title>Ajax应用举例</title>
<script type="text/javascript" src="../js/ajax.js"></script>
<script type="text/javascript">
function search(){
var inputWord = document.getElementById('inputWord').value;
var url="/ajaxProj/T2/searchsuggest.jsp";
var params = 'inputWord='+inputWord;
sendRequest('GET',url,params,display);
}
//根据提交部门返回的职员列表动态加载数据
function display(){
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
var xmlDoc = xmlhttp.responseXML;
clearDivData();
changeDivData(xmlDoc);
} else { //页面不正常
alert("您请求的页面有异常");
}
}
}
//清除下拉提示框中已有的数据
function clearDivData(){
var tbody = document.getElementById('wordsListTbody');
//获取所有的行标签
var trs = tbody.getElementsByTagName('tr');
//循环删除所有的行
for(var i=trs.length-1;i>=0;i--){
tbody.removeChild(trs[i]);
}
// for(var i=0;i<=trs.length-1;i++){
// tbody.removeChild(trs[i]);
// }
}
//实际将数据加入下拉提示框
function changeDivData(xmlDoc){
//alert(xmlDoc.xml);
var words = xmlDoc.getElementsByTagName('word');
var tbody = document.getElementById('wordsListTbody');
//alert(words[0].firstChild.nodeValue);
for(i=0;i<words.length;i++){
//创建行
var newTr = document.createElement('tr');
var newCell = document.createElement('td');
//var text = words[i].firstChild.nodeType;
var textNode = document.createTextNode(words[i].firstChild.data);
newCell.appendChild(textNode);
newTr.appendChild(newCell);
tbody.appendChild(newTr);
}
if(words.length>0){
document.getElementById('wordsListDiv').style.visibility='visible';
}else{
document.getElementById('wordsListDiv').style.visibility='hidden';
}
}
//设置下拉提示框的位置
function setDivPosition(){
var input = document.getElementById('inputWord');
var listdiv = document.getElementById('wordsListDiv');
listdiv.style.left=(input.offsetLeft + 9)+'px';
listdiv.style.border='blue 1px solid';
listdiv.style.top=(input.offsetTop+input.offsetHeight*3/2 +2) + 'px' ;
listdiv.style.width=input.offsetWidth+'px';
}
</script>
</head>
<body onload="setDivPosition()">
<p>搜索字符串:<input type="text" id="inputWord" onKeyUp="search()"/></p>
<div id="wordsListDiv" style="position:absolute;visibility:hidden">
<table id="wordsListTable">
<tbody id="wordsListTbody"><tr><td>test</td></tr></tbody>
</table>
</div>
</body>
</html>后台页面功能（searchsuggest.jsp）
<%@ page contentType="text/xml; charset=gb18030"%><%@ page import="java.util.*" %><%
HashMap map = new HashMap();
map.put("a","<words><word>a</word><word>ab</word><word>abc</word><word>abcd</word><word>abcde</word></words>");
map.put("ab","<words><word>ab</word><word>abc</word><word>abcd</word><word>abcde</word></words>");
map.put("abc","<words><word>abc</word><word>abcd</word><word>abcde</word></words>");
map.put("abcd","<words><word>abcd</word><word>abcde</word></words>");
map.put("abcde","<words><word>abcde</word></words>");
String inputWord= request.getParameter("inputWord");
out.write("<?xml version='1.0' encoding='gb2312' ?>");
//containsKey判断map中是否包含有inputWord关键字的可以
if(!map.containsKey(inputWord)){
out.println("<words></words>");
}else{
out.println(map.get(inputWord).toString());
}
%>说明：
1、页面顶部不能有任何注释行，不能有空格；
2、page指令与jsp代码之间不能有空行，不能有空格。
运行效果
本人从事软件项目开发20多年，2005年开始从事Java工程师系列课程的教学工作，录制50多门精品视频课程，包含java基础，jspweb开发，SSH,SSM，SpringBoot，SpringCloud,人工智能，在线支付等众多商业项目，每门课程都包含有项目实战，上课PPT，及完整的源代码下载，有兴趣的朋友可以看看我的在线课堂
讲师课堂链接：https://edu.csdn.net/lecturer/893
