<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<meta http-equiv="imagetoolbar" content="no">
<title>ajax實現</title>
<style>
<!--
body{text-align:center;}
table{
border:0px;
}
.sp{
width:520px;
height:400px;
border:2px solid #FFCC00;
text-align:center;
line-height:400px;
}
.sn{
width:520px;
height:30px;
text-align:center;
line-height:30px;
}
img{
border:0px;
cursor:pointer;
}
-->
</style>
<script language="javascript">
<!--
// 初始化
function setphoto(){
var xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp.open("GET","3.asp?page=1",true);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
temp=xmlhttp.responseTEXT;
inphoto.src=temp.split("#")[0];
fn.innerHTML=temp.split("#")[1];
sp.style.display="";
}
}
xmlhttp.setRequestHeader("If-Modified-Since","0");
xmlhttp.send();
}
// 圖片變換
function showphoto(){
var page=parseInt(form1.page.value)+1;
var xmlhttp=new ActiveXObject("Msxml2.XMLHTTP");
xmlhttp.open("GET","3.asp?page="+page,true);
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
temp=xmlhttp.responseTEXT;
inphoto.src=temp.split("#")[0];
fn.innerHTML=temp.split("#")[1];
form1.page.value=temp.split("#")[2];
}
}
xmlhttp.setRequestHeader("If-Modified-Since","0");
xmlhttp.send();
}
-->
</script>
</head>
<body onload="setphoto()">
<table>
<tr>
<td class="sp" id="sp" style="display:none;"><img name="inphoto" src="" onclick="showphoto()" alt="點擊圖片顯示下一張"></td>
</tr>
<tr>
<td class="sn"><span id="fn"></span></td>
</tr>
<tr>
<td class="sn">利用Ajax實現點擊圖片顯示下一張</td>
</tr>
</table>
<form name="form1">
<input type="hidden" name="page" value="1">
</form>
</body></html>
