欢迎来到雅狐站长网!
兔子CDN

AJAX

当前位置:主页 > 网络编程 > AJAX >

Servlet+Ajax实现智能搜索框智能提示功能

时间:2021-05-03 08:54:45|栏目:AJAX|点击:

利用无刷新技术智能变换搜索框的提示,同百度搜索

效果图

这里写图片描述

其基本原理:

1.给搜索框编写js绑定事件onkeyup(键盘输入时)、onfocus(当鼠标点击搜索框外的时候清空提示)

2.首先获得用户输入、之后将获得的数据传给服务器,服务器将数据传给后台,后台获取服务器传来的数据进行处理,得到关联数据,向前端返回json格式,前端通过回调函数,将返回来的json解析成文本,将文本传输到搜索框下方的展示窗

如下为支持json的jar包

这里写图片描述

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>
<title>ajax搜索</title>
<script type="text/javascript">
//获得更多关联信息的函数
function getMore(){
 var xmlHttp;
 //首先获得用户的输入
 var content = document.getElementById("keyword");
 if(content.value==""){
  keywordBlur();//执行一下清空方法,使搜索框在无数据的时候,下方残留数据也动态清空
  return;
 }
 //alert(content.value);
 //要给服务器发送用户输入的内容,要创建对象,叫XmlHttp对象
 //xmlHttp=获得XmlHttp对象
 xmlHttp=CreatXMLHttp();
 //alert(xmlHttp);
 //要给服务器发送数据
 var url="serch?keyword="+escape(content.value);
 //如果不用escape这个函数转化一下的话,传中文会有问题
 //true表示javascript的脚本会在send()方法之后继续执行,而不会等待来自服务器的相应
 xmlHttp.open("GET",url,true);
 //xmlHttp绑定一个回调方法去接受服务器传来的相应,会在xmlHttp状态改变的时候被调用
 //xmlHttp有0~4的状态,只关心4的方法
 //4为complete状态,表示交互完成,当交互完成时才会调用回调方法
 xmlHttp.onreadystatechange=callback;
 xmlHttp.send(null);//send里面发送的是内容体,但参数在URL里已经都写完了
 //回调函数==!!注意 这里回调方法要在方法内创建,因为创建的xmlHttp对象不是全局变量
 //是在getMore()方法里创建的,可以将变量提取出来,变成全局变量
 function callback(){
  if (xmlHttp.readyState==4){
   //200代表服务器相应成功。。。404代表资源未找到。。500服务器内部错误
   if(xmlHttp.status==200){
    //交互成功,获得相应的数据,是文本格式
    var result=xmlHttp.responseText;
    //解析json格式
    var json=eval("("+result+")");//要在两边加个小括号,js才能认识
    //获得数据之后就可以开始展示了。在输入框的下边展示
    setContent(json);
   }
  }
 }
 //设置关联数据展示,参数代表的是服务器传递过来的关联数据
 function setContent(contents){
  //setLocation();//设置跟输入框一样宽度
  keywordBlur();//在每次得到值之前先清空一下之前的残留数据
  var size=contents.length;//根据关联的数据长度,来生成多少<tr>
  //设置内容
  for(var i=0;i<size;i++){
   //不用appendChild()方法是因为不同浏览器可能不兼容该方法
   var nextNode=contents[i];//代表json格式的第i个元素 
   var newRow=content_table_body.insertRow();//创建行
   var newCell=newRow.insertCell();//创建单元格
   newCell.innerHTML=contents[i];//将数据赋值给单元格
  } 
 }
}
//获得XmlHttp对象
function CreatXMLHttp(){
 //要考虑不同浏览器的写法
 //大多数浏览器使用
 var xmlHttpReq;
 if(window.XMLHttpRequest){//火狐
  xmlHttpReq=new XMLHttpRequest();
 }else{
  /* if(window.ActiveXObject){
   xmlHttpReq=neww ActiveXObject("Microsoft.XMLHTTP");
   //例如ie有很多版本,不一定能创建出来这个对象,所以要添加以下一个判断
   //换一种方法,保证创建
   if(!xmlHttp){
    xmlHttpReq=new ActiveObject("Msxml2.XMLHTTP");
   }
  } */
  //一定要如下格式写 上述格式火狐IE亲测不好使
   try { //IE
    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
   }
   catch (e) {
    try {//IE 浏览器
     xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP");
    }
    catch (e) {
    }
   }
 }
 return xmlHttpReq;
}
//失去焦点的时候
function keywordBlur(){
 //要获得body的元素长度,才能知道要遍历多少次
  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"; 
}
</script>
<style type="text/css">
/* #mydiv{
 position: absolute;
 left:30%;
 top:50%;
 margin-left: 100px;
} */
.mouseOver{
 background: #708090;
 color: #FFFAFA;
}
.mouseOut{
 background: #FFFAFA;
 color: #000000;
}
</style>
</head>
<body>
 <div id="mydiv">
  <!-- 输入框 -->
  <input type="text" id="keyword" size="50" onblur="keywordBlur()" onkeyup="getMore()" onfocus="getMore()"/>
  <input type="button" value="百度一下" wise="50px">
  <!-- 下面是内容展示的区域 -->
  <div id="popDiv">
   <table id="contentTable" bgcolor="#FFFAFA" border="0" cellpadding="0" cellspacing="0">
    <tbody id="content_table_body">
    <!-- 这个是动态查询出来的数据显示的地方 -->
     <!-- <tr><td>ajax1</td></tr>
    <tr><td>ajax2</td></tr>
    <tr><td>ajax3</td></tr> -->
    </tbody>
   </table>
  </div>
 </div>
</body>
</html>

上一篇:给Ajax返回的HTML标签动态添加样式的方法

栏    目:AJAX

下一篇:Ajax跨域请求COOKIE无法带上的完美解决办法

本文标题:Servlet+Ajax实现智能搜索框智能提示功能

本文地址:http://www.cnzzww.cn/AJAX/56536.html

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ: | 邮箱:111#qq.com(#换成@)

Copyright © 2015-2020 雅狐站长网 版权所有 苏ICP备20040415号