建站学院（LieHuo.Net）Ajax教程 实现方式很简单,步骤如下:点击文本框内后,获得文本框的x,y；输入内容后,延迟1-2秒将请求发送至服务器端；.服务器端查询后,返回给客户端；客户端显示DIV,并根据1获得的xy定位DIV的位置,将返回的内容填充至DIV内。
代码步骤如下:
| 以下为引用的内容： <input id="Text1" style="width: 300px; height: 21px;" type="text" onkeyup="getA();" onclick="getxy(this);"/> <input id="Text1" style="width: 300px; height: 21px;" type="text" onkeyup="getA();" onclick="getxy(this);"/> |
| 以下为引用的内容： //getxy()代码,为将要显示的div确定位置 Function getxy()//getxy()代码,为将要显示的div确定位置 { x=e.offsetTop; y=e.offsetLeft; while(ee=e.offsetParent) { x+=e.offsetTop; y+=e.offsetLeft; } }//用户输入后,延迟1-2秒提交即可,以免造成服务器端负载. function getQList() { var time=new Date().getTime(); var val=document.getElementById("Text1").value; if(val!=null || val!="" || val.length!=0) { var send="action=get1&time="+time+"&val="+val; myRequest("../Temp.aspx",send,getQListhandle); } } //处理函数,创建表格,填充到div中,代码中的changeColor()是用于鼠标移动后改变颜色的. function getQListhandle() { var getXML=null; if(req.readyState==4) { if(req.status==200) { getXML=req.responseXML; var innerHTML=null; var newslist = getXML.getElementsByTagName("news"); if((newslist!=null)&&(newslist.length!=0)) { innerHTML = "<table style="font-size: 9pt;width:100%" cellpadding="0" cellspacing="0" border="0">"; for(var i=0;i<newslist.length;i++) { var news = newslist[i]; var id = (news.childNodes[0].firstChild==null)?"":news.childNodes[0].firstChild.data; var caption = (news.childNodes[1].firstChild==null)?"":news.childNodes[1].firstChild.data; innerHTML += "<tr onmouSEOver="changecolor1(this);" onmouSEOut="changecolor2(this);">"; innerHTML += "<td height='25' style="cursor:hand" onclick="look2('"+id+"');">"+caption+"</td>"; innerHTML += "</tr>"; } innerHTML += "</table>"; } else { //innerHTML += "暂时没有数据"; document.getElementById("list").innerHTML=""; document.getElementById("list").style.display="none"; } setLocal();//注意,此处定位Div的位置 } } } //(3)定位div,让div显示在文本框的下方,宽度等于文本框的宽度 function setLocal() { var list=document.getElementById("list"); list.style.top=x+21; list.style.left=y; } //服务器端代码不再赘述.基本原理就是这样实现. |
