用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，首先要在頁面中添加以下用戶端指令碼：

<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