Web2.0聊天室设计

Company Logo 机械工业出版社
17.2 Ajax技术实现方法
动态网页设计教程——美工与技术
Visual Studio 2008 集成了Ajax组件，可以直接创 建Ajax窗体，极大地简化了Ajax开发的复杂性，使用 户获得良好的交互体验。
Company Logo 机械工业出版社
17.1 Ajax技术亮点
动态网页设计教程——美工与技术
如果说最大亮点是使用面向对象的方式进行设计的话， 那么Ajax技术就是改进了用户界面的交互方式，提供了无刷新的 显示方案。Ajax 是一种在 2005 年由 Google 推广开来的编程 模式。 Ajax技术具有以下优势：轻服务器的负担。Ajax的根本理念是 “按需取数据”，用什么就取什么、用多少就取多少，就不会有 数据的冗余和浪费，减少了数据下载总量，而且更新页面时不用 重载全部内容，只更新需要更新的那部分即可。刷新更新页面， 减少用户实际和心理等待时间。“按需取数据”的理念减少了数 据的实际读取量。Ajax是基于标准化的并被广泛支持的技术，并 且不需要插件或下载小程序。Ajax可以调用外部数据，也可以实 现数据聚合的功能，使Web中的界面与应用分离。
Company Logo 机械工业出版社
17.2.2 新建Ajax Web窗体
动态网页设计教程——美工与技术
选择工具箱中的Ajax Extensions工具组中的UpdatePanel控件， 拖动到页面ScriptManager控件后面。
Company Logo 机械工业出版社
17.2.1 新建Ajax网站
动态网页设计教程——美工与技术
打开Visual Studio 2008，选择菜单“文件|新建网 站”，选择网站，在右上角的网站框架中务 必选择.NET Framework 3.5框架，否则不能新建 Ajax网页。
Company Logo 机械工业出版社
17.3 Ajax聊天室设计
动态网页设计教程——美工与技术
利用Ajax技术我们可以进行无刷新聊天室的设计，其中一个技术 的关键就是数据的刷新显示，可以使用Ajax控件组中的Timer （时间）控件来控制页面的刷新。
Company
LOGO
动态网页设计教程——美工与技术
第17章 Web 2.0聊天室设计 ——Ajax技术实现和谐交互
徐延章 编著
பைடு நூலகம்
第17章 Web 2.0聊天室设计 ——Ajax技术实现和谐交互
动态网页设计教程——美工与技术
Ajax技术是Web 2.0时代的一个关键技术，主要用来 改善用户界面的交互，我们可以利用该技术开发出更具 人性化的Web界面。本章利用Ajax技术，进行Web 2.0聊天室设计。
打开数据库中的表选项，单击右键，选择新建表，设计用户表字 段。设置ID类型为int型，自动编号，标识规范为是，单击保存按 钮，将表保存为Users，打开Users表，输入一些记录。
Company Logo 机械工业出版社
17.3.1 数据库设计
动态网页设计教程——美工与技术
动态网页设计教程——美工与技术
同样双击按钮编写程序如下：
protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "欢迎你，" + TextBox1.Text; } 单击调试按钮，打开浏览器，输入姓名，单击显示结果按钮，我们没有发 现状态栏的加载状态，也就是说我们观察不到网页的刷新，从而实现了友 好的交互。
mandText = "SELECT * FROM Users WHERE (UserName =@UserName and Password=@Password)"; cmd.Parameters.Add("@UserName", SqlDbType.NVarChar).Value = TextBox1.Text.Trim(); cmd.Parameters.Add("@Password", SqlDbType.NVarChar).Value = TextBox2.Text.Trim(); SqlDataReader reader = cmd.ExecuteReader(); //判断是否存在用户 if (reader.Read()) { //关闭阅读器与连接 reader.Close(); conn.Close(); Session["username"] = TextBox1.Text.Trim();//在Session中存储用户名 Response.Redirect("main.aspx");//重定位到聊天界面 }
登录按钮程序中重要的内容就是验证用户名和密码后进行用户名 的记录，这里采用了Session的方式，即 “Session["username"] = TextBox1.Text.Trim();”然后将 页面转向聊天界面main.aspx，即 “Response.Redirect("main.aspx");”。这里main.aspx还 没有建立，将在下面进行设计。
Company Logo 机械工业出版社
17.2.2 新建Ajax Web窗体
动态网页设计教程——美工与技术
设计指导：ScriptManager是 Ajax一个重要的控件， 它用来处理页面上的所有 Ajax组件以及局部页面的更新， 生成相关的客户端脚本，所有需要支持 Ajax的 页面上有且只能有一个ScriptManager控件。在 ScriptManager控件中我们可以指定需要的脚本库，或者指定通 过JS来调用的Web Service，还可以指定页面错误处理。
Company Logo 机械工业出版社
17.2.2 新建Ajax Web窗体
动态网页设计教程——美工与技术
在UpdatePanel控件中，放入和前面相同的控件，设计成如图所 示效果。
Company Logo 机械工业出版社
17.2.2 新建Ajax Web窗体
Company Logo 机械工业出版社
17.3.3 聊天室界面设计
动态网页设计教程——美工与技术
由于聊天界面中存在信息显示和信息发布两个版块，这里采用嵌 入框架方式进行组织，在主文件中设计信息发布版块，嵌入框架 信息显示版块。新建信息显示版块文件chat.aspx，选择Ajax Web窗体。
Company Logo 机械工业出版社
第17章 Web 2.0聊天室设计 ——Ajax技术实现和谐交互
动态网页设计教程——美工与技术
1
17.1 Ajax技术亮点
2
3
17.2 Ajax技术实现方法
17.3 Ajax聊天室设计
Company Logo 机械工业出版社
Company Logo 机械工业出版社
17.3.2 用户登陆功能设计
动态网页设计教程——美工与技术
双击登录按钮，编写Button1_Click主要代码如下： SqlCommand cmd = conn.CreateCommand();



protected void Button1_Click(object sender, EventArgs e) { Label1.Text = "欢迎你，" + TextBox1.Text; }
Company Logo 机械工业出版社
17.2.1 新建Ajax网站
动态网页设计教程——美工与技术
17.2.2 新建Ajax Web窗体
动态网页设计教程——美工与技术
下面我们新建一个Ajax网页，在解决方案管理器中网站文件夹上 单击右键，选择新建文件，在新建文件对话框中，选择Ajax Web 窗体。单击确定按钮，打开设计视图。我们发现这个窗体中自动 添加了一个ScriptManager控件。
17.2.2 新建Ajax Web窗体
动态网页设计教程——美工与技术
设计指导：UpdatePanel控件是一个功能非常强大的控件，用于 放置需要更新的控件，是一个重要的容器。其属性Triggers很重 要，Triggers的类型有两种AsyncPostBackTrigger， PostBackTrigger。AsyncPostBackTrigger主要用来指定某个 控件的某个事件引发异步回传(asynchronous postback)，即部 分更新。PostBackTrigger是来指定UpdatePanel内的某个控件 引发整个页面的更新（normal postback）。
同样新建聊天表，设计字段，设置ID类型为int型，自动编号，标 识规范为是，保存为Chat，打开该表输入一些记录。
Company Logo 机械工业出版社
17.3.2 用户登陆功能设计
动态网页设计教程——美工与技术
用户聊天离不开用户名，所以应该是注册登录后进入聊天界面， 第14章讲解过注册登录的设计，这里简单列出设计界面，只做一 个登录功能，新建一个普通Web窗体，设计登陆界面。
Company Logo 机械工业出版社
17.2.1 新建Ajax网站
动态网页设计教程——美工与技术
为了比较一下Ajax网页和普通网页的不同，我们先按照前面的方 法打开Defaul.aspx网页，设计界面如图所示，这是一个前面讲 过的显示信息的网页，输入姓名后单击按钮显示信息。双击按钮 编写程序如下：
单击调试按钮，打开浏览器，输入姓名，单击显示结果按钮，我 们发现状态栏中显示了页面加载的进度状态，也就是说按钮引起 了网页的刷新，如果网页文字和图片内容很多，网速很慢的情况 下，页面的刷新将会需要一段时间。这样的情况必然造成交互的 困难，尤其是在需要更新很少信息的情况下。