Web页面实时刷新技术探讨Word下载.docx
- 文档编号:7754196
- 上传时间:2023-05-09
- 格式:DOCX
- 页数:18
- 大小:22.96KB
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"
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 页面 实时 刷新 技术 探讨