使用 Mike Schwarz 的 AJAX 库的示例聊天应用程序

• 下载演示项目 - 46.5 Kb

引言

本文描述了一个使用 Mike Schwarz 的 AJAX 库的示例聊天应用程序。 随着 AJAX 作为 Web 的一种新的开发模式而发展，每个人似乎都对它更感兴趣。 在这里，我使用了由 Mike Schwarz 开发的 .NET 的一个 AJAX 库。 该库基本上是一个 HTTP 处理程序，它将客户端的 AJAX 请求重定向到适当的类型。 该库反过来使用 JSON - JavaScript 对象表示法，这是一种数据交换格式； 使用 JSON，我们甚至可以在客户端访问复杂的类型。

使用代码

要使用 Schwarz 的 AJAX 库，我们必须注册要与 AJAX 调用关联的类型

// Register

Ajax.Utility.RegisterTypeForAjax(typeof(Chat));

在 web.config 中添加一个 HTTP 处理程序部分

<httpHandlers>
    <add verb="POST,GET" path="ajax/*.ashx" 
         type="Ajax.PageHandlerFactory, Ajax" />
</httpHandlers>

您可以在库文档中找到更多详细信息。 现在，开始编写代码：该应用程序主要由两个文件组成，Chat.aspx 和 DragAndPost.js。 DragAndPost.js 包含一个发布 AJAX 请求并返回哈希表并填充开放聊天室的函数。

您将有一个上下文菜单来打开私有聊天室，您可以使用相同的上下文来邀请。 源代码非常简单，我们只需要在 JavaScript 中配置很多东西，例如在双击时打开 div 等。 请发表您的评论，以便我可以改进它。

此函数在双击聊天室时创建一个 div

function CreateDiv(DivID,Roomid)
{
    ParentElement=document.getElementById("TRCHAT");
    var Divelement=document.createElement("DIV");
    Divelement.align="right";
    Divelement.setAttribute('id',DivID);
    Divelement.setAttribute('name',DivID);
    Divelement.style.width=250;
    Divelement.style.height=300;
    Divelement.style.left=200;
    Divelement.style.top=170;
    Divelement.style.position='absolute';
    Divelement.style.background='#9fc9d3';
    Divelement.style.cursor='Move';
    ParentElement.appendChild(Divelement);
    /
    /
}
//The Drag part of Div is handled By

function movemouse(e)
{
  if (isdrag)
  {
    fobj.style.left = nn6 ? tx + e.clientX - x : 
                            tx + event.clientX - x;
    fobj.style.top  = nn6 ? ty + e.clientY - y : 
                            ty + event.clientY - y;
    return false;
  }
}
function selectmouse(e) 
{
  fobj = nn6 ? e.target : event.srcElement;
  if (fobj.parentElement.tagName!="DIV" 
                 && fobj.tagName=="DIV")
  {
        isdrag = true;
        tx = parseInt(fobj.style.left+0);
        ty = parseInt(fobj.style.top+0);
        x = nn6 ? e.clientX : event.clientX;
        y = nn6 ? e.clientY : event.clientY;
        document.onmousemove=movemouse;
        return false;
  }
}
document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

我使用了一个类似字符串构建器的类来加速客户端字符串操作

//StringBufferLikeClase

function StringBuffer() { 
  this.buffer = [];
} 

StringBuffer.prototype.append = 
  function append(string) { 
    this.buffer.push(string); 
    return this; 
}; 

StringBuffer.prototype.toString = 
  function toString() { 
    return this.buffer.join(""); 
};

历史

• 发布于 2006 年 3 月 7 日。