用ajax从后台获取到数据后怎么在页面显示，
?
现在数据已经获取到了，问题是要怎样显示
?
第一次查询到的数据是用servlet查询，然后用list迭代出来的
点击下一页的时候要怎样替换原来的图片呢？
各位大虾给点建议
?
再问下，ajax获取到的数据可以放入到我第一次查询用的list里面么？
?
页面代码如下，谢谢了
?
<%@ page language="java"
?import="java.util.*,com.ibm.vo.PhotoVO,com.ibm.common.Page"
?pageEncoding="GB18030"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
?<head>
??<meta http-equiv="Content-Type" content="text/html; charset=GB18030"></meta>
??<title>相片详细</title>
??<style type="text/css">
<!--
.STYLE15 {
?font-size: 12px;
?color: #999999;
}
.STYLE16 {
?color: #FF0000
}
#Layer1 {
?position: absolute;
?left: 905px;
?top: 303px;
?width: 30px;
?height: 30px;
?z-index: 1;
}
body {
?background-repeat: no-repeat;
}
.STYLE21 {
?font-size: 12px
}
a:link {
?font-size: 12px;
?text-decoration: none;
}
a:hover {
?font-size: 14px;
?text-decoration: none;
}
a:active {
?font-size: 14px;
?text-decoration: none;
}
.STYLE24 {
?font-size: 12px;
?color: #0066FF;
}
.STYLE26 {
?font-size: 14
}
.table {
table-layout: fixed;
word-wrap:break-word;
}
.div {
word-wrap:break-word;
}
-->
</style>
?<%
??Integer currow = (Integer) session.getAttribute("currow");
??Integer maxRow = (Integer) session.getAttribute("maxrow");
??Page pageCtrl = (Page) session.getAttribute("page");
??List<PhotoVO> list = (List<PhotoVO>) session.getAttribute("list");
??PhotoVO photo = (PhotoVO) session.getAttribute("photo");
?%>
??<script type="text/javascript"><!--
?function getNext() {
???? var url = "../DetailListPhoto?currow=<%=(currow - 8) > 0 ? (currow - 8) : 0%>";
???? if (window.XMLHttpRequest) {
???????????? req = new XMLHttpRequest();
???? }else if (window.ActiveXObject) {
???????????? req = new ActiveXObject("Microsoft.XMLHTTP");
???? }
???? if(req){
???????????? req.open("GET",url, true);
???????????? req.onreadystatechange = complete;
???????????? req.send(null);
???? }
?}
?var name=[];
?var id=[];
?var url=[];
?function complete(){
???? if (req.readyState == 4) {
???????????? if (req.status == 200) {
??????????? //alert(req.responseText);
??????????? //$("#photolist").html(req.responseText);
???var city = req.responseXML.getElementsByTagName("photo");
???//alert(city);
???????????????????? var str=new Array();
?????????? var result="";
???????????????????? for(var i=0;i<city.length;i++){
???????????????????????????? //str[i]=city[i].firstChild.data;
????????????? // alert(str[i]);
???????????? // alert(city[i].getElementsByTagName("name")[0].firstChild.nodeValue);
??? ???? id[i]= city[i].getElementsByTagName("pid")[0].firstChild.nodeValue;
?????????????? name[i]= city[i].getElementsByTagName("name")[0].firstChild.nodeValue;
?? ????? url[i]= city[i].getElementsByTagName("url")[0].firstChild.nodeValue;
?? ???? // result='<a href="../DetailPhoto?id='+id[i]+'"><img src="'+url[i]+'" alt="'+name[i]+'" width="95" height="93" border="0"></a>';
???? ? //? document.getElementById("listphoto").innerHTML=result;
???????????????????? }
???? for (var i=0;i<id.length;i++)
???? {
?????? result +='<a href="../DetailPhoto?id='+id[i]+'" title="'+name[i]+'"><img src="'+url[i]+'" width="95" height="93" border="0"></a>';
???? }?????
???? ??? document.getElementById("listphoto").innerHTML=result;
?? ???//elmt.innerHTML=result;??
???????????? }
???? }
?}
?function buildSelect(str,sel) {
???? sel.options.length=0;
???? for(var i=0;i<str.length;i++) {
???????????? sel.options[sel.options.length]=new Option(str[i],str[i])
???? }
?}
?--></script>
??<script language="JavaScript">
???<!--
???function Jumping(){
???? document.PageForm.submit();
???? return ;
???}
???
???function gotoPage(pagenum){
???? document.PageForm.jumpPage.value = pagenum;
???? document.PageForm.submit();
???? return ;
???}
???
???-->
??</script>
?<link rel="stylesheet" href="../css/new.css" type="text/css"></link></head>
?<body>
??<table width="980" border="0" align="center" cellpadding="0"
???cellspacing="0" style="background-repeat: no-repeat">
???<tr>
????<td height="146" colspan="7" background="../image/images/header.jpg">
?????
?????<img src="../image/logo.png" width="177" height="146" />
?????
?????<img src="../image/blogo.gif" width="374" height="62" vspace="40"
??????align="bottom" />
????</td>
???</tr>
???<tr>
????<td height="45" colspan="3" align="left" valign="middle"
?????background="../image/bander.gif">
?????
????</td>
???</tr>
???<tr>
????<td height="5" colspan="3">
?????
????</td>
???</tr>
???<tr>
????<td height="25" colspan="3">
?????<table width="980" border="0" cellspacing="0" cellpadding="0">
??????<tr>
???????<td height="20">
????????<span class="STYLE15"> <a
?????????href="javascript:history.go(-1);">返回</a> | <a
?????????href="../ListAllPhoto?Identity=user">相片浏览区</a> > 相片详情 </span>
???????</td>
???????<td align="right">
????????<font face="微软雅黑" style="font-size: 12px; color: #000000"><a
?????????href="/webManager/Idea">返回首页</a> </font>
???????</td>
??????</tr>
??????<tr>
???????<td>
????????<hr></hr>
???????</td>
??????</tr>
?????</table>
????</td>
???</tr>
???<tr>
????<td height="20" colspan="3">
?????<table width="947" align="center">
??????<tr>
???????<td width="75">
????????<a
?????????href="../DetailListPhoto?currow=<%=(currow + 8) > maxRow ? (currow - 8) : maxRow%>">上页</a>
???????</td>
???????<%
????????for (int i = 0; i < list.size(); i++) {
???????%>
???????<td width="100" id="listphoto">
????????<a href="../DetailPhoto?id=<%=list.get(i).getId()%>" title="<%=list.get(i).getName()%>"><img
??????????src="<%=list.get(i).getUrl()%>"
??????????width="95" height="93" border="0"></img>
????????</a>
???????</td>
???????<%
????????}
????????if (list.size() < 8) {
???????%>
???????<td width="100">
????????<a href="../DetailPhoto" title="返回第一张"><img src="../images/photo_back.png"
??????????width="95" height="93"? border="0"></img> </a>
???????</td>
???????<%
????????}
???????%>
???????<td>? </td>
???????<td width="75">
????????<a href="#" onclick="getNext();"><img src="../images/2.jpg" border="0" /></a>
???????</td>
??????</tr>
?
?????</table>
????</td>
???</tr>
???<tr>
????<td align="center">
?????<table width="809">
??????<tr>
???????<td colspan="3">
????????<p>
?????????
????????</p>
????????<p align="center">
?????????<strong><font color="#2e2e2e"><%=photo.getName()%></font>
?????????</strong>
????????</p>
???????</td>
??????</tr>
<!--
<tr><td> <div class="menu"><ul><li id="listphoto" > </li> </ul></div>?? </td></tr>
?-->
??????<tr>
???????<td colspan="3" align="center">
????????<img src="<%=photo.getUrl()%>" />
???????</td>
??????</tr>
??????<tr>
???????<td align="center" colspan="3">
????????<font size="2" face="宋体" color="#c0c0c0">上传于：<%=photo.getCreatetime()%></font>
???????</td>
??????</tr>
??????<tr><td><table class="table">
??????<tr>
???????<td height="74">
???????</td>
???????<td align="center" width="425">
????????<strong><font color="#000000">相片描述：</font> </strong><font
?????????color="#8f8f8f"><%=photo.getInfo()%></font>
???????</td>
???????<td height="74">
???????</td>
??????</tr>
??????</table></td></tr>
?????</table>
????</td>
???</tr>
???<tr>
????<td height="64" colspan="10" align="left" valign="middle"
?????bgcolor="#CCCCCC">
?????<span class="STYLE21">
??????IDEA @ 2010. Powered by <a
??????href="/webManager/aboutIdea/aboutIdea.jsp">Idea!</a> </span>
????</td>
???</tr>
???<tr>
????<td height="13" colspan="10">
?????
????</td>
???</tr>
??</table>
?</body>
</html>