用Atlas来实现一个基于AJAX的无刷新Chatroom
Atlas是微软提供的一个AJAX工具包,封装了实现AJAX的所需的Java Script,使用起来非常简单,可以直接调用Web Service方法,然后通过Asynchronous Call的方式回调给客户端script,我用Atlas写了个简单的基于AJAX的无刷新chatroom:
Atlas Chatroom
http://www.worong.com/atlaschat/
为了引用Web Service,首先要在页面中添加以下客户端脚本:
用来显示和添加message的调用如下,对于每个方法的调用需要三个参数,分别是:Web Service方法的参数、调用成功后的回调函数、调用超时的回调函数。
Atlas的官方网站是http://beta.asp.net/default.aspx?tabindex=7&tabid=47,虽然提供了对非IE浏览器的支持,但是在Firefox中更新div会有刷新的感觉,在Mac的Safari上也根本就不work
Atlas Chatroom
http://www.worong.com/atlaschat/
为了引用Web Service,首先要在页面中添加以下客户端脚本:
<script language="JavaScript" src="ChatService.asmx/js"/>
用来显示和添加message的调用如下,对于每个方法的调用需要三个参数,分别是:Web Service方法的参数、调用成功后的回调函数、调用超时的回调函数。
function GetMsg() {
AtlsChat.ChatService.GetConversation(
"", //params
OnComplete, //Complete event
OnTimeout //Timeout event
);
return false;
}
function Add() {
document.getElementById('info').innerHTML = '<span style="background-color: yellow"> posting </span>';
AtlsChat.ChatService.Add(
document.getElementById('inputName').value.replace('\t',' ')+'\t'+ document.getElementById('inputMsg').value.replace('\t',' '),
GetMsg,
OnTimeout
);
return false;
}
function OnComplete(result)
{
document.getElementById('msg').innerHTML = result;
document.getElementById('info').innerHTML = "";
}
function OnTimeout(result)
{
document.getElementById('info').innerHTML = "time out";
}
AtlsChat.ChatService.GetConversation(
"", //params
OnComplete, //Complete event
OnTimeout //Timeout event
);
return false;
}
function Add() {
document.getElementById('info').innerHTML = '<span style="background-color: yellow"> posting </span>';
AtlsChat.ChatService.Add(
document.getElementById('inputName').value.replace('\t',' ')+'\t'+ document.getElementById('inputMsg').value.replace('\t',' '),
GetMsg,
OnTimeout
);
return false;
}
function OnComplete(result)
{
document.getElementById('msg').innerHTML = result;
document.getElementById('info').innerHTML = "";
}
function OnTimeout(result)
{
document.getElementById('info').innerHTML = "time out";
}
最后,需要在页面中引用Atlas提供的几个js:
<atlas:Script ID="Script1" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Mozilla" />
<atlas:Script ID="Script2" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Firefox" />
<atlas:Script ID="Script3" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="AppleMAC-Safari" />
<atlas:Script ID="Script4" runat="server" Path="~/ScriptLibrary/AtlasCore.js" />
<atlas:Script ID="Script5" runat="server" Path="~/ScriptLibrary/AtlasCompat2.js" Browser="AppleMAC-Safari" />
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
<!-- Repath the following src attributes, using regular client relative paths as necessary -->
<add src="ScriptLibrary/AtlasUI.js" />
<add src="ScriptLibrary/AtlasControls.js" />
</references>
<components>
</components>
</page>
</script>
<atlas:Script ID="Script2" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="Firefox" />
<atlas:Script ID="Script3" runat="server" Path="~/ScriptLibrary/AtlasCompat.js" Browser="AppleMAC-Safari" />
<atlas:Script ID="Script4" runat="server" Path="~/ScriptLibrary/AtlasCore.js" />
<atlas:Script ID="Script5" runat="server" Path="~/ScriptLibrary/AtlasCompat2.js" Browser="AppleMAC-Safari" />
<script type="text/xml-script">
<page xmlns:script="http://schemas.microsoft.com/xml-script/2005">
<references>
<!-- Repath the following src attributes, using regular client relative paths as necessary -->
<add src="ScriptLibrary/AtlasUI.js" />
<add src="ScriptLibrary/AtlasControls.js" />
</references>
<components>
</components>
</page>
</script>
Atlas的官方网站是http://beta.asp.net/default.aspx?tabindex=7&tabid=47,虽然提供了对非IE浏览器的支持,但是在Firefox中更新div会有刷新的感觉,在Mac的Safari上也根本就不work