我是想用Ajax来模拟一下百度的自动提示的功能,有两个页面一个是请求页 一个是返回xml文件的页 但是用请求页返回的时侯总是object 不知道怎么回事啊
- HTML code
<%@page contentType="text/html;charset=gbk"%> <%@page import ="org.dom4j.*"%> <head> <title>测试代码</title> <!--这里是Ajax的地方--> <script type="text/javascript"> var xmlHttp; var completeDiv; var inputField; var nameTable; var nameTableBody; var inputField; function createXMLHttpRequest(){//创建xmlhttp xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); } function initVars(){//初始化成员变量 inputField=document.getElementById("names"); nameTable=document.getElementById("name_table"); completeDiv=document.getElementById("popup"); nameTableBody=document.getElementById("name_table_body"); } function findNames(){//发送请求 initVars(); if(inputField.value.length>0){ createXMLHttpRequest(); var url="test12.jsp?names="+escape(inputField.value); xmlHttp.open("get",url,true); xmlHttp.onreadystatechange=callback;xmlHttp.send(null); } else{ clearNames(); } } function clearNames(){//清除信息 var ind=nameTableBody.childNodes.length; for(var i=ind-1;i>=0;i--){ nameTableBody.removeChild(nameTableBody.childNodes[i]); } completeDiv.style.border="none"; } function callback(){ if(xmlHttp.readyState==4) if(xmlHttp.status==200){ var name=xmlHttp.responseXML.getElementsByTagName("name"); //var name=xmlHttp.responseText; alert(name); setNames(name); }else if(xmlHttp.status==204){ clearNames(); } } function setNames(the_names) { clearNames(); var size=the_names.length; setOffsets(); var row,cell,txtNode; for(var i=0;i<size&&i<10;i++){//如果超过十条记录只显示十条 var nextNode=the_names[i].firstChild.data; row=document.createElement("tr"); cell=document.createElement("td"); cell.onmouseout=function(){this.className='mouseOver';}; cell.onmouseover=function(){this.className='mouseOut';}; cell.setAttribute("bgcolor","#fffafa"); cell.setAttribute("border","0"); cell.onclick=function(){ populateName(this); } txtNode=document.createTextNode(nextNode); cell.appendChild(txtNode); row.appendChild(cell); nameTableBody.appendChild(row); } alert(nameTableBody); } function setOffsets(){ var end=inputField.offsetWidth; var left=calculateOffsetLeft(inputField); var top=calculateOffsetTop(inputField)+inputField.offsetHeight; completeDiv.style.border="black 1px solid"; completeDiv.style.left=left+"px"; completeDiv.style.top=top+"px"; nameTable.style.width=end+"px"; } function calculateOffsetLeft(field){ return calculateOffset(field,"offsetLeft"); } function calculateOffsetTop(field){ return calculateOffset(field,"offsetTop"); } function calculateOffset(field,attr){ var offset=0; while(field){ offset+=field[attr]; field=field.offsetParent; } return offset; } function populateName(cell){ inputField.value=cell.firstChild.nodeValue; clearNames(); } </script> <!--这里是css代码--> <style text/css> .mouseOut{ background:#708090; color:#fffafa; } .mouseOver{ background:#fffafa; coor:#000000; } </style> </head> <body> <h1>Ajax自动提示功能</h1> 名称:<input type="text" size="20" id="names" onkeyup="findNames();" style="height:20" /> <div style="position:absolute" id="popup"> <table id="name_table" bgcolor="#fffafa" border="0" cellpadding="0"> <tbody id="name_table_body"></tbody> </div> </body>