基于JSP技术和Ajax技术实现的网络聊天室的设计_毕业论文

基于JSP技术和Ajax技术实现的网络聊天室的设计_毕业论文
基于JSP技术和Ajax技术实现的网络聊天室的设计_毕业论文

摘要

编号淮安信息职业技术学院毕业论文

摘要

随着互联网的飞速发展,聊天室这种比较古老的交流方式已经被众多人所认可。通过聊天室在线聊天已成为网络上人与人之间的沟通、交流和联系的一种方式。为此,越来越多的网站开始提供在线的聊天功能。与此同时,聊天室也以其方便、快捷、低成本等优势受到众多企业的亲睐,很多企业的网站中也加入了聊天室,以达到增进企业与消费者、消费者与消费者之间的相互交流和联系的目的。

传统的互联网络聊天室,以显示在线用户和用户信息的实时传送,需要定期刷新页面。刷新页面,不仅要占用一定的系统资源和网络带宽,也会出现“白屏”现象,这对良好的用户体验是非常不利的。 Ajax是一个新的web应用,使用Ajax 技术的发展不仅解决了页面刷新带来的白屏问题,也减少了对服务器和网络传输的负载。

我做的这个设计就是通过JSP和Ajax实现的无刷新聊天室。

关键词:JSP;Ajax;网络聊天室;无刷新

Abstract

Abstract

With the rapid development of Internet, chat rooms that compare the old way of communication has been recognized by many people. By online chat chat room has become the Internet interpersonal communication, a way of communication and contact. Therefore, more and more websites started offering online chat. Chat rooms, meanwhile, also with its convenient, fast, low-cost advantages such as affected by many enterprises, many enterprise site has joined the chat room, in order to achieve between the enterprises and consumers, customers and consumers to communicate and contact purpose.

Traditional Internet chat rooms in order to display online users and user messages sent in real time, the need to regularly refresh the page. Page refresh not only to take up some system resources and network bandwidth, but there is also a "black and white" phenomenon is very detrimental to a good user experience. Ajax is a new web application, the chat room system using Ajax technology development not only solved the page refreshes bring black and white issues, but also reduce the load on the server and network transmission.

I do this is designed by the JSP and Ajax no refresh the chat room

Keywords: Jsp;Ajax;Internet chat rooms;Nofresh;

目录

目录

摘要............................................................................................................................ II Abstract ......................................................................................................................... II 第一章绪论 (1)

1.1系统现状 (1)

1.2国内外主要研究成果 (1)

1.3课题的主要内容及章节安排 (3)

第二章系统开发环境和关键技术 (4)

2.1系统的开发环境 (4)

2.2 APPLICATION对象 (4)

2.3 AJAX技术 (5)

2.4 监控用户在线状态 (6)

2.5 JSP技术 (6)

第三章系统分析与设计 (9)

3.1系统分析 (9)

3.1.1聊天室功能需求分析 (9)

3.1.2聊天室功能性能分析 (9)

3.2系统运行环境 (9)

3.3系统预览和项目流程图 (10)

第四章系统的实现 (12)

4.1用户登录模块 (12)

4.2聊天室主体功能模块 (13)

4.3实时获取并显示在线人员列表 (14)

4.4实现用户发言 (15)

4.5实时显示聊天内容 (19)

4.6退出聊天室 (20)

第五章总结与致谢 (22)

参考文献 (24)

第一章绪论

第一章绪论

1.1系统现状

在人们的生活中,信息技术的飞速发展正在发生深刻变化。人与人之间的对话是不再局限于面对面,网上聊天室提供了信息交流的另一个地方。传统的聊天室,以显示在线用户和用户信息的实时传送,需要定期刷新页面。刷新页面,不仅要占用一定的系统资源和网络带宽,也会出现“白屏”的现象,这对良好的用户体验是非常不利的。而使用Ajax技术开发的聊天室,不仅可以解决页面刷新带来白屏的问题,也减少了对服务器和网络传输的负载。

随着互联网应用的普及,web应用以其良好的扩展性、易于部署、维护方便等优点逐渐成为软件开发的主流。早期的Web应用采用的是同步交互过程,即用户首先向Web服务器提交一个请求或行为呼叫,服务器接收到客户请求后执行相应处理操作,最后向用户返回处理结果。服务器在处理请求时,用户处于等待状态,有时如果超过了服务器响应时间,甚至返回“页面不可用”等提示。另外,当我们只想改变页面的部分数据时,用户的请求会导致服务器重新返回整个页面内容,包括那些没有改变的数据,这不但增加了网络传输的数据量,还影响了客户端的响应时间,为什么我们不能“按需”获取数据呢?Ajax技术可以很好的解决上述web应用中存在的问题。Ajax技术是Web2.0的核心之一,本质上是一种RIA(RichIllternet Application)技术。RIA是指具有高度互动性和丰富用户体验的网络应用程序,它既具有消息确认、无刷新页面之下提供快捷的界面响应、拖放式等桌面应用程序的特点,同时又具有部署简单、跨平台等Web应用程序的特点。Ajax技术提供了客户端与服务器异步通信的能力,从而使用户从请求一响应一再请求的循环中解脱出来,同时降低了网络传输的数据量,提高了客户端的响应速度,改善了用户使用体验,使得web应用可以接近甚至达到类似“桌面应用”的效果。

而Ajax有上述优势,例如Google Suggest,Gmail,Google Map等等交互程序中都使用了异步通讯技术。不知不觉中,Ajax应用程序占据了整个网络的每一个角落。纵观所有的应用程序,更好的用户体验是其的共同目标,在浏览器中实现桌面用户界面体验是Web开发的一种趋势。Ajax技术从谷歌到IBM,甲骨文,雅虎,BEA系统公司,红帽,Novell公司获得业界众多的IT巨头的支持,其快速发展是值得期待的。技术创新和标准化是Ajax技术发展的必由之路,而W3C

已成立了工作小组,专门从事Ajax的规范发展工作。

1.2国内外主要研究成果

Ajax技术的精髓是用异步交互替代了传统的同步交互,所以当用户操作时间大于服务器响应时间的时候,使用Ajax的效果非常明显。而当程序性能的瓶颈在于服务器

淮安信息职业技术学院毕业设计论文

响应时间的时候,Ajax无法解决程序运行缓慢的问题。因此,Ajax是更适合在网络上的互动频繁轻量级的应用程序。在Ajax开发的应用程序中,Google公司成功将Ajax技术应用到他们的商业产品。Google地图和Google Suggest都应用了这项技术。当用户使用谷歌地图查看地图(包括地图的缩放和平移地图),并没有提交任何请求到服务器,你就可以浏览到地图的各个部分。在这里,它是Ajax 技术的应用,使得地图是不刷新的方式,但每个显示原始数据的基础上以增量方式显示。在这种方式下,用户觉得就像是在自己的计算机上查看本地的地图。微软也在积极开发Ajax应用程序:它将Ajax技术应用到的MSN Space上面。当用户使用MSN Space提交回复评论时,浏览器会暂时停顿,然后刷新显示用户提交的评论,这是应用了Ajax的原理。目前,Ajax应用最普遍的领域是GIS-Map方面。GIS的区域搜索强调快速响应,Ajax 的特点正好符合这种要求。在应用Ajax技术开发过程当中,处于核心位置的Ajax引擎实际上是一些复杂的JavaScript程序。随着网络应用和界面表现的复杂化,使用面向过程的JavaScript 语言描述表现逻辑将会变得很困难。同时, JavaScript的兼容性和调试都会成为使用Ajax技术的一个障碍。为了解决这些问题,开发人员已经开发出了一些基于Ajax技术的框架,方便了开发人员使用,有利于Ajax 技术的进一步推广。当然,任何技术都是有局限性的,Ajax也不例外。Ajax更新页面无需刷新重载,这也使传统的一些用户交互行为变得不可用,如后退、前进和刷新等。另外,移动设备(如手机、PDA等)现在还不能很好的支持Ajax,Ajax 对流媒体的支持也没有Java Applet和Flash这样成熟的技术好。因此,一些辅助的平台和插件的开发也将是Ajax技术应用当中重要的一部分。

Ajax把大量的运算从服务器转移到了客户端浏览器,这意味着浏览器将承受更大的负担,而不再是简单的文档显示功能。

聊天室作为一个能够吸引人气的栏目,在现代网络应用中随处可见。它的作用是给不同的用户提供一个交流信息的场所。用户在聊天室中可以发布信息,就如同所有用户都在一个个真正室内聊天一样。

传统的聊天室程序一般设置在客户端的网页自动刷新。刷新在这样的数据会带来一些缺点,例如:每次刷新服务器应该重新获取数据,大大提高了服务器上的负载,此刷新过程正在进行,这将是非常严重的影响服务器的性能;每次刷新过程中会产生大量无用数据,不断刷新页面,用户在客户端方面,将导致屏幕闪烁。解决屏幕闪动最重要的一条原则就是,将改动的地方显示到客户端,而那些不需要改动的地方则尽量不要让用户感觉到变化。一个更好的解决办法是使用Ajax技术的无刷新聊天室应用。

现在的聊天室通过四个主要功能模块实现了聊天室中用户登录、注销、环境设置、发送消息、读取消息和查看在线用户列表等。聊天室系统为用户提供了聊天场所,操作员可对后台网站的风格、广告链接等进行设置;用户可以根据个人的习惯选择字体、文字颜色和表情等;前台聊天室具有私聊的功能,私聊的内容

第一章绪论

仅供私聊双方查看;聊天者可自己手动清除聊天内容。操作员可通过客户端处理模块获取界面元素从而得到聊天内容或与服务器交互更新客户端页面响应用户

事件。服务器端响应模块可提供聊天室界面元素信息获得提交数据。

1.3课题的主要内容及章节安排

现在,多渠道的信息源、网络化的数据分布、快捷医用的交互操作、智能化的分析决策等特点越来越成为衡量优良聊天软件的关键,因此,该网络聊天室是基于jsp语言运行于MyEclipse Java平台上,利用的技术主要是,使用配置文件作为数据管理。为实现和方便客户端间通信,在客户端进行了人性化的界面设计,用户可以输入用户名,登陆界面,改变字体颜色等功能。

第一章对本次课题的背景及意义、课题现状、课题内容与目标进行了深入的阐述。

第二章介绍了系统的开发环境和关键技术,例如Ajax技术、JSP技术、滚屏显示技术等等。

第三章是系统分析与设计。将对系统进行需求分析,对组成系统的功能模块进行划分,对每个模块将要实现的功能进行阐述和说明。对系统的结构进行设计,设计共享数据结构。

第四章是系统实现,分别介绍了服务器端和客户端每个功能的执行过程,画出主要模块的流程图。

第五章是总结与致谢。

最后,对本设计进行归纳总结,全面阐述本次设计中的体会。

第二章系统开发环境和关键技术

第二章系统开发环境和关键技术

2.1系统的开发环境

MyEclipse Java如图1-1系统开发环境。

图1-1系统开发环境

2.2 Application对象

Application对象是一个环境上下文(context)对象,用于保存应用程序中的所有公有数据,服务器启动并且自动创建Application对象以后,只要没有关闭服务器,Application对象将一直存在,并且可以被所有用户共享。

Application对象为JSP提供的内置对象,可以直接使用,但在servlet中,需要通过以下代码来获取该对象的实例,才可以使用该对象。 ServletContext application=getServletContext();

Application对象提供了很多方法,我的设计中,只使用了setAttribute()和getAttribute()方法。

首先来介绍setAttribute()方法,该方法用于将一个对象绑定到一个属性上,该属性在整个Servlet上下文中都适用。setAttribute()方法的语法格式如

第二章系统开发环境和关键技术

下;Application. setAttribute(String name,Object object);

参数说明:name:用于指定的一个属性名该属性在整个Servlet上下文都适用。object:用于指定属性值。

如本设计中的,设置保存聊天信的Application对象的属性的具体代码如下:application。setAttribute(“message”.sourceMessage);

下面我们再来介绍getAttribute()方法,该方法用于返回Application对象的指定属性的值。如果不存在该属性,则返回null。getAttribute()方法的基本语法如下:

Application。getAttribute(String name);参数说明:Name:用于指定一个属性名。

本设计中,设置获取聊天信息的Application对象的属性的具体代码如下: StringsourceMessage=application.getAttribute(“message”).toString();

2.3 Ajax技术

Ajax是一种创建交互式网页的web开发技术。Ajax的一个非常成功的案例就是Google,当用户在Google的搜索输入框中输入关键字的时候。他会提示与关键字相关的另一些关键字。用户可以对自己喜欢的一些关键字进行选择,这样既方便了用户定位自己的需要,又可以很好的引导搜索结果。

在Ajax应用中,页面中用户的操作将通过Ajax引擎与服务器进行通信,然后将返回结果提交给客户端页面的Ajax引擎,而有Ajax引擎决定这些数据插入到页面的任何位置。

Ajax的最大特点的就是很好的用户体验,大多数使用Ajax技术的web应用程序,比同类没有使用的web应用程序的用户体验要好的多,尽管他们都能完成相类似的功能。例如,一个普通的用户注册页面,如果用户希望知道注册的用户名是否已经注册过了,那只能等提交表单到服务器以后并重新来到一个新的页面,才知道用户名是否可用,这种情况每次单击按钮都会导致几秒钟的延迟和屏幕刷新,但事实上页面改动的地方却只有很少一部分,Ajax正在打破这种状况,是页面再无刷新的情况下,完成某些与服务器的交互功能。大大提高了用户的体验感。

2,Ajax不是单一的技术,而是四种技术的集合,有javascript ,css,Dom XMLHttpRequestAjax程序是用javascript语言写成的。Ajax程序可以使用CSS 来控制页面的样式。DOM,指的是文本对象模型,它是一个web页面的对象模型,可以用javascript来操作的页面结构。XMLHttpRequest对象用来在后台向服务器端发送请求,数据的格式可以使任何的文本格式,如XML、纯文本。他也是Ajax 进行异步通信的关键元素。

这四种技术各司其职,其中javascript是其他三中的粘合剂,javascript

淮安信息职业技术学院毕业设计论文

可以通过修改DOM的结构来改变界面,或者完全改变DOM的结构来重新绘制用户界面;XMLHttpRequest对象则用来与服务器进行异步通信,javascript也正是通过控制他来提交请求和获取最新数据的。

Ajax也会大量使用DHTML进行编程,并且它与服务器端的异步通信能力使得一个web页面的使用寿命大大增长,用户交互性大大增强了。

Ajax技术的优缺点:

作为富客户端技术之一的Ajax的最大优点,就是再不更新整个页面的前提下维护数据。这使得web应用程序能够更为迅捷的回应用户动作,并避免了在网络上发送那些没有改变过的信息。与其他富客户端技术不同,Ajax不需要任何浏览器插件,直接通过浏览器内置的javascript控制浏览器的内容和行为即可。而其他的富客户端技术往往需要安装插件,并且以一个单独的进程来运行这些富客户端,一旦处理不当,很可能造成速度很慢的后果。

缺点:就是Ajax在不同的浏览器运行时,由于各个浏览器之间的差异,是的开发者在众多不同的平台和浏览器上经过严格的测试,但是随着Ajax技术的成熟,一些简化跨平台的Ajax程序库,也相继问世,程序员可以使用这些运行库进行Ajax的开发,也不担心Ajax的跨平台性。还有一个缺点就是;他动态改变的内容无法保存到本地或通过收藏夹来保存。这其实是因为Ajax改变浏览器的内容和行为,往往是通过修改网页的DOM和CSS来控制的,这些新消息都仅仅在浏览器窗口没关之前存在于内存里。

Ajax更适合有少量页面内容需要改变的客户端编程,如果页面的大多说内容都需要改变的时候,还是建议使用让整个页面刷新的方式较好。

2.4 监控用户在线状态

在聊天室程序中需要实时监控用户在线状态,当用户非正常退出时(如:没有单击“退出聊天室”按钮,也没有单击窗口的关闭“按钮”,而是直接将页面转向其他网站),能够保证将该用户从列表中删除。可以应用Servlet中的监听器(HttpBingListener接口)实现此效果。

2.5 JSP技术

JSP(JavaServer Pages)是由Sun Microsystems公司倡导、许多公司参与一起建立的一种动态网页技术标准。JSP技术有点类似ASP技术,它是在传统的网页HTML文件(*.htm,*.html)中插入Java程序段(Scriptlet)和JSP标记(tag),从而形成JSP文件(*.jsp)。用JSP开发的Web应用是跨平台的,即能在Linux 下运行,也能在其他操作系统上运行。 JSP技术使用Java编程语言编写类XML 的tags和scriptlets,来封装产生动态网页的处理逻辑。网页还能通过tags和scriptlets访问存在于服务端的资源的应用逻辑。JSP将网页逻辑与网页设计和

第二章系统开发环境和关键技术

显示分离,支持可重用的基于组件的设计,使基于Web的应用程序的开发变得迅速和容易。 Web服务器在遇到访问JSP网页的请求时,首先执行其中的程序段,然后将执行结果连同JSP文件中的HTML代码一起返回给客户。插入的Java程序段可以操作数据库、重新定向网页等,以实现建立动态网页所需要的功能。 JSP 与Java Servlet一样,是在服务器端执行的,通常返回该客户端的就是一个HTML 文本,因此客户端只要有浏览器就能浏览。 JSP的1.0规范的最后版本是1999年9月推出的,12月又推出了1.1规范。目前较新的是JSP1.2规范,JSP2.0规范的征求意见稿也已出台。 JSP页面由HTML代码和嵌入其中的Java代码所组成。服务器在页面被客户端请求以后对这些Java代码进行处理,然后将生成的HTML 页面返回给客户端的浏览器。Java Servlet 是JSP的技术基础,而且大型的Web 应用程序的开发需要Java Servlet和JSP配合才能完成。JSP具备了Java技术的简单易用,完全的面向对象,具有平台无关性且安全可靠,主要面向因特网的所有特点。

JSP技术的强势(1)一次编写,到处运行。在这一点上Java比PHP更出色,除了系统之外,代码不用做任何更改。(2)系统的多平台支持。基本上可以在所有平台上的任意环境中开发,在任意环境中进行系统部署,在任意环境中扩展。相比ASP/PHP的局限性是显而易见的。(3)强大的可伸缩性。从只有一个小的Jar文件就可以运行Servlet/JSP,到由多台服务器进行集群和负载均衡,到多台Application进行事务处理,消息处理,一台服务器到无数台服务器,Java显示了一个巨大的生命力。(4)多样化和功能强大的开发工具支持。这一点与ASP 很像,Java已经有了许多非常优秀的开发工具,而且许多可以免费得到,并且其中许多已经可以顺利的运行于多种平台之下。 JSP技术的弱势(1)与ASP一样,Java的一些优势正是它致命的问题所在。正是由于为了跨平台的功能,为了极度的伸缩能力,所以极大的增加了产品的复杂性。(2) Java的运行速度是用class常驻内存来完成的,所以它在一些情况下所使用的内存比起用户数量来说确实是“最低性能价格比”了。从另一方面,它还需要硬盘空间来储存一系列的.java文件和.class文件,以及对应的版本文件。 JSP六种内置对象: request, response, out, session, application, config, pagecontext, page, exception.

一.request对象:该对象封装了用户提交的信息,通过调用该对象相应的方法可以获取封装的信息,即使用该对象可以获取用户提交信息。二.response对象:对客户的请求做出动态的响应,向客户端发送数据。三.session对象 1.什么是session:session对象是一个JSP内置对象,它在第一个JSP页面被装载时自动创建,完成会话期管理。从一个客户打开浏览器并连接到服务器开始,到客户关闭浏览器离开这个服务器结束,被称为一个会话。当一个客户访问一个服务器时,可能会在这个服务器的几个页面之间反复连接,反复刷新一个页面,服务器应当通过某种办法知道这是同一个客户,这就需要session对象。 2.session

淮安信息职业技术学院毕业设计论文

对象的ID:当一个客户首次访问服务器上的一个JSP页面时,JSP引擎产生一个session对象,同时分配一个String类型的ID号,JSP引擎同时将这个ID号发送到客户端,存放在Cookie中,这样session对象和客户之间就建立了一一对应的关系。当客户再访问连接该服务器的其他页面时,不再分配给客户新的session对象,直到客户关闭浏览器后,服务器端该客户的session对象才取消,并且和客户的会话对应关系消失。当客户重新打开浏览器再连接到该服务器时,服务器为该客户再创建一个新的session对象。四.aplication对象 1.什么是application: 服务器启动后就产生了这个application对象,当客户再所访问的网站的各个页面之间浏览时,这个application对象都是同一个,直到服务器关闭。但是与session不同的是,所有客户的application对象都是同一个,即所有客户共享这个内置的application对象。 2.application对象常用方法: (1)public void setAttribute(String key,Object obj): 将参数Object指定的对象obj添加到application对象中,并为添加的对象指定一个索引关键字。

(2)public Object getAttribute(String key): 获取application对象中含有关键字的对象。五.out对象 out对象是一个输出流,用来向客户端输出数据。out对象用于各种数据的输出。

第二章系统开发环境和关键技术

第三章系统分析与设计

3.1系统分析

3.1.1聊天室功能需求分析

用户登录,包括用户是否在线

实时显示在线人员列表及在线人数

用户发言,包括显示聊天内容和滚屏显示聊天信息

安全退出聊天室,包括单击关闭按钮退出聊天室。

3.1.2聊天室功能性能分析

普通用户能够登录的聊天室进行文本的聊天,能够方便的实现公共交谈、选择颜色、添加文字表情等。可以用Ajax实现无刷新操作。

3.2系统运行环境

在开发聊天室系统时,需要具备下面的软件环境:

服务器端:

操作系统:WindowsXP。

Web服务器:Tomcat6.0。

Java开发包:MyEclipse。

客户器端:

IE6.0。

3.3项目流程图和系统预览

(1)项目流程图

聊天室的系统流程,如图3-1

淮安信息职业技术学院毕业设计论文

图3-1项目流程图

(2)为了是使大家对本模块有一定的了解,下面将给出聊天室的主界面预览效果图。聊天室的登录界面如图3-2登录界面.输入用户名,然后单击“进入”按钮,将进入聊天室的主界面,如图3-3主界面。

图3-2登录界面

第三章系统分析与设计

图3-3主界面

第四章系统的实现

4.1用户登录模块

当用户访问聊天室时,首先进入的是登录聊天室页面。在该页面中,用户输入自己喜欢的用户名,如图4-1登录界面,单击进入按钮,系统将判断输入的用户名是否被占用,如果被占用将给出提示。

图4-1登录界面

<%@page contentType="text/html"pageEncoding="UTF-8"%>

聊天室


onSubmit="return check()">

 
 用户名:

4.2聊天室主体功能模块

在用户登录页面中输入用户名,单击“进入”按钮即可进去聊天室的主界面。如图4-2聊天室主体功能模块,在页面中包括页面头部、在线人员列表区、聊天内容显示区和用户发言区4部分。

图4-2聊天室主体功能模块

4.3实时获取并显示在线人员列表

在设计聊天室程序时,为了让用户及时了解在线用户,并与其他用户交流,需要提供

淮安信息职业技术学院毕业设计论文

实时获取并显示在线人员列表的功能。这小节介绍聊天室的主界面中,左侧显示在线人员列表及在线人数。如图4-3在线人员列表图。

图4-3在线人员列表图

为了实时显示在线人员列表,这里应用了Ajax技术。实现实时显示在线人员列表的具体步骤如下:

1、编写自定义的JavaScript函数showOnline(),用于实例化Ajax对象,showOline()函数的具体代码如下:

function showOnline(){

var loader=new net.AjaxRequest("online.jsp?nocache="+new

Date().getTime(),deal_online,onerror,"GET");}

其中?nocache="+new Date().getTime()的用处是更新在线人员列表。

2、Ajax进行异步请求目标的URL地址是onlin.jsp,即JSP文件。在该文件中,主要是将保存在集合类中的在线人员列表显示到页面。Online.jsp页面的代码如下:

<%@page contentType="text/html"pageEncoding="UTF-8"%>

<%@page import="https://www.360docs.net/doc/a913414295.html,erInfo"%>

<%@page import="java.util.*"%>

<%

UserInfo list=UserInfo.getInstance();

Vector vector=list.getList();

int amount=0;

%>

第四章系统的实现

<%if(vector!=null&&vector.size()>0){

String username="";

amount=vector.size();

for(int i=0;i

username=(String)vector.elementAt(i);%>

<%}}%>

欢迎来到心之语聊天室!
所有人
<%= username%>
当前在线[<%=amount%>]人

3、在聊天室的主界面中,将左侧用于显示在线人员列表的单元格的id属性设置为online,用于实时显示在线人员列表,具体代码如下:

在线人员列表

4、编写Ajax的回调函数deal_online(),用于将获取的在线人员列表赋值给id 为online的标记的innerHYML属性。Deal_online()函数的具体代码如下:function deal_online(){

online.innerHTML=this.req.responseText;

}

5、为了让页面载入后就调用Ajax获取在线人员列表,并且每隔10秒钟便获取一次数据,还需要在页面中添加JavaScript代码,具体代码如下:

window.setInterval("showOnline();",10000);

window.onload=function(){

showOnline(); //当页面载入后显示在线人员列表

4.4实现用户发言

在聊天室程序中一个必不可少的功能就是实现用户发言,设计中,用户发言区位于聊天室主界面的底部,如图:4-4用户发言模块。

图4-4用户发言模块

实现用户发言的具体步骤如下:

淮安信息职业技术学院毕业设计论文

1、在页面的合适位置添加用于收集用户发言信息的表单及表单元素,关键代码如下:

 

[${username} ]对

表情

说:  字体颜色: