提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  硬件

当前栏目

ajaxjava实现自动完成功能

自动 实现 功能 完成
2023-06-13 09:14:42 时间
百度建议给了我们极大的方便，就像我们跟人说话的时候，你点头他知尾，不用多费唇舌，这样我们与之相处久轻松愉悦。

都知道百度建议是用ajax做的，想要做的快速稳定，可复制可移植就不容易了。网上找了半天，好多都是asp或者php的，还有使用jquery的，但说明性文档太少，花时间研究还不如自己来写。根据一个pdf文档提供的资料，用了小半天时间，终于实现了。在此与大家分享。
原理流程图如下：
 
流程图很明白了，没什么要说的，以下帖代码。
Javascript代码：
复制代码代码如下:

varxmlHttpRequest;
vartable;
vartbody;
vardiv;
varinput;
varcurIndex;
varsize;
varr_userId;
functioncreateXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttpRequest=newActiveXObject("Microsoft.XMLHTTP");
}elseif(window.XMLHttpRequest){
xmlHttpRequest=newXMLHttpRequest();
}
}
//发送请求
functionfindNames(){
if(event.keyCode==38||event.keyCode==40){
}else{
if(input.value.length>0){
createXMLHttpRequest();
varurl=encodeURI(encodeURI("/jforum.html?module=posts&action=findDept&names="+input.value));
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.onreadystatechange=processMatchResponse;
xmlHttpRequest.send(null);
}else{
clearNames();
}
}

}
functionprocessMatchResponse(){
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status==200){
//alert(xmlHttpRequest.status);
//varid=xmlHttpRequest.responseXML.getElementsByTagName("id");
vardept=xmlHttpRequest.responseXML.getElementsByTagName("dept");
varid=xmlHttpRequest.responseXML.getElementsByTagName("id");

setNames(dept,id);

}else{
window.alert("您所请求的页面有异常！");
}
}
}
functionsetNames(depts,ids){
clearNames();
size=depts.length;
if(size>0){
div.style.visibility="visible";
varrow,col1,col2,span;

for(vari=0;i<size;i++){
row=document.createElement("tr");
col1=document.createElement("td");
col1.innerText=depts[i].firstChild.data;
col2=document.createElement("td");
col2.setAttribute("align","right");
col2.setAttribute("id","col2");
col2.setAttribute("width","5%");
span=document.createElement("span");
span.innerText=ids[i].firstChild.data;
span.style.display="none";
col2.appendChild(span);


row.appendChild(col1);
row.appendChild(col2);
row.onmouseout=function(){
this.className="mouseOut";
}
row.onmouseover=function(){
clearSelected();
this.className="mouseOver";
curIndex=this.rowIndex;
}
row.onclick=function(){
input.value=this.cells[0].innerText;
r_userId.value=table.rows[curIndex].cells[1].innerText;
clearNames();
};
tbody.appendChild(row);
}
row=document.createElement("tr");
col2=document.createElement("td");
col1=document.createElement("td");
col2.setAttribute("align","right");
link=document.createElement("a");
link.href="javascript:clearNames();";
link.innerHTML="关闭";
col1.appendChild(link);
row.appendChild(col1);
row.appendChild(col2);
tbody.appendChild(row);
}
}
functionsetPosition(){
input=document.getElementById("names");
r_userId=document.getElementById("r_userId");
table=document.getElementById("table");
div=document.getElementById("div");
tbody=document.getElementById("tbody");

div.style.width=input.offsetWidth-2;
div.style.border="gray1pxsolid";
div.style.left=getLeft(input);
div.style.top=getTop(input)+input.offsetHeight+6;

curIndex=-1;
input.focus();//div.style.left+","+div.style.top
}
functionclearNames(){
varind=tbody.childNodes.length;
for(i=ind-1;i>=0;i--){
tbody.removeChild(tbody.childNodes[i]);
}
div.style.visibility="hidden";
curIndex=-1;
}
functionclearSelected(){
varind=tbody.childNodes.length;
for(vari=ind-1;i>=0;i--){
tbody.childNodes[i].className="mouseOut";
}
}
functionkeyDown(){
if(div.style.visibility=="visible"){
if(event.keyCode==38){
if(curIndex>=0){
table.rows[curIndex].className="mouseOut";
curIndex=curIndex-1;
if(curIndex>=0){
table.rows[curIndex].className="mouseOver";
input.value=table.rows[curIndex].cells[0].innerText;
r_userId.value=table.rows[curIndex].cells[1].innerText;
}
}
}
if(event.keyCode==40){
if(curIndex<size-1){
if(curIndex>=0){
table.rows[curIndex].className="mouseOut";
}
curIndex=curIndex+1;
table.rows[curIndex].className="mouseOver";
input.value=table.rows[curIndex].cells[0].innerText;
r_userId.value=table.rows[curIndex].cells[1].innerText;
}else{
table.rows[curIndex].className="mouseOut";
curIndex=-1;
}
}
}
}
//获取元素的纵坐标
functiongetTop(e){
varoffset=e.offsetTop;
if(e.offsetParent!=null)offset+=getTop(e.offsetParent);
returnoffset;
}
//获取元素的横坐标
functiongetLeft(e){
varoffset=e.offsetLeft;
if(e.offsetParent!=null)offset+=getLeft(e.offsetParent);
returnoffset;
}

代码太多，有点乱，没使用jquery，但更能显示作者的功底。以下分点阐述：
1，setPosition()是用来初始化全局所需要的各个变量，所以在页面加载的时候就要先调用喽，比如在body的onload方法，或者其他方式都可以。
2，findNames()是操作ajax的方法，熟悉ajax的人都可以看明白，里面最主要的是要对参数进行二次编码encodeURI()，相应的在后台要进行解码。
3，processMatchResponse()是回调函数，用来处理从后台返回的数据，这里交给了setNames()来处理。
4，setNames中采用table方式显示提示的内容。这里更多的是JS和node方面的知识。
5，getTop和getLeft方法是获得文本框的绝对位置，相对于浏览器左上角的。
后台java代码如下：
复制代码代码如下:

publicvoidfindDept()throwsIOException{
StringpartDeptName=this.request.getParameter("names");
partDeptName=java.net.URLDecoder.decode(partDeptName,"UTF-8");
Map<String,String>userMap=DataAccessDriver.getInstance().newUserDAO().getDeptByPart("%"+partDeptName+"%");

this.response.setContentType("text/xml;charset=UTF-8");
this.response.setHeader("Cache-Control","no-cache");


ServletOutputStreampw=this.response.getOutputStream();
OutputStreamWriterout=newOutputStreamWriter(pw,"UTF-8");

out.write("<res>");
Iterator<Map.Entry<String,String>>it=userMap.entrySet().iterator();
while(it.hasNext()){
Map.Entry<String,String>entry=(Map.Entry<String,String>)it.next();
out.write("<id>"+entry.getKey()+"</id>");
out.write("<dept>"+entry.getValue()+"</dept>");
}
out.write("</res>");

out.flush();
out.close();

}

要点：
1，注意对参数进行解码。
2，查询时根据情况进行模糊匹配。
3，返回数据这里采用了xml方式，也可以采用json方式。
4，返回的方式这里采用了
复制代码代码如下:
ServletOutputStreampw=this.response.getOutputStream();
OutputStreamWriterout=newOutputStreamWriter(pw,"UTF-8");

这样的流是受本系统框架的限制，如果使用单纯的servlet，可以采用PrintWriterout=response.getWriter();当然out的方法是println()，也可以根据自己框架的情况灵活改变。

相关文章