第6讲：使用ajax技术实现模拟百度搜索功能（xml数据）

CSDN专家-赖老师（软件之家）

已于 2023-06-24 10:29:57 修改

阅读量371

点赞数

分类专栏： Ajax+Jquery学习笔记文章标签： ajax xml 前端 xmlhttprequest responseXML

于 2023-06-23 11:49:56 首次发布

本文链接：https://blog.csdn.net/software7503/article/details/131349111

版权

Ajax+Jquery学习笔记专栏收录该内容

14 篇文章 1 订阅

订阅专栏

使用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

CSDN专家-赖老师（软件之家）

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
第6讲：使用ajax技术实现模拟百度搜索功能（xml数据）

使用ajax技术实现模拟百度搜索功能，本案例使用原生态xmlhttprequest对象，GET方法通讯，后台使用map保存搜索数据，查询到对应数据后，返回xml格式数据，前端使用responseXML属性返回xml格式数据，结合JavaScript定位下拉框，显示搜索数据。
复制链接

扫一扫