Web页面实时刷新技术探讨Word下载.docx
《Web页面实时刷新技术探讨Word下载.docx》由会员分享，可在线阅读，更多相关《Web页面实时刷新技术探讨Word下载.docx（18页珍藏版）》请在冰点文库上搜索。
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（"
}
显示图片页面通过两个页面分别显示图片信息与图片内容，显示图片页面内容如下所示。
代码清单2：
htmlxmlns="
http:
//www.w3.org/1999/xhtml"
>
headrunat="
server"
<
title>
/title>
Content-Type"
text/html;
Charset=gb2312"
/>
scripttype="
text/javascript"
varxmlHttp;
functionCreateXMLHttp（）{
if（window.XMLHttpRequest）{
xmlHttp=newXMLHttpRequest（）;
}
elseif（window.ActiveXObject）{
try{xmlHttp=newActiveXObject（"
Msxml2.XMLHTTP"
catch（e）{
Microsoft.XMLHTTP"
catch（e）{}
xmlHttp=newActiveXObject（"
Msxml2.XMLHTTP.5.0"
functionstartXMLHttp（）{
CreateXMLHttp（）;
xmlHttp.onreadystatechange=retDeal;
xmlHttp.open（"
post"
"
imgInfo.aspx"
true）;
xmlHttp.setRequestHeader（"
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）;
/script>
/head>
bodyonload='
Javascript:
startXMLHttp（）'
div>
/div>
spanid="
/span>
inputtype="
hidden"
id="
hid1"
hid2"
iframeid="
ifrImg"
src="
img.aspx"
width="
800"
height="
500"
/iframe>
/body>
/html>
3、DWR服务器Push
DWR的反转AJAX功能允许我们从服务器端来控制客服端，而不需要客户端的请求，服务器可以自动把消息发给指定的客户端。
DWR的Push技术是让服务器每次发送广播时，把这个广播推送给客户端，而不用客户端去刷新，DWR的推送是基于长连接的，性能优越。
以服务器端通过手动控制按钮产生一张图片，客户端显示最新图片及图片的信息内容作为实例加以说明。
服务器端通过一个按钮产生图片，页面代码如下所示。
代码清单3：
%@pagelanguage="
java"
pageEncoding="
UTF-8"
%>
!
DOCTYPEHTMLPUBLIC"
-//W3C//DTDHTML4.01Transitional//EN"
html>
head>
charset=ISO-8859-1"
scripttype='
text/javascript'
src='
%=request.getContextPath（）%>
/dwr/interface/getPic.js'
/dwr/engine.js'
/dwr/util.js'
Date.prototype.format=function（format）{
varo={
"
M+"
:
this.getMonth（）+1,//month
d+"
this.getDate（）,//day
h+"
this.getHours（）,//hour
m+"
this.getMinutes（）,//minute
s+"
this.getSeconds（）,//second
q+"
Math.floor（（this.getMonth（）+3）/3）,//quarter
S"
this.getMilliseconds（）//millisecond
if（/（y+）/.test（format））format=format.replace（RegExp.$1,
（this.getFullYear（）+"
"
）.substr（4-RegExp.$1.length））;
for（varkino）if（newRegExp（"
（"
+k+"
）"
）.test（format））
format=format.replace（RegExp.$1,
RegExp.$1.length==1?
o[k]:
（"
00"
+o[k]）.substr（（"
+o[k]）.length））;
returnformat;
functiongetNewPic（）{
varcurrTime=newDate（）.format（"
yyMMddhhmmssS"
varcurrPath="
D:
/Program/Java/JavaSpace/ajaxTest/WebContent/"
getPic.createStringMark（currPath+"
currTime,currPath+"
+currTime+"
getPic.getNewPicId（currTime）;
body>
button"
value="
产生新图片"
onclick="
getNewPic（）;
代码清单4：
jsp:
useBeanid="
aGetNewPic"
scope="
page"
class="
com.getNewPic"
functioninit（）{
dwr.engine.setActiveReverseAjax（true）;
//激活反转
window.onload=init;
//页面初始化方法
functionrefreshImg（）{
divstyle="
float:
left"
最新图片：
divNewPicId"
%=aGetNewPic.currPicId%>
img.jsp?
id=<
另外，getNewPic类用于产生新图片、Push处理。
代码清单5：
publicclassgetNewPic{
publicstaticStringcurrPicId="
100413101427820"
publicStringgetNewPicId（StringpicId,HttpServletRequestrequest）{
if（currPicId==picId）returncurrPicId;
if（picId!
=null）currPicId=picId;
//获得DWR上下文
ServletContextsc=request.getSession（）.getServletContext（）;
ServerContextsctx=ServerContextFactory.get（sc）;
//获得当前浏览client.jsp页面的所有脚本session
Collectionsessions=sctx.getScriptSessionsByPage（"
/ajaxTest/client.jsp"
Utilutil=newUtil（sessions）;
//处理这些页面中的一些元素
util.setValue（"
currPicId）;
util.addFunctionCall（"
refreshImg"
null）;
returncurrPicId;
publicbooleancreateStringMark（StringfilePath,StringmarkContent,StringsavePath）
{
ImageIconimgIcon=newImageIcon（filePath）;
ImagetheImg=imgIcon.getImage（）;
intwidth=theImg.getWidth（null）;
intheight=theImg.getHeight（null）;
//System.out.println（theImg）;
BufferedImagebimage=newBufferedImage（width,height,BufferedImage.TYPE_INT_RGB）;
Graphics2Dg=bimage.createGraphics（）;
g.setColor（Color.red）;
g.setBackground（Color.white）;
g.drawImage（theImg,0,0,null）;
g.setFont（newFont（"
Font.PLAIN,28））;
//字体、字型、字号
g.drawString（markContent,10,10）;
//画文字
g.dispose（）;
try
FileOutputStreamout=newFileOutputStream（savePath）;
//输出文件名
JPEGImageEncoderencoder=JPEGCodec.createJPEGEncoder（out）;
JPEGEncodeParamparam=encoder.getDefaultJPEGEncodeParam（bimage）;
param.setQuality（1,true）;
encoder.encode（bimage,param）;
out.close（）;
}
catch（Exceptione）
{returnfalse;
returntrue;
}
4、与服务端建立长连接
与服务器建立长连接，也就是在显示数据页面中嵌入一个隐藏页面，该隐藏页面主要完成取服务器端所要显示的数据，并且将该页面显示数据的方法写成一个死循环，以此来保持与服务器端的长连接。
同样以服务器端通过手动控制按钮产生一张图片，客户端显示最新图片及图片的信息内容作为实例加以说明。
服务器端通过一个按钮btnGet产生图片，按钮事件代码同代码清单1。
代码清单6：
functionwritePicInfo（str）{
if（window.document.getElementById（"
）.innerText!
=str）{
window.document.getElementById（"
）.innerText=str;
functiononload（）{
varifrpush=newActiveXObject（"
htmlfile"
//创建对象
ifrpush.open（）;
varifrDiv=ifrpush.createElement（"
div"
//添加一个DIV
ifrpush.appendChild（ifrDiv）;
//添加到htmlfile
ifrpush.parentWindow.writePicInfo=writePicInfo;
//注册javascript方法
ifrDiv.innerHTML="
iframesrc='
getNew.aspx'
//在div里添加iframe
ifrpush.close（）;
onload（）;
divid="
其中，隐藏页面getNew.aspx代码如下所示。
代码清单7：
protectedoverridevoidRender（HtmlTextWriteroutput）
stringstr;
while（true）//死循环保持长链接
{
//读取最新图片信息
stringnewPicId=element.GetAttribute（"
str="
script>
window.parent.writePicInfo（'
+newPicId+"
'
）<
this.Context.Response.Write（str）;
this.Context.Response.Flush（）;
System.Threading.Thread.Sleep（2000）;
代码中的“htmlfile”是一个类似JavaScript中Window对象的一个ActiveXObject，它内部也是DOM结构，将作为隐藏帧的IFrame写入这个对象中，这样可以解决进度条一直为读取状态的问题。
5、RTMP协议传输
随着网络技术的迅猛发展，视频、音频等多媒体通信需求越来越多，Adobe公司开放了RTMP（theReal-timeMessagingProtocol）协议规范，RTMP协议作为客户端和服务器端的传输协议，这是一个专门为高效传输视频、音频和数据而设计的TCP/IP协议。
其优秀产品Flex是用于构建和维护在所有主要浏览器、桌面和操作系统一致地部署的极具表现力的Web应用程序的高效率的开放源码框架。
从目前的应用来说，RTMP主要用于音、视频的传输，流视频服务器就是FMS（Flash
Media
Server），其原称为FCS（Flash
Communication
Server），技术范畴能应用到诸如Flash聊天室、视频会议等领域。
以一个实现聊天功能的Flex程序为例，显示聊天内容代码如下所示。
代码清单8：
?
xmlversion="
1.0"
encoding="
utf-8"
升级会员 