用AJAX实现聊天应用

开篇：润墨网以专业的文秘视角，为您筛选了一篇用AJAX实现聊天应用范文，如需获取更多写作素材，在线客服老师一对一协助。欢迎您的阅读与分享！

聊天室应用也许不是您最关心的话题，但通过本文您可以了解到如何使用ajax构建应用程序，而且该程序不用任何代码库或者工具包，只用JavaScript。

用AJAX构建一个纯粹基于HTML的聊天应用程序――AjaxChat，需要满足许多需求，譬如：

应用程序必须支持多个用户和多个聊天室。

我们已见过后端使用服务器小程序的许多聊天应用解决方案，但这回我们将构建一个有趣一些、可靠一些的方案，使用Struts来构建AjaxChat。

我们希望能够调整聊天室里面显示的消息字体的大小，以便让视力不好的人易于阅读。

只是为了好玩，我们希望能够用一种颜色显示自己的消息，用另一种颜色显示别人的消息。

服务器需要合理处理重复用户、未正确退出的用户等问题。不过，我们不需要登录本身，也就是说，用户账户不会被建立、长久保持。

应当有一个选项可以清空聊天室的“历史”，那样用户随时都有干净的显示画面。

我们在创建AjaxChat应用时，先应该知道要构建什么。该应用程序实际上包括三个不同的屏幕：“登录”屏幕、聊天室（名为大厅）列表和聊天室本身。

登录屏幕相当简单,但需要注意的是，它可不是安全登录，它只是为用户给自己取一个聊天时的昵称提供了方法。

聊天室列表屏幕显示了所有可用聊天室、每个聊天室里面有多少用户在聊天。它还提供了退出按钮。

最后，我们看一下AjaxChat的最重要部分：表示聊天室的屏幕。该屏幕使用表格来布局。读者可能会想为什么不用层叠样式表（CSS）布局技术来实现。答案很简单：这些技术仍处于发展初期，跨浏览器问题仍有待解决。表格仍是我的首选布局技术，在这些问题得到解决之前我们会继续用表格。

接下来先看一下这个程序的文件布局，如图1所示，一个典型的Web应用程序结构。AjaxChat包括三个JSP：index.jsp，这是欢迎页面，也是用户“登录”的地方；lobby.jsp，这是显示聊天室列表的地方；room.jsp，这当然是表示聊天室内部的JSP。有意思的是，它们的复杂性正好依次递增。它们都引用CSS目录下的样式表：styles.css。三者也都利用用于为按钮赋予样式的buttonBG.gif和textBG.gif图像。最后两个图像：zoomDown.gif和zoomUp.gif用于聊天室，提供文本缩放功能。

点击看大图

在inc目录下，我们找到了一个文件：color_options.inc。该文件包括在room.jsp文件里面，包括下拉列表的所有< option>――可在下拉列表选择各种颜色。因为有许多< option>，所以放在一个地方绝对是可取的。

WEB-INF目录含有web.xml（这是Java Web应用程序通常所需的），另外还含有Struts的配置文件：struts-config.xml。在该目录下还会发现app-config.xml，这是自定义的配置文件，里面保存了应用程序的几个参数。最后，读者会发现rooms-config.xml，该文件保存了聊天者可以进入的聊天室。

WEB-INF/classes目录下有我们的服务器端Java类的开始部分。我们可以看到里面有好几个这种Java类，当然会详细探讨所有类。不过简短地说，action目录下的类是我们的Struts Action。actionform目录下的一个类是Struts ActionForm。daemon目录下的一个类是背景线程，将用于清除退出应用程序的用户。dao目录含有AjaxChat使用的一个数据访问对象。dto目录含有三个数据传输对象类，AjaxChat分别用来存储有关聊天室、用户和每个消息的信息。在filter目录下，读者会发现一个服务器小程序过滤器，用于检查就AjaxChat而言请求是否引用了有效会话。listener目录含有一个ContextListener，用于对AjaxChat进行初始化。

最后，ajaxchat根目录含有一个类，用于存储一些配置信息。另外，WEB-INF/lib文件夹含有AjaxChat依赖的所有库。