Ajax得到xml中的数据永远的object

genguyige genguyige 墨衍会员 · AI 创作全网分发 墨衍智能分发 通过墨衍一键同步至各平台 可同步平台 CSDN微信公众号微博知乎掘金百家号博客园抖音小红书 你的文章也可以这样分发 墨衍会员 ¥399起/年,写一次发全网 我也要 + 加入社区
我是想用Ajax来模拟一下百度的自动提示的功能,有两个页面一个是请求页 一个是返回xml文件的页 但是用请求页返回的时侯总是object 不知道怎么回事啊

<%@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>



另外一个页面是这样的
<%
response.setHeader("content-Type","text/xml");
response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", -10);

%>
<html>
<head>
<title>测试页面</title>
</head>
<body>
<%
//String name=request.getParameter("names");
String name="a";
if(name.equals("a")){
String data="<response><name>abc</name><name>ajax</name><name>apple</name><name>an</name></response>";
out.println(data);
}
else if(name.equals('j'))
{
String data="<response><name>java</name><name>jsp</name><name>javascript</name><name>jar</name></response>";
out.println(data);
}
%>

</body>

</html>


大家帮我啊~~跪求~~
...全文

相关推荐

评论 7
收藏 已收藏
分享
返回顶部
genguyige
Ajax 52,778 成员 25,334 内容