用Ajax实现网页实时消息功能

在开发Web应用程序时，经常会遇到这样一个问题：如何在网页上实现类似于MSN、QQ的实时提醒功能。我们知道，在Web应用程序中，浏览器和服务器之间是通过提交请求/回复响应的方式来完成信息传递的，也就是说如果要实时检测服务器端的数据，浏览器必须不断地发送请求。但问题是，这样一来会大大加重服务器的负担，而且还会导致浏览器界面的不断刷新。其实，大家如果掌握了Ajax，要解决上面的问题就容易多了。下面，笔者就通过ASP.NET Ajax 1.0框架给大家详细分析一下具体实现的过程。



² 场景说明

在服务器的一个Access数据库中存在一张用来存放邮件信息的MailBox数据表。现在希望当这个数据表中插入新的记录时，在用户浏览的Web页面上显示收到新邮件的提醒消息。由于本文的重点是讨论Ajax的消息提醒功能，在对MailBox数据表执行读写操作时做了简化了处理，没有按不同的用户划分接收到的消息。

² 功能实现

一、 服务器代码实现

1. 在VS2005或VWD的“起始页”上单击“创建网站”链接，然后在“新建网站”窗口下选中“ASP.NET AJAX-Enabled Web Site”模板，单击确定。

2. 在“解决方案资源管理器”下选中新建项目，单击鼠标右键，从弹出菜单上选择“添加新项”增加一个Web窗体AjaxMessage_Server.aspx；

3. 在新建Web窗体上放置一个UpdatePanel控件，然后在UpdatePanel内放置一个Timer控件和一个Label控件，并将Timer控件的Interval属性设置为6000（即间隔时间为6秒），将Label控件的Text设置为空，Visible属性设置为False；

4. 切换到代码窗口，输入以下代码：

    Protected Sub Timer1_Tick(ByVal sender As Object, ByVal e As System.EventArgs)

        Dim oldCount As Integer = CType(Session("EmailCount"), Integer)

        Dim newCount As Integer = GetMailCount()

        If newCount > oldCount Then

            Label1.Text = String.Format("你有{0}封新的邮件！", newCount - oldCount)

            Label1.Visible = True

        End If

    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        If Not IsPostBack Then

            Session("EmailCount") = GetMailCount()

        End If

    End Sub

    Private Function GetMailCount() As Integer

        Dim dbConn As OleDbConnection = New OleDbConnection("Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & Server.MapPath("sample.mdb") & ";Persist Security Info=False")

        Dim dbCmd As OleDbCommand = New OleDbCommand("Select Count(*) as mailCount From MailBox", dbConn)

        dbConn.Open()

        Dim i As Integer = dbCmd.ExecuteScalar

        dbConn.Close()

        dbCmd.Dispose()

        dbConn.Dispose()

        Return i

    End Function

5. 打开Default.aspx文件，在Web窗体上放置一个 AccessDataSource控件，并完成数据源的配置；接着再增加一个DetailsView控件，将数据源设置为AccessDataSource控件，同时启用插入功能。

6. 在AjaxMessage_Server.aspx页面中嵌入一个iFrame，将iFrame的包含文件设置为Default.aspx

7. 运行示例程序，增加一条新的数据就可以看到实际效果了。



二、 客户端脚本实现

虽然借助ASP.NET Ajax提供的UpdatePanel控件仅仅使用服务器代码就实现了网页消息功能，但是由于每次执行时，都需要将服务器控件的状态数据在浏览器和服务器之间来回传递，实际的执行效率并不高。而要克服这个缺点，最佳的方法就是采用客户端脚本＋Web服务的方式。

1. 在之前创建的Web项目下新建一个Web服务文件GetMailCount.asmx，并删除默认创建的HelloWorld方法，然后将GetMailCount()函数复制到代码文件；接着在Public Class GetMailCount前增加一行元属性声明： ，这是由ASP.NET AJAX提供元属性声明，表示该Web服务可以被客户端的脚本调用。完成后，在GetMailCount.asmx文件上单击右键，从弹出菜单上选择“在浏览器中查看”测试一下Web服务的运行情况；

2. 再新建一个Web窗体文件AjaxMessage_Client.aspx，在窗体上方放置一个Scriptmanager控件，然后切换到页面文件的源视图，在“