啊啊啊,经常熬夜了。今日学了ajax帮我的觉得便是,”哎哟喂“Ajax好炫酷哦,(额。。。后端开发狗,触碰来到大前端的风采了),很晚了還是奔向主题把。Let's go!

网页搜索弹出框,我想大家都很了解了把,是什么样子因为我就已不过多阐释。直接看编码

来大家写一个简单的jsp页面 Look! 是这一模样的

使用Ajax模仿百度搜索框的自动提示功能实例 提示 搜索框 百度 Ajax AJAX相关  第1张

下边是编码:

<%@ 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>Test Baidu</title>
 </head>
 <body>
 	<!--
  	文字文本框
  -->
 	<div id="serach">
 		<input type="text" name="text" id="text" />
 		<input type="submit" value="检索" />
 	</div>
 	<!--
  	提醒下拉列表
  -->
  <div id="tips" style="display: none; 
  	width: 171px; border: 1px solid pink";>
  </div>
 	</body>
 	<script>
 		window.onload=function(){
 			//获得文字文本框
 			var textElment = document.getElementById("text");
 			//获得下弹出框
 			var div = document.getElementById("tips");
 			textElment.onkeyup=function(){
 				//获得客户键入的值
 				var text = textElment.value;
 				//假如输入框中沒有值,则下拉列表被掩藏,无法显示
 				if(text==""){
 					div.style.display="none";
 					return;
 				}
 				//获得XMLHttpRequest目标
 				var xhr = new XMLHttpRequest();
 				//撰写回调函数
 				xhr.onreadystatechange=function(){
 					//分辨回调函数的标准是不是提前准备齐备
 					if(xhr.readyState==4){
 						if(xhr.status==200){
 							//取的服务端传到的数据信息
 							var str = xhr.responseText;
 							//分辨传到的数据信息是不是为空,倘若则立即回到,无法显示
 							if(str==""){
 								return;
 							}
 							//大家可能在服务端把数据信息用 , 分隔,自然这儿还可以应用json
 							var result = str.split(",");
 							var childs = "";
 							//解析xml結果集,将結果集中化的每一条数据信息用一个div显示信息,把全部的div放进到childs中
 							for(var i=0; i<result.length;i  ){
 								childs  = "<div onclick='Write(this)' onmouseout='recoverColorwhenMouseout(this)' onmouseover='changeColorwhenMouseover(this)'>" result[i] "</div>";
 							}
 							//把childs 这div结合放进到往下拉弹出框的父div中,上边大家以获得了
 							div.innerHTML=childs;
 							div.style.display="block";
 						}
 					}
 				}
 				//建立与网络服务器的联接
 				xhr.open("GET","${pageContext.request.contextPath}/test?text=" text);
 				//推送
 				xhr.send();
 			}
 		}
 		//鼠标悬停时更改div的色调
 		function changeColorwhenMouseover(div){
 			div.style.backgroundColor="pink";
 		}
 		//电脑鼠标移除时回应div色调
 		function recoverColorwhenMouseout(div){
 			div.style.backgroundColor="";
 		}
 		//当鼠标带点一下div时,将div的值赋给键入输入框
 		function Write(div){
 			//将div中的值赋给输入框
 			document.getElementById("text").value=div.innerHTML;
 			//让往下拉弹出框消退
 			div.parentNode.style.display="none";
 		}
 	</script>
</html>

再看servlet:

package com.zhuxingyi.servlet;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
/**
 * 百度下拉框服务端
 */
@WebServlet("/test")
public class test extends HttpServlet {
	private static final long serialVersionUID = 1L;
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		//获得前端开发传到的数据信息
		String text = request.getParameter("text");
		//大家在这儿也還是向list结合中加上数据信息,仿真模拟数据库查询的查寻实际操作
		System.out.println(text);
		List<String> list =new ArrayList<>();
		list.add("zhuxingyi");
		list.add("zhuwei");
		list.add("zhuyuanz");
		list.add("zhude");
		//将数据信息 转化成字符串数组
		String str = "";
		if(text.startsWith("z")) {
			for(int i=0;i<list.size();i  ) {
				if(i>0) {
					str =",";
				}
				str =list.get(i);
			}
			//将解决好的数据信息传到给手机客户端
			response.getWriter().write(str);
		}
	}
	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}
}

演试一下看一下呢,(非常尴尬,小编还不容易做gif图呢,诸位先看一下静态数据图把。。。)

键入‘z'试一试呢:

使用Ajax模仿百度搜索框的自动提示功能实例 提示 搜索框 百度 Ajax AJAX相关  第2张

点一下一下试一试呢:

使用Ajax模仿百度搜索框的自动提示功能实例 提示 搜索框 百度 Ajax AJAX相关  第3张

Ok了,这就是一个简易的效仿百度搜索的输入框啦,之上有不够的地区你一定要强调哦,感谢。拜啦

之上这篇应用Ajax效仿搜索框的全自动提醒作用案例便是我共享给大伙儿的所有内容了,期待能给大伙儿一个参照,也期待大伙儿多多的适用。