基于Ajax技术的聊天室的研究与应用

基于Ajax技术的聊天室的研究与应用

王艳

王艳

（北京市经济管理学校,北京100036）

摘要：信息化的迅猛发展使人们生活方式发生深刻变革。人们之间的对话不再是局限在面对面的方式，网络聊天室提供交流信息的另一种场所。传统的聊天室为了实时显示用户在线情况和用户发送的消息，需要定时刷新页面。页面刷新不仅要占用一定的系统资源和网络带宽，而且出现“白屏”现象，对良好的用户体验很不利。Ajax是Web应用的一种新方法，利用Ajax技术开发的聊天室系统不仅解决了页面刷新带来的白屏问题，而且能降低服务器和网络传输负荷。文章介绍了Ajax技术的工作原理，以一个师生交流平台—“EM聊天室”为例描述了Ajax技术在聊天室系统实现过程中的典型应用。

关键词：Ajax；聊天室；异步交互

中图分类号：TP311.52文献标识码：A文章编号：1007-9599(2010)04-0000-03

Research&ApplicationonAjax-basedChatroom

WangYan

(BeijingEconomicManagementSchool,Beijing100036,China)

Abstract:Therapiddevelopmentofinformationtechnologytomakeprofoundchangesinpeople'swayoflife.Dialoguebetweenpeopleisnolongerconfinedtoface-to-facemanner,networkchatroomstoexchangeinformationtoprovideanalternativevenue.Traditionalreal-timechatroomstoshowonlineandsendthemessage,theneedtoregularlyrefreshthepage.Refreshthepageshouldnotonlyoccupyacertaindegreeofsystemresourcesandnetworkbandwidth,anda"blackandwhite"phenomenonofgooduserexperienceisanegative.AjaxisaWebapplicationofanewmethod,theuseofAjaxtechnologydevelopmentsystemofthechatroompagerefreshesnotonlysolvedtheproblemofbringingblackandwhite,alsocanreduceserverloadandnetworktransmission.ThispaperintroducestheAjaxtechnologyworkstoaplatformforteachersandstudents-"EMchatrooms"asanexampletodescribetheAjaxtechnologyinthechatroomsysteminthetypicalapplicationprocess.

Keywords:Ajax;Chatroom;Asynchronousinteractive

一、引言

传统聊天室的程序一般都在客户端网页上设置自动刷新。以这种方法刷新数据会带来一些缺点，比如：对于服务器来讲，每次刷新都要重新获取数据，极大地增加了服务器的负荷，而这种刷新过程又是不断进行的，所以会很严重影响服务器的性能；同时，每次刷新的过程中会产生大量的无用数据；对于客户端的用户来讲，不断刷新页面会造成屏幕的闪动。解决屏幕闪动最重要的一条原则就是，将改动的地方显示到客户端，而那些不需要改动的地方则尽量不要让用户感觉到变化。一个比较好的解决方案就是采用Ajax技术实现无刷新的聊天室应用程序。

我于2008年自行开发的无刷新的聊天室程序----“EM聊天室”。EM是北京经济管理学（Economicmanagerment）校的缩写。当时担任毕业班的《就业指导课》，面临第一次走向社会的学生，他们表现出来的是波动性和迷惘性。他们渴望有人帮助他们分析所遇到的问题，教他们处理问题的方法，但是在实际中我发现很多学生羞于当面咨询老师，不敢与人交流，恐惧暴露自我的缺点。于是，我想搭建一个交流平台--网上聊天室，不仅可以消除他们的顾虑，而且起到了解决问题的作用。

本文对Ajax技术的工作原理进行了阐述，结合“EM聊天室”系统，描述了Ajax技术在聊天室系统实现过程中的典型应用。

二、Ajax技术

（一）什么是Ajax

Ajax是“AsynchronousJavaScriptandXML”的简称，即异步JavaScript和XML。Ajax事实上并不是一种新技术，实际上，它是由技术组合而形成的新的应用方法。

在基于Ajax的应用中，并不是所有技术全部用到，但是XMLHttpRequest对象却是实现Ajax技术的最核心技术。XMLHttpRequest对象负责将用户信息以异步通信的方式发送给服务器端，并接收服务器端返回的响应信息和数据。JavaScript本身并不能向服务器发送请求，可以有两种方法：一种是通过XMLHttpRequest对象发送请求，另一种是使用Widows.open()方法重新打开一个页面向服务器提交请求。不同的是，前者是异步交互方式，后者是同步交互方式。

（二）Ajax的工作原理

与传统的WEB模型相比，Ajax的运行是建立在异步交互的基础上的，异步交互的基本思想是尽量减少等待的时间。基于AJAX的WEB应用开发模型（如图1所示），只传输和更新需要的数据，而不用刷新整个页面，也就是通过网络传输的不是用户真正需要的数据，这样的工作模型不仅加快了用户请求的响应速度，还避免了刷新页面带来的屏幕闪烁。

异步访问和同步访问最大的差别是客户端使用了单独一个层来访问服务端，而和客户交互则全部在客户端解决了。如图1所示，基于Ajax的WEB应用开发模型在用户和服务器之间引入了一个中间件—Ajax引擎，它使用户操作与服务器响应异步化。当用户访问或请求一个具有Ajax功能的页面时，网页会将请求信息交给JavaScript进行处理，当需要提供新的信息时，通过XMLHttpRequest向服务端发送请求，服务端接受请求，根据要求访问数据库或XML文件，并将数据返还客户端的JavaScript程序进一步处理。

三、基于AJAX的聊天室的设计与实现

“EM聊天室”系统除了Ajax技术以外采用的是ASP．NET2．0技术，开发环境为VS2005，选择C#作为开发语言。

本实例比较精巧，具有以下特点：第一，我考虑到聊天室是一种“公共场所”，对消息的持久性要求不高，没有必要使用数据库，但是应该有简单的“记忆”功能，即查看以往的聊天记录，因此，将用户信息和聊天记录保存在聊天引擎ChatEngine里；第二，Server.aspx来统一接收用户的请求，是一个中央处理器；第三，使用Ajax发送消息，取得用户和消息数据，隐藏更新页面。这样，通过少量的文件实现整个聊天室的功能。

图2“EM聊天室”的LOGO

（一）系统功能结构

“EM聊天室”系统功能主要包括：用户登录、发送聊天信息、显示聊天记录、存储聊天记录、显示在线用户列表等。结合Ajax的工作原理，给出“EM聊天室”的功能模块，如图4所示。

（二）基于Ajax聊天室的实现

“EMchatroom”聊天室程序的设计中Ajax技术贯穿于聊天室系统的各个功能模块。

1.客户端的实现。

客户端实际就是Ajax技术的实现，即聊天室的首页和聊天室主界面。最典型的应用为聊天室主界面的实现。聊天室主界面主要包括显示聊天内容、在线用户列表和输入信息区域进行在线聊天的功能。

“EMchatroom”聊天室程序主页界面如图5所示，实现它的文件名为Chat.aspx，通过调用captureReturn()、sniffBrowserType()、showLoadScreen()、setTimers()函数来实现上述三个功能。captureReturn（）函数功能是判断用户输入的聊天记录，如果按下回车键，则说明一条信息输入完毕。在captureReturn（）函数中调用了PostText（）函数，用于获得用户输入的聊天信息，创建的XMLHttpRequest对象发送异步请求，并显示结果。PostText（）函数中又调用了updateAll()函数是更新所有的聊天记录和用户列表。sniffBrowserType()函数用于判断客户端在打开网页时使用的浏览器类型。setTimers()功能是设置间隔一段时间就刷新一次。

图5“EM聊天室”主界面

2.公共模块。

为了实现无刷新技术，在聊天室中要求用户聊天时不需要整个页面刷新即可查看聊天记录，而且在发送消息时也是如此。

当用户输入聊天内容进行发送时，使用Ajax方法来发送请求，包括发送信息、取得消息列表、获取用户列表三个过程。在“EMchatroom”聊天室程序中实现Ajax技术的核心代码主要是Ajaxfunction.js文件，它位于站点目录的js文件夹下。它主要包括的函数是：getAjax（）函数实现创建XMLHttpRequest对象；sniffBrowserType()函数实现获得用户使用浏览器的类型；captureReturn（）函数是一个辅助性函数，就是判断用户是否单击了回车键；postTest()函数用来发送消息文本。消息的内容来源于用户输入文本框对象；setTimers()函数是实现重新设置更新页面的刷新周期的功能；UpdateAll()函数主要是负责更新界面，包括消息列表区域和在线用户列表区域；getUserList()函数是实现更新用户列表的功能；getBufferText()函数是实现更新消息列表的功能。

3.服务器端功能的实现。

聊天室的服务器端主要是处理客户端发送的请求，并将处理的结果返回。本实例把服务器端实现的功能集中在文件Server.aspx.cs中。它负责接收用户的请求，返回用户请求的数据。其操作的对象是一个聊天引擎ChatEngine。聊天引擎ChatEngine是一个数据中心，它负责保存用户信息、消息列表的信息。

它包括增加用户、删除用户、增加聊天记录、显示聊天记录等函数。

从“EM聊天室”主界面中调用Server.aspx有三次，分别是发送聊天信息、取得用户列表、取得消息列表。函数processPostMsg()作用是根据客户端传来的用户名和该用户发送的聊天信息，调用AddText（）函数将消息添加到聊天室。函数processGetMsg()作用是将信息显示出来。函数processUserList()作用是显示用户列表。

四、结束语

Ajax技术的出现，通过对浏览器端的JavaScript和服务器异步通信的组合，使得构建更为动态和响应更灵敏的Web应用程序成为现实。“EM聊天室”，结合Ajax技术来实现能大大降低了服务器的开销并节省了网络带宽。由于客户端与服务端采用异步交互的方式，用户无须等待服务器的处理结果仍可以继续其他操作，减少了用户等待的时间，使界面操作更自然、流畅。虽然在国内对Ajax的应用还处于起步阶段，但是随着Web应用的发展，AJAX技术将会得到更加广泛的应用。

参考文献：

[3]杨国瑞,张思博.基于AJAX的Web应用架构设计,现代电子技术,2006

[4]黄昆.Ajax,老技术聚合新能量.中国计算机用户,2006

[5]DaVidRubinstein.BeyondAJAX.SoftwareDeVeloPmentTimes,2006