现在的位置: 首页 > 综合 > 正文

用Atlas来实现一个基于AJAX的无刷新Chatroom

2012年04月30日 ⁄ 综合 ⁄ 共 2298字 ⁄ 字号 评论关闭
Atlas是微软提供的一个AJAX工具包,封装了实现AJAX的所需的Java Script,使用起来非常简单,可以直接调用Web Service方法,然后通过Asynchronous Call的方式回调给客户端script,我用Atlas写了个简单的基于AJAX的无刷新chatroom:

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">&nbsp;posting&nbsp;</span>';
    AtlsChat.ChatService.Add(
    document.getElementById('inputName').value.replace('\t','
&nbsp;&nbsp;&nbsp;')+'\t'+ document.getElementById('inputMsg').value.replace('\t','&nbsp;&nbsp;&nbsp;'),
    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的官方网站是http://beta.asp.net/default.aspx?tabindex=7&tabid=47,虽然提供了对非IE浏览器的支持,但是在Firefox中更新div会有刷新的感觉,在Mac的Safari上也根本就不work

抱歉!评论已关闭.