基于ASP.NET的Web应用开发技术实用教程方玉燕电子教案项目7：Ajax聊天室

项目7：Ajax聊天室

掌握ASP.NETAjax基础知识与结构；掌握ASP.NETAjax技术实现的常用控件ScriptManager的使用；掌握ASP.NETAjax技术实现的常用控件Timer的使用；掌握ASP.NETAjax技术实现的常用控件UpdatePanel的使用。知识目标:技能目标:能根据需要，在项目中使用ASP.NETAjax服务端控件实现Ajax技术。项目7：Ajax聊天室

本项目计划总学时12学时（1）情境介绍2学时（2）任务14学时（3）任务28学时项目7：Ajax聊天室

情境介绍聊天室的需求分析

在线聊天室的作用是在互联网上为用户提供一个聊天沟通的场所。聊天室项目中涉及两种不同的角色，分别为管理员和注册会员，其中管理员主要是进行聊天室的管理工作；而为注册会员提供的主要是选择聊天室进行聊天业务。聊天室管理员和注册会员的业务流程如下图情境介绍聊天室功能模块

根据聊天室业务，主要功能分为两大模块即前台和后台。其中前台模块功能包括选择聊天室、会员的注册和登录、在线聊天，在线聊天又分在线用户浏览、发送聊天消息、定时刷新聊天消息和离开聊天室；后台的功能模块包括管理员的登录与注销、会员管理和聊天室管理。聊天室的功能结构如图所示情境介绍网络聊天室的数据库设计

创建数据库MChat_DB，在其中新建三个表，分别为Table_ChatRoom、Table_User、Table_Message。其中Table_ChatRoom表用于保存聊天室的信息，Table_User表用于保存用户的信息，Table_Message表用于保存聊天的信息。

情境介绍存储过程

Pr_AddChatRoom：添加一条聊天室记录Pr_AddMessage：添加一条聊天消息Pr_AddUser：添加一条用户记录Pr_AllChatRoom：显示所有聊天室信息Pr_AllChatRoomOpen：显示所有开放状态的聊天室Pr_GetTop20Messages：显示某个聊天室内最近的20条聊天消息Pr_GetUser：获取某个用户信息Pr_UpdateChatRoom：更新聊天室信息情境介绍多媒体演示及实践演练45分钟任务1管理聊天室为完成本任务，要完成以下几个方面的工作：1．聊天室业务逻辑类的设计；2．管理员登录设计；3．能够使用ASP.NETAjax服务端控件实现页面信息的局部更新。任务1管理聊天室

实战演练

25分钟任务1-1聊天室业务逻辑类的设计

任务1管理聊天室

任务1-2

管理员登录实战演练

35分钟任务1管理聊天室

任务1-3新建聊天室实战演练

35分钟任务1管理聊天室

任务1-4管理聊天室

实战演练

35分钟任务1管理聊天室

Ajax技术概述

Ajax技术是基于XML的异步JavaScript，简称Ajax，Ajax并不是一门新的语言或技术，它实际上是几项技术按一定的方式组合在一起，在共同的协作中发挥各自的作用，它包括:

使用HTML和CSS标准化呈现；

使用DOM实现动态显示和交互；

使用XML和XSLT进行数据交换与处理；

使用XMLHttpRequest进行异步数据读取；

使用JavaScript绑定和处理所有数据。

任务1-4管理聊天室

任务1管理聊天室

Ajax的工作原理Ajax的工作原理相当于在用户和服务器之间加了一个中间层,使用户操作与服务器响应异步化。如图所示给出了传统Web应用模式和基于Ajax的Web应用模式工作过程的区别。

任务1-4管理聊天室

任务1管理聊天室

Ajax的优势

减轻服务器的负担，因为Ajax的根本理念是按需取数据，所以最大可能地减少了冗余请求和响应对服务器造成的负担；

无刷新更新页面，减少用户实际和心理等待时间；

更好的用户体验；

可以把以前的一些服务器负担的工作转移到客户端，利用客户端闲置的处理能力来处理，减轻服务器和带宽的负担，节约空间和带宽的租用成本；

可以调用外部数据；

基于标准化的并被广泛支持的技术，并且不需要插件或下载小程序；

使Web中的界面与应用分离；任务1-4管理聊天室

任务1管理聊天室

ASP.NETAjax控件

ASP.NET内置了5个Ajax控件，分别是ScriptManager、ScriptManagerProxy、UpdatePanel、UpdateProgress和Timer，其中ScriptManager

、UpdatePanel和Timer控件最常用。任务1-4管理聊天室

任务1管理聊天室

ASP.NETAjax控件

1）ScriptManager控件ScriptManager控件是ASP.NET中Ajax功能的中心，该控件可管理一个页面上的所有ASP.NETAjax资源，ScriptManager控件的常用语法如下：任务1-4管理聊天室

任务1管理聊天室

<asp:ScriptManagerID="sm"runat="server"/>一个页面在其层次结构中只能包含一个ScriptManager控件，若要在父页面已具有ScriptManager控件时为嵌套页面、用户控件或组件注册服务和脚本，则需使用ScriptManagerProxy控件。2）UpdatePanel控件通过使用UpdatePanel

控件，可以使网页参与到部分页更新中，而无需编写任何客户端脚本。

UpdatePanel

控件内的任何回发控件都将导致异步回发并刷新面板的内容。也可以配置页面上的其他控件来刷新UpdatePanel控件，可以通过为UpdatePanel

控件定义触发器来做到这一点。UpdatePanel控件Triggers元素内的asp:AsyncPostBackTrigger

元素定义触发器。触发器的控件事件是可选的，如果不指定事件，则触发器事件是控件的默认事件，如对于Button控件来说，默认事件是Click事件。任务1-4管理聊天室

任务1管理聊天室

UpdatePanel控件指定触发器的示例代码

Timer控件

ASP.NETAjaxTimer控件可按照定义的间隔执行回发。如果将Timer控件和UpdatePanel

控件结合在一起使用，可以按照定义的间隔启用部分页更新。使用Timer控件也可以发布整个网页。Ti