新信息到来提醒的解决方案

大家都知道要在一个Asp.net应用程序中，实现即时信息提醒比较麻烦，在 Asp.net不能使用 Timer的方式来完成帮每个用户的定时访问数据库的操作，只能利用 javascript来的 SetInterval方法来完成用户的定时刷新页面操作，但存在的问题是页面一直在不断的刷新。在CSDN上的一篇文章（http://dev.csdn.net/article/63/63930.shtm）给了一个很好的解决方案。利用javascript + WebService? ，利用javascript去访问WebService。唯的麻烦之处在于要自己写SOAP消息完成访问访问WebService。下面就来看看具体的实现过程。

?

?

一、创建一个WebService，在我的WebService中有这样(HasNewMessage,原型是public string HasNewMessage(string userID,out int mailCount,out int pendingCount))一个方法，用IE访问WebService调用这个方法会有下面的一串SOAP请求消息格式.

?

我们就可以根据它来编写我们的SOAP消息了。WebService将会以下面的格式返回我们的请求。

?

在这个函数中，我有三个输出，其实mailCount,pendingCount是输出参数.在程序中我可以根据这个格式来分解出我们所获得的输出。

?

二、用javascript访问WebService

?

function HasNewMail()

?

?{

?

??? var userID = "3011";

?

??? var myService?? = "http://192.168.7.108/WebService/NewsService.asmx" ;

?

??? var myMethod??? = "http://tempuri.org/HasNewMessage";

?

??? var requestHttp = new ActiveXObject("Microsoft.XMLHTTP");

?

??? var requestBody = "";

?

??? requestBody???? = requestBody + "<?xml version=/"1.0/" encoding=/"utf-8/"?>/n" ;

?

??? requestBody???? = requestBody + "<soap:Envelope ";

?

??? requestBody???? = requestBody + "xmlns:xsi=/"http://www.w3.org/2001/XMLSchema-instance/" ";

?

??? requestBody???? = requestBody + "xmlns:xsd=/"http://www.w3.org/2001/XMLSchema/" " ;

?

??? requestBody???? = requestBody + "xmlns:soap=/"http://schemas.xmlsoap.org/soap/envelope//">/n" ;

?

??? requestBody???? = requestBody + " <soap:Body>/n" ;

?

??? requestBody???? = requestBody + "?? <HasNewMessage xmlns=/"http://tempuri.org//">/n" ;

?

??? requestBody???? = requestBody + "??? <userID>" + userID + "</userID>/n";

?

??? requestBody???? = requestBody + "? </HasNewMessage>/n";

?

??? requestBody???? = requestBody + " </soap:Body>/n";

?

??? requestBody???? = requestBody + "</soap:Envelope>";

?

???

?

??? requestHttp.Open("POST",myService,false);

?

??? requestHttp.SetRequestHeader("Content-Type","text/xml;charset=gb2312");

?

??? requestHttp.SetRequestHeader("SOAPAction",myMethod);

?

??? requestHttp.Send(requestBody);

?

???

?

??? var result = requestHttp.ResponseXML; ?

?

??? var pos1 = result .xml.indexOf("<HasNewMessageResult>");?

?

? ? var pos2 = result .xml.indexOf("</HasNewMessageResult>");

?

??? var len = pos2 - pos1 - ("<HasNewMessageResult>").length;

?

? ? var userName = result.xml.substr(pos1 + ("<HasNewMessageResult>").length,len);?

?

? ? pos1??? = result.xml.indexOf("<mailCount>");

?

? ? pos2??? = result.xml.indexOf("</mailCount>");

?

? ? len???? = pos2 - pos1 - ("<mailCount>").length;

?

? ? var mailCount = result.xml.substr(pos1 + ("<mailCount>").length,len);

?

? ?

?

? ? pos1??? = result.xml.indexOf("<pendingCount>");

?

? ? pos2??? = result.xml.indexOf("</pendingCount>");

?

? ? len???? = pos2 - pos1 - ("<pendingCount>").length;

?

? ? var pendingCount= result.xml.substr(pos1 + ("<pendingCount>").length,len);

?

?

?

?

? ? var allCount??? = parseInt(mailCount) + parseInt(pendingCount);

?

? ? //弹出显示

?

? ? if(allCount > 0)

?

? ????? PopUpNotify(userName,allCount,mailCount,pendingCount)??

?

?}

?

这个函数首先创建一个ActiveXObj利用它来完成对WebService的访问。然后根据上面介绍的格式创建SOAP消息体，与WebService交互。最后对所得到的WebService返回消息进行分解，得出所需的数据。

?

三、Pop窗口的弹出。Pop窗口的弹出有几种方法，好像也有这方面的专门控件，由于用javascript来完成，选用层的移动应用或PopupObject来实现，它可以让显示信息自下而上移动，但在测试过程中发现直接用层会被框架遮住。所以选用PopupObject，但存在一个问题就是用户不能控制这个PopupObject的关闭，它的关闭方式是在父窗体获得焦点以后就会自动关闭，在层实体的”self.close()”，不能很好的工作，它会弹出确认关闭窗口，随后自己就关闭了。以下是弹出函数和层实体(复制别人用层写出的弹出消息的一个层实体，把它作为PopupObject的innerHTML也能很的显示，真好！)。

?

var oPopup? = window.createPopup();

?

function PopUpNotify(userName,pendigCount)

?

{??

?

?? var oPopupBody?? = oPopup.document.body;

?

?? var HTMLBody???????????? = eMeng.innerHTML;

?

?? HTMLBody???????????????? = HTMLBody.replace(/userName/g,userName);

?

?? HTMLBody???????????????? = HTMLBody.replace(/allCount/g,allCount);

?

?? HTMLBody???????????????? = HTMLBody.replace(/mailCount/g,mailCount);

?

?? HTMLBody???????????????? = HTMLBody.replace(/pendingCount/g,pendigCount);

?

?? oPopupBody.innerHTML???? = HTMLBody;

?

???

?

??? oPopup.show(screen.availWidth,screen.Height - 145,180,116);

?

??? var realHeight = oPopupBody.scrollHeight;

?

??? oPopup.hide();

?

??? // Shows the actual popup object with correct height.

?

??? oPopup.show(screen.availWidth,116);

?

??? window.setTimeout("oPopup.hide()",5000);

?

}

?

层实体如下:

?

?

?

?

<DIV id="eMeng" style="BORDER-RIGHT: #455690 1px solid; BORDER-TOP: #a6b4cf 1px solid; Z-INDEX: -1000; LEFT: 0px; VISIBILITY: hidden; BORDER-LEFT: #a6b4cf 1px solid; WIDTH: 180px; BORDER-BOTTOM: #455690 1px solid; POSITION: absolute; TOP: 0px; HEIGHT: 116px; BACKGROUND-COLOR: #c9d 3f3">

?

??????????? <TABLE style="BORDER-TOP: #ffffff 1px solid; BORDER-LEFT: #ffffff 1px solid" cellSpacing="0"

?

??????????????? cellPadding="0" width="100%" bgColor="#cfdef4" border="0" ID="Table8">

?

??????????????? <TBODY>

?

??????????????????? <TR>

?

??????????????????????? <TD vAlign="middle" width="30" height="24"><IMG src="../Images/Poppms.gif"></TD>

?

??????????????????????? <TD style="FONT-WEIGHT: normal; FONT-SIZE: 9pt; BACKGROUND-IMAGE: url(msgboximages/top.gif); COLOR: # 1f336b; PADDING-TOP: 4px"

?

??????????????????????????? vAlign=center width="100%">系统提示：</TD>

?

?

?

?

??????????????????????? <TD vAlign="middle" align="right" width="19"><IMG title="关闭" style="CURSOR: hand" onclick= "self.close()" hspace="3" src="../Images/PopClose.gif"></TD>

?

??????????????????? </TR>

?

??????????????????? <TR>

?

??????????????????????? <TD colSpan="3" height="90">

?

??????????????????????????? <DIV style="BORDER-RIGHT: #b 9c9ef 1px solid; PADDING-RIGHT: 13px; BORDER-TOP: #728eb8 1px solid; PADDING-LEFT: 13px; FONT-SIZE: 9pt; PADDING-BOTTOM: 13px; BORDER-LEFT: #728eb8 1px solid; WIDTH: 100%; COLOR: # 1f336b; PADDING-TOP: 18px; BORDER-BOTTOM: #b 9c9ef 1px solid; HEIGHT: 100%"> <b>userName</b>?

?

??????????????????????????????? 您共有<B><FONT color="red">allCount</FONT></B>条新消息</FONT><BR>

?

??????????????????????????????? 其中：<BR>

?

??????????????????????????????? <a href="#" onclick="parent.window.parent.document.frames[′CenterFrame′].location.href=′/Affairs/mail/ReceiveBox.aspx?Refresh=1′">

?

??????????????????????????????????? 新邮件有 <FONT color="red"><B>mailCount</B></FONT> 封。</a><BR>

?

??????????????????????????????? <a href="#" onclick="parent.window.parent.document.frames[′CenterFrame′].location.href = ′/Affairs/Pending/Pending.aspx′">

?

??????????????????????????????????? 新事件有 <FONT color="red"><B>pendingCount </B></FONT>条.</a><BR>

?

??????????????????????????? </DIV>

?

??????????????????????? </TD>

?

??????????????????? </TR>

?

??????????????? </TBODY></TABLE>

?

??????? </DIV>

?

这样就可以实现访问WebService和显示相关信息了。当然了，定时访问还要设置一个函数setInterval

function VisitService()

?{

????? HasNewMail();

????? window.setInterval("HasNewMail()",60000); ????

?}

在页面加载事件中运行这个函数就能实现定时访问了。

直接用层来实现Popup效果也是一种不错的方法，这里给别人写的代码。上面的层实体也从这个例子中得到的。

var divTop,divLeft,divWidth,divHeight,docHeight,docWidth,objTimer,i = 0;

var?? divBody?? = "";

function SaveDIVInnerHTML()

{

?????? divBody =? document.getElementById("eMeng").innerHTML;

}

function getMsg(allCount,pendingCount)

{

?????? try{

?????? divTop = parseInt(document.getElementById("eMeng").style.top,10)

?????? divLeft = parseInt(document.getElementById("eMeng").style.left,10)

?????? divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)

?????? divWidth = parseInt(document.getElementById("eMeng").offsetWidth,10)

?????? docWidth = document.body.clientWidth;

?????? docHeight = document.body.clientHeight;

?????? document.getElementById("eMeng").style.top = parseInt(document.body.scrollTop,10) + docHeight + 10;//? divHeight

?????? document.getElementById("eMeng").style.left = parseInt(document.body.scrollLeft,10) + docWidth - divWidth

?????? document.getElementById("eMeng").style.visibility="visible";????

?????? alert(divBody);

?????? document.getElementById("eMeng").innerHTML??????? = document.getElementById("eMeng").innerHTML.replace(/allCount/g,allCount);

?????? document.getElementById("eMeng").innerHTML??????? = document.getElementById("eMeng").innerHTML.replace(/mailCount/g,mailCount);

?????? document.getElementById("eMeng").innerHTML??????? = document.getElementById("eMeng").innerHTML.replace(/pendingCount/g,pendingCount);

?????? objTimer = window.setInterval("moveDiv()",10)?

?????? }

?????? catch(e){}

}

function moveDiv()

{

?????? try

?????? {

?????? if(parseInt(document.getElementById("eMeng").style.top,10) <= (docHeight - divHeight + parseInt(document.body.scrollTop,10)))

?????? {

?????? window.clearInterval(objTimer)

?????? objTimer = window.setInterval("resizeDiv()",1)

?????? }

?????? divTop = parseInt(document.getElementById("eMeng").style.top,10)

?????? document.getElementById("eMeng").style.top = divTop - 1

?????? }

?????? catch(e){}

}

function resizeDiv()

{

?????? i+=1

?????? if(i>500) closeDiv()

?????? try{

?????? divHeight = parseInt(document.getElementById("eMeng").offsetHeight,10)

?????? docWidth = document.body.clientWidth;

?????? docHeight = document.body.clientHeight;

?????? document.getElementById("eMeng").style.top = docHeight - divHeight + parseInt(document.body.scrollTop,10)

?????? document.getElementById("eMeng").style.left = docWidth - divWidth + parseInt(document.body.scrollLeft,10)

?????? }

?????? catch(e){}

}

function closeDiv()

{

?????? document.getElementById(′eMeng′).style.visibility=′hidden′;

?????? if(objTimer) window.clearInterval(objTimer)

?????? document.getElementById("eMeng").innerHTML??????? = divBody;

}

?