ajax java 實(shí)現(xiàn)自動(dòng)完成功能
更新時(shí)間:2012年12月19日 09:29:49 作者:
都知道百度建議是用ajax做的,想要做的快速穩(wěn)定,可復(fù)制可移植就不容易了,花時(shí)間研究還不如自己來(lái)寫(xiě)。根據(jù)一個(gè)pdf文檔提供的資料,用了小半天時(shí)間,終于實(shí)現(xiàn)了。在此與大家分享
百度建議給了我們極大的方便,就像我們跟人說(shuō)話的時(shí)候,你點(diǎn)頭他知尾,不用多費(fèi)唇舌,這樣我們與之相處久輕松愉悅。
都知道百度建議是用ajax做的,想要做的快速穩(wěn)定,可復(fù)制可移植就不容易了。網(wǎng)上找了半天,好多都是asp或者php的,還有使用jquery的,但說(shuō)明性文檔太少,花時(shí)間研究還不如自己來(lái)寫(xiě)。根據(jù)一個(gè)pdf文檔提供的資料,用了小半天時(shí)間,終于實(shí)現(xiàn)了。在此與大家分享。
原理流程圖如下:
流程圖很明白了,沒(méi)什么要說(shuō)的,以下帖代碼。
Javascript代碼:
var xmlHttpRequest;
var table;
var tbody;
var div;
var input;
var curIndex;
var size;
var r_userId;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttpRequest = new XMLHttpRequest();
}
}
//發(fā)送請(qǐng)求
function findNames(){
if(event.keyCode==38||event.keyCode==40){
}else{
if(input.value.length>0){
createXMLHttpRequest();
var url = encodeURI(encodeURI("/jforum.html?module=posts&action=findDept&names="+input.value));
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.onreadystatechange=processMatchResponse;
xmlHttpRequest.send(null);
}else{
clearNames();
}
}
}
function processMatchResponse(){
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status==200){
//alert(xmlHttpRequest.status);
//var id = xmlHttpRequest.responseXML.getElementsByTagName("id");
var dept = xmlHttpRequest.responseXML.getElementsByTagName("dept");
var id = xmlHttpRequest.responseXML.getElementsByTagName("id");
setNames(dept,id);
}else{
window.alert("您所請(qǐng)求的頁(yè)面有異常!");
}
}
}
function setNames(depts,ids){
clearNames();
size = depts.length;
if(size>0){
div.style.visibility = "visible";
var row,col1,col2,span;
for(var i = 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 = "關(guān)閉";
col1.appendChild(link);
row.appendChild(col1);
row.appendChild(col2);
tbody.appendChild(row);
}
}
function setPosition(){
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 = "gray 1px solid";
div.style.left = getLeft(input);
div.style.top = getTop(input)+input.offsetHeight+6;
curIndex = -1;
input.focus();//div.style.left+","+div.style.top
}
function clearNames(){
var ind = tbody.childNodes.length;
for(i=ind-1;i>=0;i--){
tbody.removeChild(tbody.childNodes[i]);
}
div.style.visibility="hidden";
curIndex = -1;
}
function clearSelected(){
var ind = tbody.childNodes.length;
for(var i = ind-1;i>=0;i--){
tbody.childNodes[i].className = "mouseOut";
}
}
function keyDown(){
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;
}
}
}
}
//獲取元素的縱坐標(biāo)
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//獲取元素的橫坐標(biāo)
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
代碼太多,有點(diǎn)亂,沒(méi)使用jquery,但更能顯示作者的功底。以下分點(diǎn)闡述:
1,setPosition()是用來(lái)初始化全局所需要的各個(gè)變量,所以在頁(yè)面加載的時(shí)候就要先調(diào)用嘍,比如在body的onload方法,或者其他方式都可以。
2,findNames()是操作ajax的方法,熟悉ajax的人都可以看明白,里面最主要的是要對(duì)參數(shù)進(jìn)行二次編碼encodeURI(),相應(yīng)的在后臺(tái)要進(jìn)行解碼。
3,processMatchResponse()是回調(diào)函數(shù),用來(lái)處理從后臺(tái)返回的數(shù)據(jù),這里交給了setNames()來(lái)處理。
4,setNames中采用table方式顯示提示的內(nèi)容。這里更多的是JS和node方面的知識(shí)。
5,getTop和getLeft方法是獲得文本框的絕對(duì)位置,相對(duì)于瀏覽器左上角的。
后臺(tái)java代碼如下:
public void findDept() throws IOException{
String partDeptName = 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");
ServletOutputStream pw = this.response.getOutputStream();
OutputStreamWriter out = new OutputStreamWriter(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();
}
要點(diǎn):
1,注意對(duì)參數(shù)進(jìn)行解碼。
2,查詢時(shí)根據(jù)情況進(jìn)行模糊匹配。
3,返回?cái)?shù)據(jù)這里采用了xml方式,也可以采用json方式。
4,返回的方式這里采用了
ServletOutputStream pw = this.response.getOutputStream();
OutputStreamWriter out = new OutputStreamWriter(pw,"UTF-8");
這樣的流是受本系統(tǒng)框架的限制,如果使用單純的servlet,可以采用PrintWriter out = response.getWriter();當(dāng)然out的方法是println(),也可以根據(jù)自己框架的情況靈活改變。
都知道百度建議是用ajax做的,想要做的快速穩(wěn)定,可復(fù)制可移植就不容易了。網(wǎng)上找了半天,好多都是asp或者php的,還有使用jquery的,但說(shuō)明性文檔太少,花時(shí)間研究還不如自己來(lái)寫(xiě)。根據(jù)一個(gè)pdf文檔提供的資料,用了小半天時(shí)間,終于實(shí)現(xiàn)了。在此與大家分享。
原理流程圖如下:

流程圖很明白了,沒(méi)什么要說(shuō)的,以下帖代碼。
Javascript代碼:
復(fù)制代碼 代碼如下:
var xmlHttpRequest;
var table;
var tbody;
var div;
var input;
var curIndex;
var size;
var r_userId;
function createXMLHttpRequest(){
if(window.ActiveXObject){
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}else if(window.XMLHttpRequest){
xmlHttpRequest = new XMLHttpRequest();
}
}
//發(fā)送請(qǐng)求
function findNames(){
if(event.keyCode==38||event.keyCode==40){
}else{
if(input.value.length>0){
createXMLHttpRequest();
var url = encodeURI(encodeURI("/jforum.html?module=posts&action=findDept&names="+input.value));
xmlHttpRequest.open("GET",url,true);
xmlHttpRequest.onreadystatechange=processMatchResponse;
xmlHttpRequest.send(null);
}else{
clearNames();
}
}
}
function processMatchResponse(){
if(xmlHttpRequest.readyState==4){
if(xmlHttpRequest.status==200){
//alert(xmlHttpRequest.status);
//var id = xmlHttpRequest.responseXML.getElementsByTagName("id");
var dept = xmlHttpRequest.responseXML.getElementsByTagName("dept");
var id = xmlHttpRequest.responseXML.getElementsByTagName("id");
setNames(dept,id);
}else{
window.alert("您所請(qǐng)求的頁(yè)面有異常!");
}
}
}
function setNames(depts,ids){
clearNames();
size = depts.length;
if(size>0){
div.style.visibility = "visible";
var row,col1,col2,span;
for(var i = 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 = "關(guān)閉";
col1.appendChild(link);
row.appendChild(col1);
row.appendChild(col2);
tbody.appendChild(row);
}
}
function setPosition(){
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 = "gray 1px solid";
div.style.left = getLeft(input);
div.style.top = getTop(input)+input.offsetHeight+6;
curIndex = -1;
input.focus();//div.style.left+","+div.style.top
}
function clearNames(){
var ind = tbody.childNodes.length;
for(i=ind-1;i>=0;i--){
tbody.removeChild(tbody.childNodes[i]);
}
div.style.visibility="hidden";
curIndex = -1;
}
function clearSelected(){
var ind = tbody.childNodes.length;
for(var i = ind-1;i>=0;i--){
tbody.childNodes[i].className = "mouseOut";
}
}
function keyDown(){
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;
}
}
}
}
//獲取元素的縱坐標(biāo)
function getTop(e){
var offset=e.offsetTop;
if(e.offsetParent!=null) offset+=getTop(e.offsetParent);
return offset;
}
//獲取元素的橫坐標(biāo)
function getLeft(e){
var offset=e.offsetLeft;
if(e.offsetParent!=null) offset+=getLeft(e.offsetParent);
return offset;
}
代碼太多,有點(diǎn)亂,沒(méi)使用jquery,但更能顯示作者的功底。以下分點(diǎn)闡述:
1,setPosition()是用來(lái)初始化全局所需要的各個(gè)變量,所以在頁(yè)面加載的時(shí)候就要先調(diào)用嘍,比如在body的onload方法,或者其他方式都可以。
2,findNames()是操作ajax的方法,熟悉ajax的人都可以看明白,里面最主要的是要對(duì)參數(shù)進(jìn)行二次編碼encodeURI(),相應(yīng)的在后臺(tái)要進(jìn)行解碼。
3,processMatchResponse()是回調(diào)函數(shù),用來(lái)處理從后臺(tái)返回的數(shù)據(jù),這里交給了setNames()來(lái)處理。
4,setNames中采用table方式顯示提示的內(nèi)容。這里更多的是JS和node方面的知識(shí)。
5,getTop和getLeft方法是獲得文本框的絕對(duì)位置,相對(duì)于瀏覽器左上角的。
后臺(tái)java代碼如下:
復(fù)制代碼 代碼如下:
public void findDept() throws IOException{
String partDeptName = 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");
ServletOutputStream pw = this.response.getOutputStream();
OutputStreamWriter out = new OutputStreamWriter(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();
}
要點(diǎn):
1,注意對(duì)參數(shù)進(jìn)行解碼。
2,查詢時(shí)根據(jù)情況進(jìn)行模糊匹配。
3,返回?cái)?shù)據(jù)這里采用了xml方式,也可以采用json方式。
4,返回的方式這里采用了
復(fù)制代碼 代碼如下:
ServletOutputStream pw = this.response.getOutputStream();
OutputStreamWriter out = new OutputStreamWriter(pw,"UTF-8");
這樣的流是受本系統(tǒng)框架的限制,如果使用單純的servlet,可以采用PrintWriter out = response.getWriter();當(dāng)然out的方法是println(),也可以根據(jù)自己框架的情況靈活改變。
您可能感興趣的文章:
- jQuery+datatables插件實(shí)現(xiàn)ajax加載數(shù)據(jù)與增刪改查功能示例
- MVC+jQuery.Ajax異步實(shí)現(xiàn)增刪改查和分頁(yè)
- jQuery的Ajax接收java返回?cái)?shù)據(jù)方法
- ajax提交到j(luò)ava后臺(tái)之后處理數(shù)據(jù)的實(shí)現(xiàn)
- AJAX+JAVA用戶登陸注冊(cè)驗(yàn)證的實(shí)現(xiàn)代碼
- 詳解Java Ajax jsonp 跨域請(qǐng)求
- Java使用Ajax實(shí)現(xiàn)跨域上傳圖片功能
- Javaweb使用cors完成跨域ajax數(shù)據(jù)交互
- 深入Ajax代理的Java Servlet的實(shí)現(xiàn)詳解
- 在Java的Struts中判斷是否調(diào)用AJAX及用攔截器對(duì)其優(yōu)化
- AJAX實(shí)現(xiàn)數(shù)據(jù)的增刪改查操作詳解【java后臺(tái)】
相關(guān)文章
如何使用JavaScript快速創(chuàng)建一個(gè)1到100的數(shù)組
平時(shí)寫(xiě)代碼時(shí),我們會(huì)生產(chǎn)一些測(cè)試用的數(shù)組數(shù)據(jù),比如[1,100]的數(shù)組值,下面這篇文章主要給大家介紹了關(guān)于如何使用JavaScript快速創(chuàng)建一個(gè)1到100數(shù)組的相關(guān)資料,需要的朋友可以參考下2022-08-08JS組件庫(kù)AlloyTouch實(shí)現(xiàn)圖片輪播過(guò)程解析
這篇文章主要介紹了JS組件庫(kù)AlloyTouch實(shí)現(xiàn)圖片輪播組件過(guò)程解析,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-05-05[js高手之路]寄生組合式繼承的優(yōu)勢(shì)詳解
下面小編就為大家?guī)?lái)一篇[js高手之路]寄生組合式繼承的優(yōu)勢(shì)詳解。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-08基于Cesium實(shí)現(xiàn)繪制圓形,正方形,多邊形,橢圓圖形標(biāo)注
這篇文章主要介紹了如何利用Cesium實(shí)現(xiàn)繪制圓形、正方形、多邊形、橢圓等形狀的圖形標(biāo)注,文中的示例代碼講解詳細(xì),需要的可以參考一下2022-06-06