介绍 & lt; % @ page 语言=癹ava", contentType=皌ext/html;, charset=UTF-8"
,pageEncoding=癠TF-8" %比;
& lt; ! DOCTYPE html PUBLIC “-//W3C//DTD html 4.01,过渡//EN",“http://www.w3.org/TR/html4/loose.dtd"比;
& lt; html>
& lt; head>
& lt; title> ajax搜索& lt;/title>
& lt; script 类型=拔谋?javascript"比;//获得更多关联信息的函数
function getMore () {
,var xmlHttp;
,//首先获得用户的输入
,var content =, . getelementbyid (“keyword");
,如果https://www.yisu.com/zixun/=(content.value=" ") {
keywordBlur();//执行一下清空方法,使搜索框在无数据的时候,下方残留数据也动态清空
返回;
}//警报(content.value);//要给服务器发送用户输入的内容,要创建对象,叫XmlHttp对象//xmlHttp=获得xmlHttp对象
xmlHttp=CreatXMLHttp ();//警报(xmlHttp);//要给服务器发送数据
var url=" serch ?关键字=" +逃脱(content.value);//如果不用逃避这个函数转化一下的话,传中文会有问题//正确的表示javascript的脚本会在发送()方法之后继续执行,而不会等待来自服务器的相应的
xmlHttp.open(“获得”,url,真的);//xmlHttp绑定一个回调方法去接受服务器传来的相,应会在xmlHttp状态改变的时候被调用//xmlHttp有0 ~ 4的状态,只关心4的方法//4为完整的状态,表示交互完成,当交互完成时才会调用回调方法
xmlHttp.onreadystatechange=回调;
xmlHttp.send (null);//发送里面发送的是内容体,但参数在URL里已经都写完的了//回调函数==! !注意这里回调方法要在方法内创建,因为创建的xmlHttp对象不是全局变量//是在getMore()方法里创建的,可以将变量提取出来,变成全局变量
回调函数(){
如果(xmlHttp.readyState==4) {//200代表服务器相应成功……404代表资源未找到. . 500服务器内部错误
如果(xmlHttp.status==200) {//交互成功,获得相应的数据,是文本格式
结果var=xmlHttp.responseText;//解析json格式
var json=eval("(“+ +”结果)");//要在两边加个小括号,js才能认识//获得数据之后就可以开始展示了。在输入框的下边展示
setContent (json);
}
}
}//设置关联数据展示,参数代表的是服务器传递过来的关联数据
函数setContent(内容){//setLocation();//设置跟输入框一样宽度
keywordBlur();//在每次得到值之前先清空一下之前的残留数据
var大?contents.length;//根据关联的数据长度,来生成多少//设置内容
(var=0;我<大小;我+ +){//不用列表末尾()方法是因为不同浏览器可能不兼容该方法
var nextNode=[我]内容;//代表json格式的第i个元素
var启动=content_table_body.insertRow();//创建行
var newCell=newRow.insertCell();//创建单元格
newCell.innerHTML=[我]内容;//将数据赋值给单元格
}
}
}//获得XmlHttp对象
函数CreatXMLHttp () {//要考虑不同浏览器的写法//大多数浏览器使用
var xmlHttpReq;
如果(window.XMLHttpRequest){//火狐
xmlHttpReq=new XMLHttpRequest ();
其他}{/*如果(window.ActiveXObject) {
xmlHttpReq=neww ActiveXObject (“Microsoft.XMLHTTP”);//例如ie有很多版本,不一定能创建出来这个对象,所以要添加以下一个判断//换一种方法,保证创建
如果(! xmlHttp) {
xmlHttpReq=new ActiveObject (“Msxml2.XMLHTTP”);
}
} *///一定要如下格式写上述格式火狐IE亲测不好使
{//IE
xmlHttpReq=new ActiveXObject (“Microsoft.XMLHTTP”);
}
抓住(e) {
尝试{//IE浏览器
xmlHttpReq=new ActiveXObject (“Msxml2.XMLHTTP”);
}
抓住(e) {
}
}
}
返回xmlHttpReq;
}//失去焦点的时候
函数keywordBlur () {//要获得身体的元素长度,才能知道要遍历多少次
var contentTableBody=. getelementbyid (“content_table_body”);
var大?contentTableBody.childNodes.length;//因为是删除子节点,所以是从后往前才能删,同二叉树,删除子节点
(var=号;我>=0;我——){
contentTableBody.removeChild (contentTableBody.childNodes[我]);
}
. getelementbyid (“popDiv”) .style.border=懊挥小?
}>
小编给大家分享一下Servlet + Ajax如何实现智能搜索框智能提示功能,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
利用无刷新技术智能变换搜索框的提示,同百度搜索
效果图
<强>其基本原理:
1。给搜索框编写js绑定事件onkeyup(键盘输入时),聚焦事件(当鼠标点击搜索框外的时候清空提示)
2。首先获得用户输入,之后将获得的数据传给服务器,服务器将数据传给后台,后台获取服务器传来的数据进行处理,得到关联数据,向前端返回json格式,前端通过回调函数,将返回来的json解析成文本,将文本传输到搜索框下方的展示窗
如下为支持json的jar包
搜索。jsp
