如何使用 AJAX 显示类似 Messenger 的弹出窗口

• 下载源代码 - 212 KB

引言

您已经在使用 MSN Messenger 与朋友、亲戚、业务伙伴等进行聊天。当有人登录时，屏幕右下角会弹出一个小窗口，通知您朋友 X 刚刚登录。这是 MSN Messenger 通知您联系人在线状态变化的一种好方法。

在 ASP.NET 页面上使用相同的技术怎么样？换句话说，假设您正在监视一个用户在线下单的数据库表，并且您希望在有新请求进入该数据库表时得到通知。

在本文中，我们将介绍如何在向数据库表添加新记录时实现类似 Messenger 的弹出窗口。该弹出窗口将显示在 ASP.NET 页面顶部的屏幕右下角，通知您已添加新记录。我们将使用 ASP.NET 2.0 AJAX 1.0 扩展，尤其是随 AJAX 扩展附带的客户端库。

背景

在本文中，我们将使用一个名为 *MyInbox* 的数据库表来模拟您的邮件服务器收件箱。此表包含 *EmailFrom*、*Body* 和 *Date* 列。这些列将作为示例，类似于您在收件箱中收到的电子邮件。

使用代码

构建 JavaScript

我们将创建一个新的支持 AJAX 的网站，然后在 HTML 源代码中打开 *Default.aspx* 页面，并开始添加我们的 JavaScript，它将处理弹出窗口的显示和隐藏，以及查询数据库以查看是否有任何新电子邮件被插入。

首先，我们将定义一个全局变量。

var numberOfEmails_original= 0;

`numberOfEmails_original` 变量将存储页面首次加载时数据库表中的电子邮件数量。稍后我们将看到何时以及如何使用此变量。然后，我们将为 `Application` 的 `Init` 方法附加一个事件处理程序。

Sys.Application;
app.add_init(applicationInitHandler);
function applicationInitHandler(sender, args) 
{
  InboxService.GetLatestNumberOfEmails(OnCurrentNumberOfEmailsReady);
}

我们在 `Application` 初始化时所做的是进行脚本服务调用，以执行我们稍后将在文章中讨论的 AJAX 服务中的 `GetLatestNumberOFEmails` 方法。我们指定了一个成功回调函数，以便在服务器发送响应时运行。

这里的想法是，当页面首次加载时，我们从服务器获取当前的电子邮件数量，并将其存储在 `numberOfEmails_original` 中，如下面的 `OnCurrentNumberOfEmailReady` 回调函数所示。

function OnCurrentNumberOfEmailsReady(result, userContext, methodName) 
{
  numberOfEmails_original= result;
  // Start Checking
  StartChecking();
}

如您所见，我们将 AJAX 服务返回的结果设置为本地变量 `numberOfEmails_original`，然后调用一个名为 `StartChecking()` 的方法。

现在我们知道了当前存储在数据库中的原始电子邮件数量，我们可以从现在开始检查添加到数据库表中的任何新电子邮件。

`StartChecking` 方法如下所示：

function StartChecking() 
{
  InboxService.GetLatestNumberOfEmails(OnLastestNumberOfEmailsReady);
}

`StartChecking` 函数什么也不做，只是调用相同的 AJAX 服务方法 `InboxService.GetLastestNumberOfEmails`。但是，这次我们传递了另一个成功回调函数，即 `OnLatestNumberOfEmailsReady`。成功回调函数如下所示。

function OnLastestNumberOfEmailsReady(result, userContext, methodName)
{
  var numberOfEmails_new = result;
  if (numberOfEmails_new > numberOfEmails_original)
  {
    ShowPopup();
    $get("modalBody").innerHTML = numberOfEmails_new - numberOfEmails_original;
    // Update the count here
    numberOfEmails_original = numberOfEmails_new;
  }
  // Start checking again
  window.setTimeout(StartChecking, 10000);
}

该方法首先将 AJAX 服务的结果放入一个名为 `numberOfEmails_new` 的本地变量中。此变量现在保存数据库表中的最新电子邮件数量。

然后，代码检查当前存储在数据库中的电子邮件数量是否大于页面最初从数据库请求的电子邮件数量。这意味着自上次代码查询数据库以来，我们已经向数据库插入了新电子邮件。

如果为真，则调用 `ShowPopup()` 函数，该函数负责以 MSN Messenger 的方式显示弹出窗口。然后，在新电子邮件的数量被填充到弹出窗口的正文中，通知用户收到的新电子邮件数量，最后，代码将数据库表中的当前电子邮件数量设置为 `numberOfEmails_original` 变量。这样，`numberOfEmails_original` 变量就与数据库中的电子邮件数量同步了。刷新此变量的值对于以后在客户端进行检查非常重要。

此方法中的最后一条语句是通过 `window.setTimeout` 函数调用来调用 `StartChecking` 方法。正如您在此处看到的，相同的逻辑将根据 `setTimeout` 函数中放置的毫秒数运行。因此，只要页面正在运行，检查就会继续，每次向数据库表添加新电子邮件时，屏幕上都会显示一个弹出窗口，以通知用户已添加的新电子邮件。

下图显示了页面首次加载时的样子。

当上述页面打开时，在数据库中插入一条新记录，您会注意到一个类似 Messenger 的小弹出窗口显示在页面的右下角，如图 2 所示。

您可以在上图清楚地看到一个弹出窗口，它显示了当页面检查服务器上的数据库表并发现数据库中的当前电子邮件数量大于客户端上存储的电子邮件数量时。

要讨论的最后两个函数是 `ShowPopup` 和 `HidePopup`，它们用作显示和隐藏页面上弹出窗口的实用方法。

构建 AJAX 服务

在本系列的最后一节中，我们将看到我们创建的简单 AJAX 服务，客户端代码将使用该服务访问数据库并检索有关数据库中存储的记录数量的信息。

[ScriptService]
public class InboxService: System.Web.Services.WebService
{
  [WebMethod]
  public int GetLatestNumberOfEmails()
  {
    int numberOfEmails = 0;
 
    using(SqlConnection conn = new SqlConnection
      (WebConfigurationManager.ConnectionStrings[0].ConnectionString))
    {
      using(SqlCommand cmd = new SqlCommand("GetLatestNumberOfEmails", conn))
      {
        cmd.CommandType = CommandType.StoredProcedure;
 
        conn.Open();
        numberOfEmails = (int)cmd.ExecuteScalar();
      }
    }
 
    return numberOfEmails;
  }
}

首先要注意的是位于服务名称顶部的 `ScriptService` 属性。如果您希望您的 Web 服务成为可脚本调用的服务，这一点非常重要。上面的 Web 服务包含一个 Web 方法 `GetLatestNumberOfEmails`，该方法访问数据库并检索数据库中电子邮件或记录的总数。