大家都知道要在一个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请求消息格式.
POST /WebService/NewsService.asmx HTTP/1.1
Host: 192.168.7.108
Content-Type: text/xml; charset=utf-8
Content-Length: length
SOAPAction: "http://tempuri.org/HasNewMessage"
<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
<HasNewMessage xmlns="http://tempuri.org/">
<userID>string</userID>
</HasNewMessage>
</soap:Body>
</soap:Envelope>
我们就可以根据它来编写我们的SOAP消息了。WebService将会以下面的格式返回我们的请求。
HTTP/1.1 200 OK
Content-Type: text/xml; charset=utf-8
Content-Length: length
<?xml version="1.0" encoding="utf-8"?>
<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">
<soap:Body>
<HasNewMessageResponse xmlns="http://tempuri.org/">
<HasNewMessageResult>string</HasNewMessageResult>
<mailCount>int</mailCount>
<pendingCount>int</pendingCount>
</HasNewMessageResponse>
</soap:Body>
</soap:Envelope>
在这个函数中,我有三个输出,其实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,allCount,mailCount,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,screen.Height - 145,180,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: #c9d3f3">
<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: #b9c9ef 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: #b9c9ef 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,mailCount,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)
divWidth = parseInt(document.getElementById("eMeng").offsetWidth,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;
}