Web页面实时刷新技术探讨Word下载.docx

1、yyMMddHHmmssffffff）; Graphics g = Graphics.FromImage（image）; g.DrawImage（image, 0, 0, image.Width, image.Height）; g.DrawString（currTime, new Font（Arial, 28）, new SolidBrush（Color.Red）, 10, 10）; g.Dispose（）; string savePath = Pic/ + currTime + .jpg; image.Save（HttpContext.Current.Server.MapPath（saveP

2、ath）; /将最新图片文件名写入到XML文件中 XmlDocument xmlDoc = new XmlDocument（）; xmlDoc.Load（HttpContext.Current.Server.MapPath（newPic.xml XmlNodeList nodeList = xmlDoc.SelectSingleNode（Items）.ChildNodes; XmlElement element = （XmlElement）nodeList0; element.SetAttribute（code, currTime）; xmlDoc.Save（HttpContext.Curre

3、nt.Server.MapPath（ 显示图片页面通过两个页面分别显示图片信息与图片内容，显示图片页面内容如下所示。代码清单2：html xmlns=http:/www.w3.org/1999/xhtml head runat=server /titleContent-Typetext/html; Charset=gb2312 /script type=text/javascript var xmlHttp; function CreateXMLHttp（） if（window.XMLHttpRequest） xmlHttp = new XMLHttpRequest（）; else if （w

4、indow.ActiveXObject） try xmlHttp = new ActiveXObject（Msxml2.XMLHTTP catch（e） Microsoft.XMLHTTP catch（e） xmlHttp = new ActiveXObject（Msxml2.XMLHTTP.5.0 function startXMLHttp（） CreateXMLHttp（）; xmlHttp.onreadystatechange =retDeal; xmlHttp.open（post,imgInfo.aspx,true）; xmlHttp.setRequestHeader（applicat

5、ion/x-www-form-urlencoded charset=gb2312 xmlHttp.send（）; function retDeal（） 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; setT

6、imeout（startXMLHttp,2000）;/script/headbody onload=Javascript:startXMLHttp（）div/divspan id=/spaninput type=hidden id=hid1hid2iframe id=ifrImg src=img.aspx width=800 height=500/iframe/body/html3、DWR服务器PushDWR的反转AJAX功能允许我们从服务器端来控制客服端，而不需要客户端的请求，服务器可以自动把消息发给指定的客户端。DWR的Push技术是让服务器每次发送广播时，把这个广播推送给客户端，而不用客

7、户端去刷新，DWR的推送是基于长连接的，性能优越。以服务器端通过手动控制按钮产生一张图片，客户端显示最新图片及图片的信息内容作为实例加以说明。服务器端通过一个按钮产生图片，页面代码如下所示。代码清单3：% page language=java pageEncoding=UTF-8%!DOCTYPE HTML PUBLIC -/W3C/DTD HTML 4.01 Transitional/ENhtmlhead charset=ISO-8859-1script type=text/javascript src=%=request.getContextPath（）%/dwr/interface/ge

8、tPic.js/dwr/engine.js/dwr/util.js Date.prototype.format = function（format） var o = M+ : this.getMonth（）+1, /monthd+ this.getDate（）, /dayh+ this.getHours（）, /hourm+ this.getMinutes（）, /minutes+ this.getSeconds（）, /secondq+ Math.floor（this.getMonth（）+3）/3）, /quarterS this.getMilliseconds（） /millisecon

9、d if（/（y+）/.test（format） format=format.replace（RegExp.$1, （this.getFullYear（）+）.substr（4 - RegExp.$1.length）; for（var k in o）if（new RegExp（+ k +）.test（format） format = format.replace（RegExp.$1, RegExp.$1.length=1 ? ok : （00+ ok）.substr（+ ok）.length）; return format; function getNewPic（） var currTime

10、= new Date（）.format（yyMMddhhmmssS var currPath = D:/Program/Java/JavaSpace/ajaxTest/WebContent/ getPic.createStringMark（currPath+,currTime,currPath+currTime+ getPic.getNewPicId（currTime）;bodybutton value=产生新图片 onclick=getNewPic（）;代码清单4：jsp:useBean id=aGetNewPic scope=page class=com.getNewPic functio

11、n init（） dwr.engine.setActiveReverseAjax（true）; /激活反转 window.onload = init;/页面初始化方法 function refreshImg（） div style= float:left最新图片：divNewPicId%= aGetNewPic.currPicId %img.jsp?id=window.parent.writePicInfo（ + newPicId + ） this.Context.Response.Write（str）; this.Context.Response.Flush（）; System.Thread

12、ing.Thread.Sleep（2000）;代码中的“htmlfile”是一个类似JavaScript中Window对象的一个ActiveX Object，它内部也是DOM结构，将作为隐藏帧的IFrame写入这个对象中，这样可以解决进度条一直为读取状态的问题。5、RTMP协议传输随着网络技术的迅猛发展，视频、音频等多媒体通信需求越来越多，Adobe公司开放了RTMP（the Real-time Messaging Protocol）协议规范，RTMP协议作为客户端和服务器端的传输协议，这是一个专门为高效传输视频、音频和数据而设计的 TCP/IP 协议。其优秀产品Flex是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的极具表现力的 Web 应用程序的高效率的开放源码框架。从目前的应用来说，RTMP主要用于音、视频的传输，流视频服务器就是FMS（FlashMediaServer），其原称为FCS（FlashCommunicationServer），技术范畴能应用到诸如Flash聊天室、视频会议等领域。以一个实现聊天功能的Flex程序为例，显示聊天内容代码如下所示。代码清单8：?xml version=1.0 encoding=utf-8