您的位置:首页 > 其它

一个无刷新效果定时自动更新页面的例子

2008-05-01 04:40 561 查看
.Vbu841{display:none;}首先在ASP.Net创建两个WebForm页,分别命名为Default1,Default2。下面给出代码清单:
//Default1.aspx
<%@PageLanguage="C#"Debug="true"AutoEventWireup="true"CodeFile="Default1.aspx.cs"Inherits="Default1"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlXmlns="http://www.w3.org/1999/xhtml">
<headrunat="server">
<title>无标题页</title>

<scripttype="text/javascript">
varXmlHttp;
functioncreateXmlHttpRequest()
{

if(window.XmlHttpRequest)
{
XmlHttp=newXmlHttpRequest();
}
elseif(window.ActiveXObject)
{
try
{
XmlHttp=newActiveXObject("MsXml2.XmlHTTP");
}
catch(e1)
{
try
{
XmlHttp=newActiveXObject("Microsoft.XmlHTTP");

}
catch(e2)
{}
}
}
returnXmlHttp;
}
functiondoStart(){

createXmlHttpRequest();
varurl="Default2.aspx?task=reset";
XmlHttp.open("POST",url,true);
XmlHttp.onreadystatechange=startCallback;
XmlHttp.send(null);
}

functionstartCallback(){
if(XmlHttp.readyState==4){
if(XmlHttp.status==200){
setTimeout("pollServer()",1000);
refreshTime();
}
else{

alert("HTTPerror:"+XmlHttp.status);
}
}

}

functionpollServer(){
createXmlHttpRequest();
varurl="Default2.aspx?task=foo";
XmlHttp.open("POST",url,true);
XmlHttp.onreadystatechange=pollCallback;
XmlHttp.send(null);
}

functionrefreshTime(){
vartime_span=document.getElementById("time");
vartime_val=time_span.innerHTML;
varint_val=parseInt(time_val);
varnew_int_val=int_val-1;

if(new_int_val>-1){

setTimeout("refreshTime()",1000);
time_span.innerHTML=new_int_val;
}else{
time_span.innerHTML=1;
}
}

functionpollCallback(){
if(XmlHttp.readyState==4){
if(XmlHttp.status==200){
varmessage=XmlHttp.responseXml.getElementsByTagName("message")[0].firstChild.data;
if(message!="done"){
varnew_row=createRow(message);
vartable=document.getElementById("dynamicUpdateArea");
vartable_body=table.getElementsByTagName("tbody").item(0);
varfirst_row=table_body.getElementsByTagName("tr").item(1);
table_body.insertBefore(new_row,first_row);
setTimeout("pollServer()",1000);
refreshTime();
}
}
else{

alert("HTTPerror:"+XmlHttp.status);
}
}
}
functioncreateRow(message){
varrow=document.createElement("tr");
varcell=document.createElement("td");
varcell_data=document.createTextNode(message);
cell.appendChild(cell_data);
row.appendChild(cell);
returnrow;

}
</script>
</head>
<body>
<formid="form1"runat="server">
<h1>AjaxDynamicUpdateExample</h1>
Thispagewillautomaticallyupdateitself:
<inputtype="button"value="Launch"id="go"onclick="doStart();"/>
<p/>
Pagewillrefreshin<spanid="time">1</span>seconds.
<p/>
<tableid="dynamicUpdateArea"align="left">
<tbody>
<trid="row0"><td></td></tr>
</tbody>
</table>
</form>
</body>
</html>
//Default2.cs
usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Collections;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
publicpartialclassDefault2:System.Web.UI.Page
{
privatestaticintcounter=1;
protectedvoidPage_Load(objectsender,EventArgse)
{
Stringres="";
Stringtask=this.Request.Params["task"];
Stringmessage="";
if(!string.IsNullOrEmpty(task))
{
if(task.Equals("reset"))
{
counter=1;
}
else
{
switch(counter)
{
case1:message="Stevewalksonstage";break;
case2:message="iPodsrock";break;
case3:message="StevesaysMacsrule";break;
case4:message="Changeiscoming";break;
case5:message="Yes,OSXrunsonIntel-hasforyears";break;
case6:message="MacswillsoonhaveIntelchips";break;
case7:message="done";break;
}
counter++;
}
res="<message>"+message+"</message>";

Response.ContentType="text/Xml";
Response.AppendHeader("Cache-Control","no-cache");
Response.Write("<response>");
Response.Write(res);
Response.Write("</response>");
Response.End();
}
}
}
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: