课程设计二――无刷新聊天室

ASP动态网页制作教程第13章课程设计二——无刷新聊天室主要内容课程设计的目的3.1设计思路3.2设计过程3.313.1课程设计的目的•随着Internet技术的飞速发展，网络已经成为人们生活中不可缺少的一部分，通过聊天室在线聊天已成为网络上人与人之间沟通、交流和联系的一种方式。•为此，越来越多的网站开始提供在线聊天的功能。与此同时，聊天室也以其方便、快捷、低成本等优势受到众多企业的青睐，很多企业的网站中也加入了聊天室模块，以达到增进企业与消费者之间、消费者与消费者之间相互交流的目的。•聊天室实现的主要功能是：接收各个客户端的聊天信息，然后按照其聊天对象将该信息发送到目标浏览器上。在一个浏览器的窗口中，既能输入上网者的发言，又能看到自己与他人的聊天记录。同时，为了便于上网者选择谈话对象，窗口中需要提供目前在线者的名单。•普通聊天室有两个缺点：第一，每次刷新都要重新获得数据，这样就增加了服务器的负担；第二，不断刷新页面会造成屏幕的闪动。本次课程设计的目的就是编写一个无刷新聊天室，该聊天室不但可以实时显示在线人员列表及聊天内容，而且增加了聊天表情和文字颜色选择的功能。•无刷新聊天室的主页面如图13-1所示。图13-1聊天室的主页面13.2设计思路•实现无刷新聊天室主要应用的技术是Ajax技术和ASP的Application对象、Session对象以及Global.asa文件等。无刷新聊天室的设计思路如下。（1）实现用户登录。用户登录时，将用户名保存到定义的Application变量和Session变量中，并将用户头像也保存到Application变量中。同时，更新相关Application变量值。（2）实现在线人员列表。在聊天室主页面的左侧，将保存在Application变量中的用户名和用户头像信息以无刷新方式输出到浏览器。（3）保存并显示聊天内容。当用户提交聊天内容时，将聊天信息保存到Application变量中。然后，在聊天内容显示区以无刷新方式显示聊天信息，即实时地显示最新聊天信息而不是刷新整个页面的内容。13.3设计过程13.3.1Global.asa文件的创建•Global.asa文件是用来存放执行任何ASP应用程序期间的Application、Session事件程序，当Application或者Session对象被第一次调用或者结束时，就会执行该Global.asa文件内的对应程序。•一个应用程序只能对应一个Global.asa文件。Global.asa文件应存放在网站的根目录下运行。•在设计聊天室程序时，可以创建Global.asa文件来对一些聊天信息进行初始化。例如，初始化默认的的聊天对象名称、聊天头像、聊天信息、聊天数量、用户数量等。13.3.2登录页面的设计•运行聊天室程序首先进入的是登录页面，在该页面输入用户名、选择用户头像后，才可以进入到聊天室主页面。聊天室的登录页面运行结果如图13-2所示。图13-2登录页面•在登录页面index.asp中，首先判断用户输入的用户名是否与在线用户名重复，如果重复则要求用户重新输入；如果不重复则将用户名和用户头像分别保存在application（“UserName”）变量和Application（“head”）变量中，同时，将用户名保存到Session变量中。然后允许用户进入到聊天室的主页面。13.3.3聊天室主页面设计•聊天室主页面chatroom.asp中使用了框架：在一个底部框架的上框架中嵌套了一个左侧框架。在左框架中显示在线用户列表，在底部框架中可以发表聊天信息，在主框架中显示聊天信息。图13-3聊天室主页面设计效果图13.3.4在线用户列表的设计•应用Ajax技术可以实现实时地显示在线用户列表，即在新用户进入聊天室的同时局部刷新在线用户列表而不是刷新整个页面。•为了提高程序代码的可用性，可以将创建XmlHttpRequest对象的代码封装在xmlHttpRequest.js文件中，需要使用此段代码的页面直接引用该文件即可。13.3.5用户发言的设计•在用户发言页面bottom.asp中建立表单，并插入列表/菜单、文本框、按钮等控件，用于用户选择聊天表情、选择字体颜色、显示聊天对象、输入聊天内容等。13.3.6显示聊天信息的设计•在主框架页面main.asp中显示所有的聊天信息。其原理是：创建XmlHttpRequest对象向服务器发送HTTP请求，以读取showchat.asp页面中输出的最新一条聊天信息。•这样，就实现了局部刷新数据的功能，而不是把所有聊天信息再重新进行输出，以达到不刷屏、信息显示速度快的效果。13.3.7退出聊天室的设计•在聊天室主页面中单击“退出聊天室”按钮，即可退出聊天室。退出时将显示如图13-4所示的对话框。图13-4退出聊天室•退出聊天室的设计思路是将去除保存在Application（“UserName”）变量和Application（“head”）变量中的当前用户信息。可以通过遍历数组数据的方法过滤掉当前用户的用户名和用户头像。