Web页面实时刷新技术探讨.docx
《Web页面实时刷新技术探讨.docx》由会员分享，可在线阅读，更多相关《Web页面实时刷新技术探讨.docx（18页珍藏版）》请在冰豆网上搜索。
Web页面实时刷新技术探讨
Web页面实时刷新技术探讨
一、总述
随着网络技术的飞速发展，使用B/S结构来实现项目应用已经越来越多，而实时监控一直都是多数行业软件所必备的功能，由此使用Web页面来实现实时监控成了一种必然的需求。
二、实时刷新技术
1、传统的页面刷新方式
传统的页面刷新方式很多，常见的有页面间隔一定的时间自动刷新、ActiveX控件、Applet等。
采用页面间隔一定的时间自动刷新的方式，是在网页的头部加入一下代码：
这里是经过20秒跳转到一个新页面，可以将“newPage”设置为本页面即为刷新本页面，刷新间隔时间可以修改“20”为任意时间。
通过这种方式如果并发和访问量较大,服务器就有可能承受不了这种压力，从而造成服务器死机。
使用ActiveX控件的方式需要每个客户端下载安装ActiveX控件，并且客户端浏览器只能使用Windows的IE浏览器。
同样使用Applet需要客户端安装Java运行时。
这些传统的页面刷新方式都或多或少的存在着一些确定，在Web项目应用中的使用也越来越少。
2、Ajax轮询
Ajax轮询方式是使用客户端脚本，通过XMLHttpRequest来定时发送请求，从而查询页面数据的更新情况。
通过这种方式，程序实现方便简捷，但客户端频繁的发送请求会给服务器带来很大的压力和客户端处理器负载，如果服务器端没有更新时，这种轮询访问服务器便是无意义的，并且耗费了网络资源与CPU处理资源。
实例说明：
服务器端通过手动控制按钮产生一张图片，客户端显示最新图片及图片的信息内容。
服务器端通过一个按钮btnGet产生图片，按钮事件代码如下所示。
代码清单1：
protectedvoidbtnGet_Click（objectsender,EventArgse）
{
//通过改写一张父图片上的文字来产生新图片
System.Drawing.Imageimage=System.Drawing.Image.FromFile（HttpContext.Current.Server.MapPath（"parent.jpg"））;
stringcurrTime=System.DateTime.Now.ToString（"yyMMddHHmmssffffff"）;
Graphicsg=Graphics.FromImage（image）;
g.DrawImage（image,0,0,image.Width,image.Height）;
g.DrawString（currTime,newFont（"Arial",28）,newSolidBrush（Color.Red）,10,10）;
g.Dispose（）;
stringsavePath="Pic/"+currTime+".jpg";
image.Save（HttpContext.Current.Server.MapPath（savePath））;
//将最新图片文件名写入到XML文件中
XmlDocumentxmlDoc=newXmlDocument（）;
xmlDoc.Load（HttpContext.Current.Server.MapPath（"newPic.xml"））;
XmlNodeListnodeList=xmlDoc.SelectSingleNode（"Items"）.ChildNodes;
XmlElementelement=（XmlElement）nodeList[0];
element.SetAttribute（"code",currTime）;
xmlDoc.Save（HttpContext.Current.Server.MapPath（"newPic.xml"））;
}
显示图片页面通过两个页面分别显示图片信息与图片内容，显示图片页面内容如下所示。
代码清单2：
//www.w3.org/1999/xhtml">
varxmlHttp;
functionCreateXMLHttp（）{
if（window.XMLHttpRequest）{
xmlHttp=newXMLHttpRequest（）;
}
elseif（window.ActiveXObject）{
try{xmlHttp=newActiveXObject（"Msxml2.XMLHTTP"）;}
catch（e）{
try{xmlHttp=newActiveXObject（"Microsoft.XMLHTTP"）;}
catch（e）{}
}
}
xmlHttp=newActiveXObject（"Msxml2.XMLHTTP.5.0"）;
}
functionstartXMLHttp（）{
CreateXMLHttp（）;
xmlHttp.onreadystatechange=retDeal;
xmlHttp.open（"post","imgInfo.aspx",true）;
xmlHttp.setRequestHeader（"Content-Type","application/x-www-form-urlencodedcharset=gb2312"）;
xmlHttp.send（）;
}
functionretDeal（）{
if（xmlHttp.readystate==4）{
if（xmlHttp.status==200）{
hid1.value=xmlHttp.responseText;
if（hid1.value!
=hid2.value）{
hid2.value=hid1.value;
ifrImg.location.reload（）;
document.getElementById（"Content"）.innerHTML=hid1.value;
}
}
setTimeout（startXMLHttp,2000）;
}
}
startXMLHttp（）'>